dart - 在客户端从base64制作图片

Question

如何使用 HttpRequest.request 从 base64 字符串制作图片以将其发送到服务器？

例如，我有以下 base64 字符串：

'数据：图像/jpeg;base64 ,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='

我不想发送它，而是想将 jpeg 发布到服务器？可能吗？

Answer 1

将 Base64 转换为字节
如何原生转换字符串 -> base64 和 base64 -> 字符串

上传二进制为图像
Dart 如何上传图像
编辑
（这是服务器部分，我必须寻找客户端部分）

客户端代码：

  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 here How to upload a file in Dart？
然后在代码中使用创建的 dataUrl 作为 src，如下所示如何在 Dart 中加载图像，
另见Base64 png 数据到 html5 画布，正如@DanFromGermany 在他对问题的评论中提到的那样。

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

Answer 2

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

基本上，您只需拆分从 canvas.toDataUrl() 获得的文本，将 Base64 文本转换为二进制数据，然后将其发送到服务器。使用“crypto”库中的“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 转换部分不起作用（不再起作用了？）。这里的代码确实有效：

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