從畫布合成創建圖像

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