在客户端用base64制作图片
如何用make 64-字符串制作图片，使用HttpRequest.request将其发送到服务器？
例如，我有以下base64 64-string：
'data:image/jpeg;base64，iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==‘
我不想发送它，而是把jpeg发到服务器上？有可能吗？
回答 3
Stack Overflow用户
发布于 2014-03-05 11:47:34
将Base64转换为字节
How to native convert string -> base64 and base64 -> string
上传二值图像
编辑
(这是服务器部分，我必须查找客户端部分)
客户代码：
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，如何在Dart中上传文件？
然后在代码中使用创建的dataUrl作为src，如下所示，如何在Dart中加载图像
参见Base64 png数据到html5画布 @DanFromGermany在他对这个问题的评论中提到的。
在两者之间可能需要将List转换为Uint8List。
如果您需要更多的信息，请添加评论。
Stack Overflow用户
发布于 2014-03-06 15:40:47
我喜欢在服务器端解码，但不管怎样。
基本上，您只需拆分从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
Stack Overflow用户
发布于 2014-08-15 15:04:46
我发现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;
}https://stackoverflow.com/questions/22196593
复制相似问题
腾讯云开发者
