将HTML5画布上传为blob

Question

我有一个画布,我可以毫无问题地绘制到DOM,并为本地用户保存:

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

(注意:我已经包含了canvas-toBlob.js用于跨平台支持,来自http://eligrey.com/blog/post/saving-generated-files-on-the-client-side)

现在,我想要做的是将相同的canvas元素发送到服务器.我以为我可以这样做:

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

上传(blob); 是:

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

}

(来自:http://www.html5rocks.com/en/tutorials/file/xhr2/ )

现在,我认为我会这样做,但我的PHP页面(我可以成功使用标准HTML表单进行POST)报告(通过firebug)它有一个0kB的无效文件.我认为问题在于我转换为blob,但我不确定正确的方法...

Answer 1

我自己学习blob时遇到了同样的问题.我认为问题在于blob通过提交自己,XMLHttpRequest而不是FormData像这样:

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

希望这可以帮助.

Answer 2

不确定是否想要这个。但是如何将canvas元素转换成图像数据url然后发送到服务器，然后写入到服务器上呢？就像是

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