Javascript 从画布合成创建图像

我有一个画布组成，是由10个不同的图像。 这些图像从一个xml文件中获取数据，该文件具有一个坐标列表，当图像放置到画布上时，该列表为每个图像创建一个掩码

然后，我尝试使用

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

但是，图像显示为完全空白，并且没有错误。检查显示的图像后，src为：

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

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

关于如何调试这个有什么想法吗

编辑：

---

我更感兴趣的是在浏览器中将其显示为图像，然后担心以后是否保存它。但是，如果将其“保存”到本地存储，然后再显示它，那么我对此感到失望。

您有处理图像上传的功能吗

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

画布绘制完成后，是否确实要调用toDataUrl？您确定无论您在哪里将新图像附加到DOM，它都将以适当的宽度/高度/不透明度可见吗？

我认为这不起作用。toBlob（）似乎不受支持如果这仍然是真的对不起，我认为这与此无关，我没有任何图像上载，我使用的所有图像都已在localhost上。是的toDataUrl在绘制画布后发生。正在创建的图像与画布的大小完全相同，只是完全空白/透明。无论如何，我希望它与画布的大小相同。你提到它是在画布被绘制到之后发生的。但是如果你正在创建新的

图像

对象，设置它们的

onload

方法来绘制图像，然后设置

src

，然后立即调用

canvas.toDataUrl

，你是在绘制画布之前调用该方法，而不是在绘制画布之后。哇，你的伙计，我是在用onload设置图像的。控制台中的一切看起来都是按照正确的顺序进行的，但将图像设置为onload才是问题所在。你太棒了。