检查图像透明度 [英] Check image transparency

问题描述

我有一个网站，人们可以在其中上传并保存PNG图片. 但是在他们可以保存它之前，我需要检查图像是否包含透明度. 有没有一种方法可以检查(我更喜欢JavaScript)图像是否不是24位?

I have a website where people can upload an PNG image and save it. But before they can save it, i need a check if the image contains transparency. Is there an way to check (i prefer JavaScript) if an image is not 24 bits?

<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; 
    }
}

推荐答案

您可以为此目的使用此画布技术，并根据需要自定义此代码
确保将画布的大小调整为与图像相同的大小，否则在图像不覆盖画布的情况下，某些像素将是透明的.

you can use this canvas technique for this purpose and customize this code as your demand
Make sure you resize your canvas to the same size as the image or else some pixels will be transparent where the image doesn't cover the canvas.

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>

这篇关于检查图像透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！