从图像读取透明像素
Read transparent pixels from image
是否有一种方法从使用javascript的图片读取透明像素?
我认为,这可能类似于PNG修复对IE(读取透明像素和应用一些东西,哈哈)。但是,是的,对于每个浏览器…
啊,如果没有HTML5也能实现,那就太棒了。
这个问题实际上是由来自GoogleTechTalks的家伙在这个关于基于javascript的游戏引擎的视频中回答的。http://www.youtube.com/watch?feature=player_detailpage&v=_RRnyChxijA#t=1610s它应该从解释的地方开始。
编辑:因此,我将总结视频中的内容并提供一个代码示例。这比我想象的要困难得多。诀窍是将图像加载到画布上,然后检查每个像素是否透明。数据被放入一个二维数组中。像alphaData [pixelRow] [pixelCol]。0表示透明,而1则不是。当alphaData数组完成后,它被放入全局变量a中。
var a;
function alphaDataPNG(url, width, height) {
var start = false;
var context = null;
var c = document.createElement("canvas");
if(c.getContext) {
context = c.getContext("2d");
if(context.getImageData) {
start = true;
}
}
if(start) {
var alphaData = [];
var loadImage = new Image();
loadImage.style.position = "absolute";
loadImage.style.left = "-10000px";
document.body.appendChild(loadImage);
loadImage.onload = function() {
c.width = width;
c.height = height;
c.style.width = width + "px";
c.style.height = height + "px";
context.drawImage(this, 0, 0, width, height);
try {
try {
var imgDat = context.getImageData(0, 0, width, height);
} catch (e) {
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
var imgDat = context.getImageData(0, 0, width, height);
}
} catch (e) {
throw new Error("unable to access image data: " + e);
}
var imgData = imgDat.data;
for(var i = 0, n = imgData.length; i < n; i += 4) {
var row = Math.floor((i / 4) / width);
var col = (i/4) - (row * width);
if(!alphaData[row]) alphaData[row] = [];
alphaData[row][col] = imgData[i+3] == 0 ? 0 : 1;
}
a=alphaData;
};
loadImage.src = url;
} else {
return false;
}
}
我在Firefox本地运行时出现错误,try catch语句解决了它。哦,我要吃饭了…
编辑2:所以我完成了我的晚餐,我想添加一些我使用过的资源,可能会有所帮助。
https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas关于imageData对象的信息。
http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html关于imageData对象及其使用的更多信息。
http://www.nihilogic.dk/labs/canvascompress/pngdata.js这是使用imageData的一个非常有用的示例,我提供的代码在很大程度上类似于下面的代码。
http://www.youtube.com/watch?v=_RRnyChxijA关于在javascript中编写游戏引擎的信息,非常非常有趣。
http://blog.project-sierra.de/archives/1577关于在firefox中使用enablePrivilege的信息。
这是一个有点棘手的问题,因为直接从Javascript访问文件的唯一方法是使用FileReader,这是一个相对较新的特性,大多数浏览器还不支持。
但是,您可以通过使用画布获得所需的结果。如果你有一个画布,你可以给它分配一些独特的颜色(比如在绿色屏幕中使用的霓虹绿)。然后,您可以将图像插入画布,并使用这里提到的方法来获取每个单独的像素。然后你可以检查每个像素的颜色,看看这个点是否与你的背景颜色相对应(因此它是透明的),或者它是否有其他颜色(不透明)。
有点粗俗,但不要认为你可以用纯JS做任何其他事情。
看来GameJS可以做到这一点,甚至更多。我引用这个问题的任何/所有我的知识,因为我不声称实际上对这个话题有任何了解。
当然,这是HTML5,并且使用canvas
元素。
- 如何通过溢出来判断元素被切断了多少像素:隐藏在父级上
- 点击facebook像素跟踪注册(JS/JQUERY代码)
- 点击(右键点击)使用传单地图库获取图像覆盖的像素坐标
- 如何使线条的边缘像素保持半透明
- 画布:逐像素绘制图像并请求动画帧计时
- 如何's css标记"-webkit最小设备像素比”;在Javascript中实现
- javascript mootools平滑滚动'x'像素数量
- 从 JavaScript 中的图像中读取像素数据会返回半透明像素的意外结果
- 使用HTML5画布和getImageData的透明像素
- 使画布中的白色像素透明
- 仅将不透明像素复制到HTML5画布
- 找到透明像素,而不使用画布
- 使用画布将不透明像素变为白色
- 如果源设置为透明像素,图像标签背景图像不显示
- 如何在js中从透明像素中获取rgb
- 点击通过透明图像像素
- 从图像读取透明像素
- 图像处理-Javascript生成dataURL格式的透明1X1像素
- 透明PNG的唯一彩色像素区域的多边形形状的减少
- 只有当所单击的像素不透明时,才会在图像上注册事件