2013-03-18 15 views
5

Utilizzo un plug-in jQuery chiamato wPaint per consentire agli utenti di disegnare la propria immagine. Mando l'immagine risultante come stringa al server come una stringa che inizia conCome convertire un'immagine come stringa in un file PNG

dati: image/png; Base64,

ho provato i due approcci di seguito, ma con entrambi gli approcci i' m non è in grado di memorizzare l'immagine.

Approccio 1

String imageData = parameterParser.getStringParameter("image", ""); 
byte[] imgByteArray = Base64.decodeBase64(imageData.getBytes()); 
FileOutputStream fileOutputStream = new FileOutputStream("/home/arvind/Desktop/test.png"); 
fileOutputStream.write(imgByteArray); 
fileOutputStream.close(); 

In questo caso il file viene scritto, ma non mostra l'immagine. Tuttavia, quando rimuovo l'estensione del file ottengo la stringa che è stata inviata al server (ad esempio, qualunque sia in imageData).

Approccio 2

String imageData = parameterParser.getStringParameter("image", ""); 
byte[] imgByteArray = Base64.decodeBase64(imageData.getBytes()); 
InputStream in = new ByteArrayInputStream(imgByteArray); 
BufferedImage bImageFromConvert = ImageIO.read(in); 
ImageIO.write(bImageFromConvert, "png", new File("/home/arvind/Desktop/test.png")); 

Il BufferedImage bImageFromConvert è nullo in modo da ottenere un'eccezione (IllegalArgumentException) quando viene creato il file.

La classe Base64 proviene dalla libreria di codec di apache commons ed è la versione 1.2.

C'è qualcosa che sto facendo male?

+0

come l'immagine viene convertita come una stringa? –

+0

nel plugin wPaint (che in realtà è un plugin jQuery), c'è una funzione per convertire l'immagine in una stringa. la stringa viene convertita correttamente perché se si assegna un img src con la stessa stringa sul lato client, viene mostrata l'immagine. –

+1

quindi è necessario riconvertirlo in byte con lo stesso plugin. –

risposta

5

Inizialmente avevo inviato i dati al server utilizzando il seguente codice.

$.ajax({ 
     url : '/campaign/holiImageUpload.action', 
     type : 'POST', 
     data : "image=" + $("#wPaint2").wPaint("image") 
     success :function(data){ 
     } 
    }); 

ora sto inviando i dati al server utilizzando il seguente codice

var imgData = $("#wPaint2").wPaint("image"); 
    $.ajax({ 
     url : '/campaign/holiImageUpload.action', 
     type : 'POST', 
     data : {image : imgData}, 
     success :function(data){ 
     } 
    }); 

Nel lato server questo è il codice finale:

String imageData = parameterParser.getStringParameter("image", ""); 

    try { 
     imageData = imageData.substring(22); 
     byte[] imgByteArray = Base64.decodeBase64(imageData.getBytes()); 
     InputStream in = new ByteArrayInputStream(imgByteArray); 
     BufferedImage bufferedImage = ImageIO.read(in); 
     ImageIO.write(bufferedImage, "png", new File("/home/arvind/Desktop/test.png")); 
    catch(Exception ex){ 
     ex.printStrackTrace(); 
    } 
+0

Questo ha fatto il trucco per me, solo un piccola correzione: invece di Base64.decodeBase64 (imageData.getBytes()), ho usato: Base64. – bks

0

Sembra che si stia tentando di decodificare data:image/png'base64 insieme ai dati codificati Base64? Dovrai rimuoverlo dalla stringa di input prima di decodificare i dati Base64 in byte di immagine.

Inoltre, non si desidera decodificare la stringa come byte ... proprio come una stringa.

+0

puoi condividere alcuni snippet di codice? non sono troppo sicuro di quale apis mi consentirà di scrivere un file immagine usando la stringa come input stesso. –

+0

I dati base64 sono una codifica di stringa per i dati di byte. Quando decodificate la stringa codificata in base64, essa diventa nuovamente una matrice di byte contenente i dati per l'immagine. Una volta rimosso i dati non codificati come suggerito nella mia risposta. – cjstehno

+0

hanno già provato anche questo (es. ImageData = imageData.substring (22) .. che non ha fatto il trucco –

Problemi correlati