在加载图像时，getImageData 提供一些零答案

【问题标题】：On loading Image, getImageData delivers some zeros在加载图像时，getImageData 提供一些零
【发布时间】：2016-08-22 01:59:07
【问题描述】：

我正在加载 PNG 并尝试检查它是否完全不透明，这意味着 alpha 通道在整个图像上接近 100%。因此，我使用画布和 2D-Context 来获取像素数据并循环通过它检查 alpha 值。

令我惊讶的是，我得到了显然不应该出现的整个零区域 (RGBA = [0000])。

浏览器焦点：chrome 50.0.2661.87

这是我的代码，它嵌入在 ThreeJS 环境中：

var imageData = zipHandler.zip.file(src); // binary image data

var texture = new THREE.Texture();

var img = new Image();
img.addEventListener( 'load', function ( event ) {

    texture.imageHasTransparency = false; // extend THREEJS Texture by a flag

    if (img.src.substring(imgSrc.length-4).toLowerCase().indexOf("png") > -1 
        || img.src.substring(0, 15).toLowerCase().indexOf("image/png") > -1) {

        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        context.drawImage(img, 0, 0, img.width, img.height );
        var pixDataContainer = context.getImageData(0, 0, img.width, img.height);
        var pixData = pixDataContainer.data;

        // search for pixel.alpha < 250
        for (var pix = 0, pixDataLen = pixData.length; pix < pixDataLen; pix += 4) {
            if (pixData[pix+3] < 250) {
                texture.imageHasTransparency = true;
                break;
            }
        }
    }

    texture.image = img;
    texture.needsUpdate = true;
    this.removeEventListener('load', arguments.callee, false);

}, false );

var fileExtension = src.substr(src.lastIndexOf(".") + 1);
img.src = "data:image/"+fileExtension+";base64,"+ btoa(imageData.asBinary());

顺序正确：先定义new Image()，再定义onload函数，再定义source。

【问题讨论】：

你能提供一个带有示例图像的plnkr或jsbin吗？
很抱歉没有这样做。我已经找到了解决方案，请参见下文。我保证在画东西之前总是将画布的大小设置为图像大小......

标签： javascript google-chrome three.js html5-canvas

【解决方案1】：

解决了。图像比画布大，所以当 context.drawImage() 启动时，只有部分区域被填充。我已经根据图像大小设置了画布尺寸，所以现在它可以工作了，我们有

// ...
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = img.width; // !!!!!
canvas.height = img.height; // !!!!
context.drawImage(img, 0, 0, img.width, img.height );
var pixDataContainer = context.getImageData(0, 0, img.width, img.height);
var pixData = pixDataContainer.data;
// ...

【讨论】：