javascript – 将HTML5画布上传到Blob

我有一个画布,我可以绘制DOM,没有问题,以及为本地用户保存：

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

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

现在,我想做的是将相同的canvas元素发送到服务器.我以为我可以做一些像：

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

其中upload(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页面(我可以做一个POST成功使用标准的HTML表单)报告(通过firebug)它有一个无效的文件0kB.我认为这个问题是在我的转换到一个blob,但我不知道正确的方法去吧？

解决方法

当我自己学习斑点时,遇到同样的问题.我相信问题在于通过XMLHttpRequest提交blob本身,而不是将其放在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"
});

希望这可以帮助.

原文地址：https://www.jb51.cc/js/152199.html