Question

如何将图片或数据转换为画布？我在http://www.nihilogic.dk/labs/canvas2image/看到另一种方式，但我也想知道如何在第一时间创建画布。

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

谢谢！

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）

datauri / image to canvas

2 个答案: