14

我有一个画布，我可以毫无问题地将其绘制到 DOM 上，也可以使用以下方法在本地为用户保存：

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

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

现在，我想做的是将相同的画布元素发送到服务器。我以为我可以做类似的事情：

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，但我不确定正确的解决方法......

4

3 回答 3

10

我自己在学习 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"
});

希望这可以帮助。

于 2012-12-15T04:02:53.740 回答
-1

您可以使用此模块上传 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
});
于 2013-06-21T14:04:42.607 回答
-2

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

function canvas2DataUrl(canvasElementId){
  var canvasElement = document.getElementById("canvasElementId");
  var imgData = canvasElement.toDataURL("image/png");
  return imgData;
}
于 2012-04-28T10:50:27.193 回答