从画布合成创建图像

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