保存具有背景圖像的畫布

Question

我有一個畫布的背景圖像，並在畫布上添加了一些基本元素。現在我想用畫布樣式的背景圖像保存畫布（以.png爲單位）。

嘗試：

var canvas = document.getElementById("mycanvas"); 
var img = canvas.toDataURL("image/png"); 

但這似乎並沒有保存畫布的背景圖像。有出路嗎？

Answer 1

要保存圖像的位置，我相信你在尋找：

window.location = canvas.canvas.toDataURL('image/png'); 

的第一畫布呼叫您的變量第二個是畫布對象。 你應該重新命名你的變量爲獨特的東西。

設置在畫布上的圖像，並作出這樣的背景需要一些更多的工作：

var myCanvas = document.querySelector('myCanvas'),  
    img = document.createElement('img'),  
    ctx = myCanvas.getContext ? myCanvas.getContext('2d') : null; 

    myCanvas.width = window.innerWidth; 
    myCanvas.height = window.innerHeight; 
    img.onload = function() { 
     ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height); 
    }; 
img.src = 'image.png'; 

更新重繪圖像。

Answer 2

當你想在畫布+後臺保存爲圖像，你需要做的一系列事件：

1. 創建一個內存中的畫布一樣大作爲你的正常的畫布。說它CAN2
2. ctx2.drawImage(can1, 0, 0) //漆第一畫布在新畫布
3. ctx.clearRect(0, 0, width, height) //明確第一畫布
4. ctx.drawImage(background, 0, 0) //借鑑第一畫布圖像
5. ctx.drawImage(can2, 0, 0) //繪製（保存）第一畫布回本身