Tải lên HTML5 canvas như một blob

Question

Tôi có một canvas, mà tôi có thể vẽ vào DOM mà không có một vấn đề cũng như tiết kiệm cho người sử dụng tại địa phương sử dụng:

storCanvas.toBlob(function(blob) { saveAs(blob, name + ".png");}); 

(lưu ý: Tôi đã bao gồm canvas- toBlob.js để hỗ trợ nền tảng chéo, từ http://eligrey.com/blog/post/saving-generated-files-on-the-client-side)

Bây giờ, những gì tôi muốn làm là gửi cùng phần tử canvas đến máy chủ. Tôi nghĩ tôi có thể làm điều gì đó như:

storCanvas.toBlob(function(blob) {upload(blob);}); 

nơi tải lên (blob); là:

function upload(blobOrFile) 
{ 
    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', 'upload_file.php', true); 
    xhr.onload = function(e) { /*uploaded*/ }; 

    // Listen to the upload progress. 
    var progressBar = document.querySelector('progress'); 
    xhr.upload.onprogress = function(e) { 
     if (e.lengthComputable) 
     { 
      progressBar.value = (e.loaded/e.total) * 100; 
      progressBar.textContent = progressBar.value; 
     } 
    }; 
    xhr.send(blobOrFile); 

} 

(cribbed từ: http://www.html5rocks.com/en/tutorials/file/xhr2/)

Bây giờ, tôi nghĩ rằng tôi này sẽ làm việc, nhưng trang PHP của tôi (mà tôi có thể làm một POST để sử dụng thành công một hình thức HTML chuẩn) báo cáo lại (qua firebug) rằng nó có tệp không hợp lệ là 0kB. Tôi cho rằng vấn đề là trong chuyển đổi của tôi thành một đốm màu, nhưng tôi không chắc chắn cách chính xác để đi về nó ...

Answer 1

Không chắc chắn nếu muốn điều này. Nhưng làm thế nào về việc chuyển đổi phần tử canvas thành url dữ liệu hình ảnh và sau đó gửi nó đến máy chủ và sau đó viết nó lên máy chủ. Một cái gì đó như

function canvas2DataUrl(canvasElementId){ 
    var canvasElement = document.getElementById("canvasElementId"); 
    var imgData = canvasElement.toDataURL("image/png"); 
    return imgData; 
} 

Answer 2

Tôi đã gặp vấn đề tương tự khi tự tìm hiểu về các đốm màu. Tôi tin rằng vấn đề là ở nộp blob bản thân thông qua các XMLHttpRequest hơn là đặt nó bên trong một FormData như thế này:

canvas.toBlob(function(blob) { 
    var formData = new FormData(); //this will submit as a "multipart/form-data" request 
    formData.append("image_name", blob); //"image_name" is what the server will call the blob 
    upload(formData); //upload the "formData", not the "blob" 
}); 

Hope this helps.

Answer 3

Bạn có thể sử dụng mô-đun này để tải lên blob.

blobtools.js (https://github.com/extremeFE/blobtools.js)

//include blobtools.js 
blobtools.uploadBlob({ // upload blob 
    blob: blob, 
    url: uploadUrl, // upload url 
    fileName : 'paste_image.png' // upload file name 
    callback: callback // callback after upload 
});