从画布合成创建图像

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