數據/圖像到畫布

Question

如何將圖像或數據轉換爲畫布？我在http://www.nihilogic.dk/labs/canvas2image/看到另一種方式，但我也想了解如何在第一個位置創建畫布。

我問這個問題的原因是因爲我想創建一個小應用程序，讓用戶創建一個畫布「圖像」，將其保存爲某些內容，並能夠在未來重新打開畫布修改。我認爲datauri是保存畫布的好方法，但我不確定我如何才能重新打開數據並使用畫布來修改圖形。

謝謝！

Answer 1

使用數據URI的數據作爲源創建一個圖像元素，然後使用drawImage方法將其繪製到畫布：

var ctx = document.getElementById('ctx').getContext('2d'); 
var img = new Image(); 
img.src = uriData; 
img.onload = function() { 
    ctx.drawImage(img,0,0); 
} 

更新：澄清，CTX是2D的上下文，而不是一個帆布目的。

Answer 2

我得到這個工作：

var img = new Image(); 
var uriData = "...."; // replace with dataUri 

img.onload = function() { 
    var ctx = document.getElementById('ctx').getContext('2d'); 
    ctx.drawImage(img,0,0); 
} 

img.src = uriData; 

貌似訣竅是，Canvas元素需要它的寬度和高度指定。當我沒有指定尺寸時，它變得有點隨意，它只顯示我的大圖像的一部分（來自dataUri）