没有画布的HTML5 getImageData [英] HTML5 getImageData without canvas

问题描述

有没有办法在没有画布的情况下使用图像的getImageData？我想在图像的鼠标位置获得像素颜色。

Is there a way to use getImageData of an image without the canvas? I am wanting to get to pixel color at the mouse position of an image.

推荐答案

不，你不能。

但是使用内存画布可以完成imageData，这很快捷，简单：

But getting the imageData can be done with an in-memory canvas, that's fast and easy :

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.getElementById('someImageId');
context.drawImage(img, 0, 0 );
var theData = context.getImageData(0, 0, img.width, img.height);

您可以保留 theData 变量，以便你不必在每次点击时都建立它。

You may keep the theData variable so that you don't have to build it at each click.

请注意，如果图像来自其他域，则无法使用（如果使用打开html文件，则无效） file：// 而不是 http：// ）。

Note that this won't work if the image comes from another domain (and thus it won't work if you open your html file using file:// instead of http://).

这篇关于没有画布的HTML5 getImageData的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！