Question

我有一个画布组合，由10个不同的图像组成。这些图像从xml文件中获取数据，该文件具有一个坐标列表，这些坐标会在每个图像放入画布时为每个图像创建一个蒙版。

然后我尝试将画布保存为带有

的图像

var image = new Image();
image.src = canvas.toDataURL("image/png");

但是，图像显示空白，并且没有错误。在检查出现的图像时，src为：

   data:image/png;base64,iVBORw0KGgoAAAANS...ICxjqAABQ+0HCBAgQIBAWMQ4CcQAAAAAElFTkSuQmCC (shortened)

当我从不同的域中提取文件时，我阅读了有关安全问题，污染画布等的所有内容，但我没有收到任何错误，我使用的所有内容都在本地托管（http：// localhost）

关于如何调试这个的任何想法？

编辑：我更感兴趣的是在浏览器中将其显示为图像，然后担心以后保存它。但是，如果将它“保存”到本地存储，然后显示它可以工作，那么我就失望了。

Answer 1

你确定在绘制画布后调用toDataUrl吗？你确定无论你在哪里将新图像附加到DOM，它都会以适当的宽度/高度/不透明度显示吗？

Answer 2

您是否有处理图片上传的功能？

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3a.c2.a0Showing_thumbnails_of_user-selected_images



function FileUpload(img, file) {
  var reader = new FileReader();  
  this.ctrl = createThrobber(img);
  var xhr = new XMLHttpRequest();
  this.xhr = xhr;

  var self = this;
  this.xhr.upload.addEventListener("progress", function(e) {
        if (e.lengthComputable) {
          var percentage = Math.round((e.loaded * 100) / e.total);
          self.ctrl.update(percentage);
        }
      }, false);

  xhr.upload.addEventListener("load", function(e){
          self.ctrl.update(100);
          var canvas = self.ctrl.ctx.canvas;
          canvas.parentNode.removeChild(canvas);
      }, false);
  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
  reader.onload = function(evt) {
    xhr.sendAsBinary(evt.target.result);
  };
  reader.readAsBinaryString(file);
}

从画布合成创建图像

2 个答案: