合並多個畫布並下載為圖像

Question

我試圖將兩個HTML畫布合並為一個畫布，然后將其下載為圖像。 我的代碼如下：

function downloadCanvas() {
    var bottleCanvas = document.getElementById('bottleCanvas');
    var designCanvas = document.getElementById('editorCanvas');

    var bottleContext = bottleCanvas.getContext('2d');
    bottleContext.drawImage(designCanvas, 69, 50);

    var dataURL = bottleCanvas.toDataURL("image/png");
    var link = document.createElement('a');
    link.download = "bottle-design.png";
    link.href = bottleCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    link.click();
}

我的問題在這里似乎是以下幾行：

bottleContext.drawImage(designCanvas, 69, 50);

應該這樣做是將一個畫布的內容繪制到另一個畫布上，但是這樣做會阻止代碼的后半部分運行和下載圖像。 當我刪除此特定行時，下載功能可以正常工作，但不幸的是，只能下載其中一張畫布。

因此，我的問題是：我在這里做錯了什么？ 或如何合並兩個HTML畫布，然后將其下載為圖像。

（另一方面，我上面的下載代碼僅在Chrome中運行良好-在其他瀏覽器中，我無法設置文件名和文件擴展名。）

Answer 1

您可能會遇到由於將跨域來源的圖像繪制到畫布上而導致的安全錯誤 。 在任何畫布上繪制跨域圖像將“污染”該畫布，並禁止context.toDataURL ，如果嘗試執行toDataURL引發安全錯誤。 如果您將受污染的畫布繪制到未受污染的畫布上，也會發生相同的“污染”。

解決方法是確保您在畫布上繪制的所有圖像都與網頁位於同一域中。

這是使用不引起跨域安全性錯誤的圖像時代碼正常運行的示例：

 var img=new Image(); img.crossOrigin='anonymous'; img.onload=start; img.src="https://dl.dropboxusercontent.com/u/139992952/multple/fish.jpg"; function start(){ var bottleCanvas = document.getElementById('bottleCanvas'); var designCanvas = document.getElementById('editorCanvas'); var ctxb=bottleCanvas.getContext('2d'); var ctxd=editorCanvas.getContext('2d'); ctxb.drawImage(img,0,0); ctxd.fillRect(50,50,50,50); downloadCanvas(); } function downloadCanvas() { var bottleCanvas = document.getElementById('bottleCanvas'); var designCanvas = document.getElementById('editorCanvas'); var bottleContext = bottleCanvas.getContext('2d'); bottleContext.drawImage(designCanvas, 69, 50); var dataURL = bottleCanvas.toDataURL("image/png"); var link = document.createElement('a'); link.download = "bottle-design.png"; link.href = bottleCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); link.click(); } 

 body{ background-color: ivory; } canvas{border:1px solid red;} 

 <canvas id="bottleCanvas" width=300 height=300></canvas> <canvas id="editorCanvas" width=300 height=300></canvas> 

滿足跨域安全限制

您可以將圖像托管在已經允許跨域訪問其圖像的服務器上。 這就是我在上面的示例中所做的。 Dropbox.com允許您指定其托管的圖像可以繪制到畫布上而不會“污染”該畫布。

您還可以將S3存儲桶配置為允許跨域訪問圖像。 該鏈接提供了有關如何將響應頭設置為服務器跨源圖像的說明： http : //docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

請注意，在我的示例中，如果您使用跨源圖像，則在最初使用javascript創建圖像對象時，還必須設置image.crossOrigin='anonymous'標志。