Question

我正在尝试使用HTML5画布检测图像是否具有透明度。这是我的代码，它基于我在互联网上找到的用于使用画布检测透明像素的逻辑（例如，this question）：

//note: this happens during the onload of the element
var found = false;
if((element.src).indexOf('.png') || element.src.indexOf('.tif')) {
    var c = document.createElement('canvas');
    var ctx = c.getContext('2d');
    ctx.drawImage(element,0,0);
    var imageData = ctx.getImageData(0, 0, element.width, element.height),
        data = imageData.data;
    var i = data.length/4 - 1;
    do {
        if(data[(i*4) + 3] < 255) {
            found = true;
        }
    } while (i-- && !found);
}
return found;

问题是，即使我输入的PNG没有任何透明度，它也会返回true。我用计数器调查：

console.log('total: '+i);
do {
    if(data[(i*4) + 3] === 0) {
        //found = true;
        found++;
    }
} while (i-- /*&& !found*/);
console.log('found: '+found);

//result for http://www.fnordware.com/superpng/pnggrad8rgb.png:
//total: 89999
//found: 45000

我的问题是，如何可靠地检测PNG和TIF文件中的透明度？

Answer 1

有几种可能性：

检查控制台，确保您没有因为从网页代码以外的其他域加载的图片上.getImageData尝试{> 1}而导致跨域安全违规。

确保将画布的大小调整为与图像相同的大小，否则某些像素将是透明的，而图像不会覆盖画布。

c.width=element.width;
c.height=element.height;

**示例代码和演示：**

var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
var canvas2=document.getElementById("canvas2");
var ctx2=canvas2.getContext("2d");

$p1=$('#results1');
$p2=$('#results2');

var img1=new Image();
img1.crossOrigin='anonymous'
img1.onload=start1;
img1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg";
function start1(){

  canvas1.width=img1.width;
  canvas1.height=img1.height;

  ctx1.drawImage(img1,0,0);

  var imgData=ctx1.getImageData(0,0,canvas1.width,canvas1.height);
  var data=imgData.data;
  var found1='Left canvas does not have transparency';
  for(var i=0;i<data.length;i+=4){
    if(data[i+3]<255){found1='Left canvas does have transparency'; }
  }

  $p1.text(found1);

}


var img2=new Image();
img2.crossOrigin='anonymous'
img2.onload=start2;
img2.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";
function start2(){

  canvas2.width=img2.width;
  canvas2.height=img2.height;

  ctx2.drawImage(img2,0,0);

  var imgData=ctx2.getImageData(0,0,canvas2.width,canvas2.height);
  var data=imgData.data;
  var found2='Right canvas does not have transparency';
  for(var i=0;i<data.length;i+=4){
    if(data[i+3]<255){found2='Right canvas does have transparency'; }
  }

  $p2.text(found2);

}

body{ background-color: ivory; }
canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p id=results1>Results:</p>
<p id=results2>Results:</p>
<canvas id="canvas1" width=300 height=300></canvas>
<canvas id="canvas2" width=300 height=300></canvas>

使用HTML5画布检测图像透明度具有误报

1 个答案: