使用HTML5畫布檢測圖像透明度有誤報

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從比網頁代碼不同的域加載圖像上。

確保將畫布大小調整爲與圖像大小相同，否則某些像素在圖像不覆蓋畫布的位置將是透明的。

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>