html5：將畫布複製到圖像並返回

我在畫布元素上實現了放大和縮小功能。它通過縮放畫布，翻譯它，然後重新繪製整個場景來工作。問題是，重繪所有內容需要花費很多時間，因爲我的畫布上有很多東西。html5：將畫布複製到圖像並返回

我需要一種方法來在畫布複製到圖像對象且圖象複製回畫布沒有鬆動的質量。將canvas複製到一個javascript變量以及將該變量複製回畫布的具體方法是什麼？

如果你寫下代碼，我會很高興，因爲我無法通過互聯網找到任何好的解釋。

感謝，

來源

2011-08-30 Amit Hagin

你要恢復的圖像縮放，或者它的大小或原來是？ – Loktar

不，只有在位圖上保留「質量」的方法是重繪。沒有什麼神奇的方式將額外的像素添加到放大的位圖中，而不實際繪製這些像素。如果要在保持清晰度的同時放大和縮小，請使用SVG（矢量）而不是Canvas（位圖）。 – robertc

好吧，我已經完成了下面答案中所有方法的性能測試。來自另一個畫布的drawImage（）似乎是最快的： http://jsperf.com/canvas-image-store-restore – JustGoscha

的的drawImage（）方法可以使用另一種帆布，而不是一個圖像繪製到畫布上。

您可以創建一個「備份」的畫布，大小相同的原始的，得出的第一個到那裏，然後得出一個回原來當你需要它。

例如

// Assume we have a main canvas 
// canvas = <main canvas> 
ctx = canvas.getContext('2d'); 
.. 

// create backing canvas 
var backCanvas = document.createElement('canvas'); 
backCanvas.width = canvas.width; 
backCanvas.height = canvas.height; 
var backCtx = backCanvas.getContext('2d'); 

// save main canvas contents 
backCtx.drawImage(canvas, 0,0); 

.. 

// restore main canvas 
ctx.drawImage(backCanvas, 0,0);

來源

2011-08-30 12:50:53 andrewmu

drawImage（）與Canvas一起調用的參數優於drawImage（），它與Image對象一起調用作爲論據？ –

我想用canvas調用'drawImage（）'會比將畫布轉換爲數據URL更快，然後將其加載到Image中，然後用該圖像調用'drawImage（）'！ – andrewmu

如果您需要將很多狀態存儲在數組中，該怎麼辦？應該創建一堆畫布的數組嗎？例如'var numBuffers = 20; var tmpCan = document.createElement（'canvas'）; var buffers = [tmpCan]; for（var i = 1，len = numBuffers，i dylnmc

有幾個方法可以做到這一點那裏有在getImageData和putImageData方法Reference，但是putImageData和getImageData是相當緩慢的。另一種方法是將數據保存到內存中的image，並從更快的地方回憶它，然後第三種方法是andrewmu上面提到的方法，它涉及複製到另一個畫布元素。我已經包含了第一種和第二種類型的示例。

Image in memory method

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"), 
    savedData = new Image(); 

function save(){ 
    // get the data 
    savedData.src = canvas.toDataURL("image/png"); 
} 

function restore(){ 
    // restore the old canvas 
    ctx.drawImage(savedData,0,0) 
}

getImageData putImageData method

// Setup our vars, make a new image to store the canvas data 
var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"), 
    canvasData = ''; 

function save(){ 
    // get the data 
    canvasData = ctx.getImageData(0, 0, 100, 100); 
} 

function restore(){ 
    // restore the old canvas 
    ctx.putImageData(canvasData, 0, 0); 
}

來源

2011-08-30 13:00:52 Loktar

有人問過這個嗎？：D – JustGoscha

@JustGoscha嗯不知道我想象如果任何人有它會是西蒙·薩里斯。 – Loktar

添加圖像到畫布

var image = new Image(); 
image.src = "1.jpg"; 
image.onload = function() { 
context.drawImage(image, 0, 0); 
};

來源

2016-07-17 21:17:54 zloctb

（1）op已經有了畫布填充;因此，他/她在加載後不需要知道如何將圖像加載到畫布中（2）op是詢問如何將畫布「轉換」爲圖像，保持對該圖像的引用，然後再恢復圖像到畫布 - 正如其他人指出的 - 可以使用toDataUrl（）==> img.src或使用臨時畫布。然而，你的回答並不真正接近回答這個問題。也許你可以修改或刪除，以免混淆人。 – dylnmc

html5：將畫布複製到圖像並返回

回答

相關問題