在客戶端從base64製作圖片

如何使用HttpRequest.request將圖片從base64字符串發送到服務器？在客戶端從base64製作圖片

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

'數據：圖像/ JPEG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 // 8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg =='

而不是發送它的予想將jpeg發佈到服務器？可能嗎？

來源

2014-03-05 Roman

爲什麼不把它作爲一個base64字符串，並將其轉換服務器端？ – Johan

爲了減少服務器負載 – Roman

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data – Johan

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。
如果您需要更多信息，請添加評論。

來源

2014-03-05 11:47:34

感謝您的幫助！我希望有一種方法可以在客戶端製作圖片！ – Roman

要在客戶端上顯示它？ –

是的，picures將顯示在客戶端上。我知道我可以使用像img.src =「data：image/png; base64，iVBORw0KGgoAAAANSUhEU ...但這種方式對於在服務器上存儲圖像並不是最佳的。 – Roman

我喜歡解碼在服務器端，但無論如何。

基本上，你只是從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

來源

2014-03-06 15:40:47

我發現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; 
}

來源

2014-08-15 15:04:46

在客戶端從base64製作圖片

回答

相關問題