检查图像透明度

Question

我有一个网站,人们可以上传PNG图像并保存.但在他们保存之前,我需要检查图像是否包含透明度.如果图像不是24位,有没有办法检查(我更喜欢JavaScript)？

<img id="imageId" src=#" onload="checkRestriction(this,'1')" alt=""/>

var isPng24Bit = false;

function checkRestriction(image, id) {
    if(image.colorDepth != 24) {
      PNGis24Bit = false;
    } else {
      PNGis24Bit = true; 
    }
}

Answer 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://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";
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'; 
        break;
        }
  }

  $p1.text(found1);

}


var img2=new Image();
img2.crossOrigin='anonymous'
img2.onload=start2;
img2.src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.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'; 
                      break;
                     }
  }

  $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>

Answer 2

我发布这个作为替代方法直接检查PNG文件的标题.这样可以节省内存,而不必迭代像素,无论图像大小如何,相同的良好性能都是相同的.

您可以通过文件加载做到这一点HTTPRequest或FileReader为ArrayBuffer,则只需使用检查文件头结构DataView.

PNG文件始终以IHDR块开头,因此我们只需要检查它是否实际上是PNG文件,然后假设信息的偏移量告诉深度和类型.

深度字段可以是值1,2,4,8和16(1,2,4被索引,8 = 24位或每个通道8位等).

类型字段可以是0(灰度),2(真彩色或RGB),3(索引),4(灰度+ alpha)和6(RGB + alpha).

有关PNG文件格式和IHDR标头的详细信息,请参阅此链接.

loadXHR("//i.imgur.com/zpWwpEM.png", function(result) {
  console.log(result); // result.buffer = original arraybuffer
});

function check(buffer, callback) {
  var view = new DataView(buffer);
  
  // is a PNG?
  if (view.getUint32(0) === 0x89504E47 && view.getUint32(4) === 0x0D0A1A0A) {
    // We know format field exists in the IHDR chunk. The chunk exists at 
    // offset 8 +8 bytes (size, name) +8 (depth) & +9 (type)
    var depth = view.getUint8(8 + 8 + 8);
    var type  = view.getUint8(8 + 8 + 9);
    
    callback({
      depth: depth,
      type: ["G", "", "RGB", "Indexed", "GA", "", "RGBA"][type],
      buffer: view.buffer,
      hasAlpha: type === 4 || type === 6  // grayscale + alpha or RGB + alpha
    })
  }
}

function loadXHR(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "arraybuffer";
  xhr.onload = function() {
    if (xhr.status === 200) check(xhr.response, callback);
    else consle.log("Loading error: " + xhr.statusText);
  };
  xhr.send();
}

相同的示例,但插入正在检查DOM的图像:

loadXHR("//i.imgur.com/zpWwpEM.png", function(result) {
  console.log(result); // result.buffer = original arraybuffer
  
  var img = new Image();
  img.onload = function() {URL.revokeObjectURL(this.src)};
  img.src = URL.createObjectURL(new Blob([result.buffer]));
  document.body.appendChild(img);
});

function check(buffer, callback) {
  var view = new DataView(buffer);
  
  // is a PNG?
  if (view.getUint32(0) === 0x89504E47 && view.getUint32(4) === 0x0D0A1A0A) {
    // We know format field exists in the IHDR chunk. The chunk exists at 
    // offset 8 +8 bytes (size, name) +8 (depth) & +9 (type)
    var depth = view.getUint8(8 + 8 + 8);
    var type  = view.getUint8(8 + 8 + 9);
    
    callback({
      depth: depth,
      type: ["G", "", "RGB", "Indexed", "GA", "", "RGBA"][type],
      buffer: view.buffer,
      hasAlpha: type === 4 || type === 6  // grayscale + alpha or RGB + alpha
    })
  }
}

function loadXHR(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "arraybuffer";
  xhr.onload = function() {
    if (xhr.status === 200) check(xhr.response, callback);
    else consle.log("Loading error: " + xhr.statusText);
  };
  xhr.send();
}