Question

我想将一些JSON编码为png文件中的RBG值，并在加载图像后读取javascript中的值。这是我用于图像加载的功能。

对于图像中的每个像素，我们获得4个字节，分别对应于R，B，G和A分量。 alpha通道始终为255。因此我忽略了该值。此外，图像中可能会有一些填充，以使其适合上述方案所需的4字节边界。我也忽略了这一点。（通过条件检查R，B，G组件中的零值来查看for循环。

在下面的代码中，img来自服务器，该服务器将json数据编码为图像。对于此问题，img的来源无关紧要。如果需要，我可以添加更多详细信息。

图像中的像素值将类似于

5B 7B 22 255 64 72 69 255 22 3A 22 255 31 31 22 255 7B 5B 00 255

对应

[{"dri":"11"}]

这是一个示例，因为我无法共享原始图像。

img.onload = function(e){
    console.log('load successful', e);
    var c = document.createElement('canvas');
    c.width = img.width;
    c.height = img.height;
    var ctx = c.getContext("2d");
    console.log(ctx.imageSmoothingEnabled);
    ctx.imageSmoothingEnabled = false;
    ctx.globalAlpha = 1.0;
    ctx.strokeStyle=(0,0,0,1);
    ctx.shadowBluer = 0;
    console.log(ctx.imageSmoothingEnabled);
    window.myCtx = ctx;

    ctx.drawImage(img, 0, 0, img.width, img.height);
    window.imageData = ctx.getImageData(0,0,img.width, img.height);
    result = [];
    for(i=0, len = imageData.data.length; i < len; i++){
        if((i+1)%4===0 || imageData.data[i] === 0){
            continue;
        }
        result.push(String.fromCharCode(imageData.data[i]));
    }
    elem.innerText = result.join("");
};

此代码必须在随机用户的浏览器上有效。因此，我无法调整浏览器的任何配置设置。此代码在Windows FF，Chrome，IE 11，Edge中可以正常工作。同样，它在Chrome，Mac中的Safari中也可以正常工作。但是在Mac上的Firefox中，像素的值会稍作修改。我不确定如何解决此问题。解决这个问题的任何想法都很棒。如果不能解决此问题，那么如果有人可以说明为什么Mac上的Firefox表现不同的原因，那也很好。

我认为问题是由于浏览器对Alpha进行预乘。反正有关闭它吗？

Firefox canvas getImageData值不同于原始图像像素值

0 个答案: