代码之家 › 专栏 › 技术社区 › sc45

外部加载图像的图像数据?

canvas html5

3

sc45 · 技术社区 · 16 年前

我加载外部图像并将其绘制在画布元素上,如下所示:

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');
var image = new Image();
image.onload = function(evt) { context.drawImage(evt.target, 0, 0); }
image.src = "test.jpg";

但我想得到图像数据。所以打电话之后 上下文.drawimage 我这样做:

var imagedata = canvas.getImageData();
manipulate(imagedata); // modifies imagedata.data
context.putImageData(imagedata, 0, 0);

这是获取外部加载图像的图像数据的唯一方法吗? 在画布上绘制图像,然后获取图像数据似乎非常缓慢。我遗漏了什么吗?

谢谢!

2 回复 | 直到 16 年前

1

3

olliej 16 年前

获取image data没有直接的方法,效率很低,但另一方面,您可能不需要重复地将图像绘制到画布上——如果您多次需要原始数据,您可能只想绘制到屏幕外的画布上一次,并保留画布。

唉,canvas的另一个问题是,出于安全原因,如果您曾经从不同的来源绘制过图像(或其他资源),则无法从画布读取imagedata。

2

0

Jeffery To 16 年前

您可以尝试执行二进制ajax,然后手动解码图像数据,但使用canvas会更容易。