Question

如何使用HttpRequest.request将base64-string中的图片发送到服务器？

例如，我有以下base64-string：

数据：图像/ JPEG; BASE64 下，iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 // 8 / w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg =='

而不是发送它我想发一个jpeg到服务器？有可能吗？

Answer 1

将Base64转换为字节
How to native convert string -> base64 and base64 -> string

将二进制上传为图像
Dart how to upload image
的修改
（这是服务器部分，我必须寻找客户端部分）

客户代码：

  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);

转换为图片
我认为您需要创建一个dataURL，例如show How to upload a file in Dart?
然后将创建的dataUrl用作代码中的src，如此处How to load an image in Dart所示另请参阅{DORDFromGermany在他对该问题的评论中提到的Base64 png data to html5 canvas。

可能需要将List转换为Uint8List 如果您需要更多信息，请添加评论。

Answer 2

我喜欢在服务器端解码，但无论如何。

基本上你只需要从canvas.toDataUrl（）中分割出一个文本，将Base64文本转换为二进制数据，然后将其发送到服务器。在“加密”库中使用“CryptoUtils”来处理Base64。我没有使用任何正确的http服务器进行测试，但此代码应该可以正常工作。

// 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);

我在这里发布了一个完整的片段。 https://gist.github.com/hyamamoto/9391477

Answer 3

我发现Blob转换部分不再工作了（不再？）。来自here的代码确实有效：

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;
}

在客户端从base64制作图片

3 个答案: