datauri/图像到画布

发布于 2024-10-05 16:15:33 字数 314 浏览 5 评论 0原文

如何将图像或 datauri 转换为画布？我在 http://www.nihilogic.dk/labs/canvas2image/ 看到了另一种方式，但我也想首先了解如何创建画布。

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

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不知在何时 2024-10-12 16:15:33

使用 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 上下文，而不是画布对象。

Create an image element using the data URI data as the source and then use drawImage to draw it to the canvas:

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

Updated: to clarify that ctx is a 2D context, not a canvas object.

回复收藏 0 原文

七度光 2024-10-12 16:15:33

我得到了这个工作：

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）

I got this to work:

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;

Looks like the trick is that the Canvas element needs its width and height specified. When I don't specify the dimensions, it becomes sort of arbitrary and it only shows part of my big image (from dataUri)

回复收藏 0 原文

~没有更多了~