如何使用HttpRequest.request將圖片從base64字符串發送到服務器?在客戶端從base64製作圖片
例如,我有以下的base64字符串:
'數據:圖像/ JPEG; BASE64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 // 8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg =='
而不是發送它的予想將jpeg發佈到服務器?可能嗎?
如何使用HttpRequest.request將圖片從base64字符串發送到服務器?在客戶端從base64製作圖片
例如,我有以下的base64字符串:
'數據:圖像/ JPEG; BASE64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 // 8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg =='
而不是發送它的予想將jpeg發佈到服務器?可能嗎?
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 How to upload a file in Dart?
,然後使用創建的dataUrl在代碼的src像這裏顯示How to load an image in Dart
也看到Base64 png data to html5 canvas如@DanFromGermany中提到他對這個問題發表評論。
可能需要將List轉換爲Uint8List。
如果您需要更多信息,請添加評論。
我喜歡解碼在服務器端,但無論如何。
基本上,你只是從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
我發現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字符串,並將其轉換服務器端? – Johan
爲了減少服務器負載 – Roman
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data – Johan