datauri/ image to canvas

Question

如何将图像或datauri转换为canvas？我在http://www.nihilogic.dk/labs/canvas2image/看到了另一种方式，但我也想知道如何在第一时间创建一个canvas。

我问这个问题的原因是因为我想创建一个小应用程序，让用户创建一个画布‘图像’，保存为一些东西，并能够重新打开它为画布修改在未来。我认为datauri是保存画布的好方法，但我不确定如何重新打开datauri并使用canvas修改绘图。

谢谢!

Answer 1

使用data 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;

看起来诀窍在于画布元素需要指定其宽度和高度。当我没有指定尺寸时，它就会变得有点随意，并且只显示我的大图的一部分(来自dataUri)