Javascript 手机上的画布返回错误的颜色
我正在移动安卓设备(三星Galaxy S3)上的HTMLCanvas元素中加载3种颜色的图像。当检查二手图像数据中的二手颜色时,我得到了更多的颜色。当在普通PC上运行相同的代码时,我会得到准确的颜色和计数 示例代码:Javascript 手机上的画布返回错误的颜色,javascript,canvas,Javascript,Canvas,我正在移动安卓设备(三星Galaxy S3)上的HTMLCanvas元素中加载3种颜色的图像。当检查二手图像数据中的二手颜色时,我得到了更多的颜色。当在普通PC上运行相同的代码时,我会得到准确的颜色和计数 示例代码: function getColorsFromImageData (imageData) { var colors = {}; var data = imageData.data; for (var i = 0, len = data.length; i
function getColorsFromImageData (imageData) {
var colors = {};
var data = imageData.data;
for (var i = 0, len = data.length; i < len; i += 4) {
if (data[i+3] == 0) continue;
var rgb = data[i] + "," + data[i+1] + "," + data[i+2];
if (colors[rgb])
colors[rgb]++;
else
colors[rgb] = 1;
}
return colors;
};
function createColorElement (color, count) {
var elm = document.createElement("span");
elm.style.backgroundColor = "rgb(" + color + ")";
elm.className = "color";
elm.innerHTML = color + " (" + count + ")";
document.getElementById("colors").appendChild(elm);
}
window.onload = function() {
var canvas = document.getElementById("c");
var img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);
var data = ctx.getImageData(0, 0, img.width, img.height);
var colors = getColorsFromImageData(data);
var count = 0;
for (var color in colors) {
createColorElement(color, colors[color]);
count++;
}
document.getElementById("count").innerHTML = count;
}
img.src = "test.png";
};
函数getColorsFromImageData(imageData){
var colors={};
var数据=imageData.data;
对于(变量i=0,len=data.length;i谢谢您的帮助。您面临的问题是由于默认情况下画布在
drawImage()上进行平滑处理
通过将上下文的属性设置为false
,可以关闭此功能
此属性尚未稳定,您需要构造函数前缀:
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
ctx.drawImage(img, 0, 0);
@kaido。谢谢你的帮助。我也发现了答案,在我看来,这是一个不同的问题,因为我只使用完全不透明度的像素数据(alpha通道为255),我的问题迄今为止从未在桌面实现上出现过,而仅在移动设备上出现过。Firefox和手机上的Chrome都表现出相同的行为。在我的手机上的Chrome43中加载JSFIDLE会返回15种颜色的总数(最初只定义了3种颜色)。也许我不完全理解您的链接解释中描述的问题,但是当查看我的JSFIDLE中的颜色值时,它们都非常接近,我希望看到的颜色值也存在,并且计数最高。那不符合解释。对吗?谢谢你坚持这个话题,我真的很感激。我的错,那根本不是问题所在。它确实解决了我自己的问题,所以谢谢你:-)哦,我的上帝!我过去一直禁用imageSmoothing,但没想到在手机上会有不同的行为。现在一切又变凉了。你震撼了我的一天。谢谢!