Javascript 将HTML5画布作为blob上传

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

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

（注意：我已经包括了canvas-toBlob.js，用于跨平台支持，来自）

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

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

哪里上传（blob）；是:

（抄袭自：）

---

现在，我认为这会起作用，但我的PHP页面（我可以使用标准HTML表单成功发布）报告（通过firebug）它得到了一个0 KB的无效文件。我假设问题是在我转换成blob的过程中，但我不确定正确的方法…

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

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

---

我自己在学习水滴时也遇到了同样的问题。我认为问题在于通过

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

---

希望这有帮助。

您可以使用此模块上载blob

blobtools.js（）

---

不要走这条路。我沿着这条路线开始，结果比最初想象的要复杂得多。将base64解码到bin后，仍然缺少标头。不妨去文件或blob上传路线为这个答案热烈欢呼！！注意：是的，“image_name”是图像的表单键，但要随文件发送所需的文件名，它是：formData.append（“image_name”，blob，“myFileName.jpg”）；（src:）与本机方法formData.append（“image_name”，blob，“myFileName.jpg”）相比，这个模块似乎没有提供太多改进；

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

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