GWT: how convert ImageData to Base64

Question

I'd like to convert ImageData to Base64 string to save it in server. Is it posible? My project is:

import com.google.gwt.canvas.client.Canvas;
import com.google.gwt.canvas.dom.client.Context2d;
import com.google.gwt.canvas.dom.client.ImageData;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.ImageElement;
import com.google.gwt.event.dom.client.LoadEvent;
import com.google.gwt.event.dom.client.LoadHandler;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;


public class ImgManipulation implements EntryPoint {
public void onModuleLoad() {
// download any car.jpg to war/images
final Image img = new Image("images/car.jpg");
img.setVisible(true);
RootPanel.get().add(img);

img.addLoadHandler(new LoadHandler() {
public void onLoad(LoadEvent event) {
scale(img);
}
});
}

private void scale(Image image) {

double scaleToRatio = 0.1;

Canvas canvasTmp = Canvas.createIfSupported();
Context2d context = canvasTmp.getContext2d();

double ch = (image.getHeight() * scaleToRatio) + 100;
double cw = (image.getWidth() * scaleToRatio) + 100;

canvasTmp.setCoordinateSpaceHeight((int) ch);
canvasTmp.setCoordinateSpaceWidth((int) cw);

ImageElement imageElement = ImageElement.as(image.getElement());
// s = source  d = destination 
double sx = 0;
double sy = 0;
double sw = imageElement.getWidth();
double sh = imageElement.getHeight();

double dx = 0;
double dy = 0;
double dw = imageElement.getWidth();
double dh = imageElement.getHeight();

context.scale(scaleToRatio, scaleToRatio);
context.drawImage(imageElement, sx, sy, sw, sh, dx, dy, dw, dh);

double w = dw * scaleToRatio;
double h = dh * scaleToRatio;
ImageData imageData = context.getImageData(0, 0, w, h);

Canvas canvasTmp2 = Canvas.createIfSupported();
canvasTmp2.setCoordinateSpaceHeight((int) imageData.getHeight());
canvasTmp2.setCoordinateSpaceWidth((int) imageData.getWidth());
Context2d context2 = canvasTmp2.getContext2d();
context2.putImageData(imageData, 0, 0);
RootPanel.get().add(new Label(" Canvas -> "));
RootPanel.get().add(canvasTmp2);

Image canvasImage = new Image(canvasTmp2.toDataUrl());
RootPanel.get().add(new Label(" Image from canvas -> "));
RootPanel.get().add(canvasImage);

// image.setUrl("data:image/jpeg;base64,"+str);

}

}

Other way I think is to send image to server. But how to do this without form? I did't find someting like ImageItem. Thanks.

possible duplicate of [Convert Base64 String with Gwt](http://stackoverflow.com/questions/18683299/convert-base64-string-with-gwt) — samgak, Mar 16 '15 at 05:22
No. I'd like to receive Byte64 string from ImageData which has information about every point of image (red, green, blue...) or convert it to some String, byte[] (then Blob in server). So I want to save it in GAE Datastore as a Blob or String. — user3080136, Mar 16 '15 at 14:35
.toDataUrl returns a Base64 encoded version of the image as a String, is that not sufficient? — Bjartr, Mar 20 '15 at 13:52

score 0 · Answer 1 · answered Mar 22 '15 at 21:06

// image.setUrl("data:image/jpeg;base64,"+str); CHANGE TO CODE BELOW
// EVERY POINT HAS RED, GREEN, BLUE
StringBuffer  sb = new StringBuffer();
for (int y=1; y<=(int) imageData.getHeight(); y++){
for (int x=1; x<=(int) imageData.getWidth(); x++ ){
String red = "000"+imageData.getRedAt( x,  y);
sb.append(red.substring(red.length()-3, red.length()));
String green = "000"+imageData.getGreenAt( x,  y);
sb.append(green.substring(green.length()-3, green.length()));
String blue = "000"+imageData.getBlueAt( x,  y);
sb.append(blue.substring(blue.length()-3, blue.length()));
}
}
String result = (int) imageData.getWidth()+"~"+sb.toString();

// NOW I CAN STORE result in GAE Datastore
// ***************************************************************   
// And after receiving result from GAE Datastore make this

String[] dataHere = result.split("~");
int widthHere = Integer.parseInt(dataHere[0]);
int heigthHere = (dataHere[1].length())/(9*widthHere);

Canvas newCanvasTmp3 = Canvas.createIfSupported();
newCanvasTmp3.setCoordinateSpaceHeight(heigthHere);
newCanvasTmp3.setCoordinateSpaceWidth(widthHere);

Context2d context3 = newCanvasTmp3.getContext2d();

int count = 0;
for (int y=1; y<=heigthHere; y++){
for (int x=1; x<=widthHere; x++ ){

String str_red_1 = String.valueOf(dataHere[1].charAt(count));
count++;
String str_red_2 = String.valueOf(dataHere[1].charAt(count));
count++;
String str_red_3 = String.valueOf(dataHere[1].charAt(count));
int num_red = Integer.parseInt( str_red_1 + str_red_2 + str_red_3);
count++;

String str_green_1 = String.valueOf(dataHere[1].charAt(count));
count++;
String str_green_2 = String.valueOf(dataHere[1].charAt(count));
count++;
String str_green_3 = String.valueOf(dataHere[1].charAt(count));
int num_green = Integer.parseInt(str_green_1+str_green_2+str_green_3);    
count++;

String str_blue_1 = String.valueOf(dataHere[1].charAt(count));
count++;
String str_blue_2 = String.valueOf(dataHere[1].charAt(count));
count++;
String str_blue_3 = String.valueOf(dataHere[1].charAt(count));
int num_blue = Integer.parseInt(str_blue_1 + str_blue_2 + str_blue_3);
count++;

context3.setFillStyle(CssColor.make(num_red, num_green, num_blue));
context3.fillRect( (double)x, (double)y, (double)1, (double)1 );
//              context3.fill();

}
}

RootPanel.get().add(new Label(" Canvas 256 RGB -> "));     
RootPanel.get().add(newCanvasTmp3);

Image canvasImage3 = new Image(newCanvasTmp3.toDataUrl());
RootPanel.get().add(new Label(" Image from 256 RGB canvas -> "));
RootPanel.get().add(canvasImage3);

score 0 · Answer 2 · answered Mar 28 '16 at 10:00

Like this:

Canvas canvas = Canvas.createIfSupported();
canvas.setCoordinateSpaceWidth(imageData.getWidth());
canvas.setCoordinateSpaceHeight(imageData.getHeight());
canvas.getContext2d().putImageData(imageData, 0, 0);

String base64Str = canvas.toDataUrl();

GWT: how convert ImageData to Base64

2 Answers2