我正在尝试使用getImageData从像这样的png图像的左边缘返回第一个非白色像素的x位置;
function getLeftEdge(myImage) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.getElementById(myImage);
context.drawImage(img, 0, 0);
var pixelData;
for (x = 1; x <= img.width; x++) {
for (y = 1; y <= img.height; y++) {
pixelData = context.getImageData(x, y, 1, 1);
if (pixelData.data[0] != 255) {
alert("return x,y " + x + "," + y);
return x;
}
}
}
}
我知道我使用的图像中的第一个非白色像素是222,254,但我所做的功能是报告1,150。我尝试制作jsfiddle,它不起作用,但你可以看到我正在使用的图像。
答案 0 :(得分:1)
问题是您没有设置画布的大小。因此默认为150x300像素。你也开始迭代1,1并在宽度,高度停止,但左上角的像素实际上是0,0而右下角的像素是宽度-1,高度-1。当循环达到1,150时,此位置没有像素,因为y坐标的最大值为149。这就是getImageData
报告像素为黑色的原因。
function getLeftEdge(myImage) {
var img = document.getElementById(myImage);
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
var pixelData;
for (var x = 0; x < img.width; x++) {
for (var y = 0; y < img.height; y++) {
pixelData = context.getImageData(x, y, 1, 1);
if (pixelData.data[0] != 255) {
alert("return x,y " + x + "," + y);
return x;
}
}
}
}
然而,这并不能解决问题,因为虽然看起来好像背景是完全白色的,但有一些像素是#fefefe。您应该考虑使用更高的阈值。