Make picture from base64 on client-side

问题

How to make a picture from a base64-string to send it to server by using HttpRequest.request?

For example, I have the following base64-string:

'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='

Instead of sending it I would like to post a jpeg to server? Is it possible?

回答1:

Convert Base64 to bytes
How to native convert string -> base64 and base64 -> string

Upload binary as image
Dart how to upload image
EDIT
(this is the server part, I have to look for the client part)

Client code:

  var request = new HttpRequest()
    ..open("POST", 'http://yourdomain.com/yourservice')
    ..overrideMimeType("image/your-imagetype") // might be that this doesn't work than use the next line
    ..setRequestHeader("Content-Type", "image/your-imagetype")
    ..onProgress.listen((e) => ...);

  request
    ..onReadyStateChange.listen((e) => ...)
    ..onLoad.listen((e) => ...)
    ..send(yourBinaryDataAsUint8List);

Convert to image:
I think you need to create a dataURL like show here How to upload a file in Dart?
and then use the created dataUrl as src in code like shown here How to load an image in Dart
see also Base64 png data to html5 canvas as @DanFromGermany mentioned in his comment on the question.

It may be necessary to convert List to Uint8List in between.
Please add a comment if you need more information.

回答2:

I like decoding on server-side, but anyways.

Basically you just split a text you got from canvas.toDataUrl(), convert the Base64 text to binary data, then send it to server. Use "CryptoUtils" in "crypto" library to treat Base64. I haven't tested with any proper http server, but this code should work.

// Draw an on-memory image.
final CanvasElement canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
final CanvasRenderingContext2D context = canvas.getContext('2d');
final CanvasGradient gradient = context.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, "#1e4877");
gradient.addColorStop(0.5, "#4584b4");
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(10, 10);
context.lineTo(240, 240);
context.lineWidth = 10;
context.strokeStyle = '#ff0000';
context.stroke();

// Convert the image to data url
final String dataUrl = canvas.toDataUrl('image/jpeg');
final String base64Text = dataUrl.split(',')[1];
final Uint8ClampedList base64Data = new Uint8ClampedList.fromList(
    CryptoUtils.base64StringToBytes(base64Text));

// Now send the base64 encoded data to the server.
final HttpRequest request = new HttpRequest();
request
  ..open("POST", 'http://yourdomain.com/postservice')
  ..onReadyStateChange.listen((_) {
    if (request.readyState == HttpRequest.DONE &&
        (request.status == 200 || request.status == 0)) {
      // data saved OK.
      print("onReadyStateChange: " + request.responseText); // output the response from the server
    }
  })
  ..onError.listen((_) {
    print("onError: " + _.toString());
  })
  ..send(base64Data);

I posted a complete snippet here. https://gist.github.com/hyamamoto/9391477

回答3:

I found the Blob conversion part not to be working (anymore?). The code from here does work:

Blob createImageBlob(String dataUri) {
  String byteString = window.atob(dataUri.split(',')[1]);
  String mimeString = dataUri.split(',')[0].split(':')[1].split(';')[0];
  Uint8List arrayBuffer = new Uint8List(byteString.length);
  Uint8List dataArray = new Uint8List.view(arrayBuffer.buffer);
  for (var i = 0; i < byteString.length; i++) {
    dataArray[i] = byteString.codeUnitAt(i);
  }
  Blob blob = new Blob([arrayBuffer], mimeString);
  return blob;
}

来源：https://stackoverflow.com/questions/22196593/make-picture-from-base64-on-client-side

标签

dart

dart-html