Javascript 检查图像透明度

我有一个网站，人们可以上传PNG图像并保存它。 但在他们保存之前，我需要检查一下图像是否包含透明度。 有没有办法检查（我更喜欢JavaScript）图像是否不是24位的

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

var isPng24Bit=假；
功能检查限制（图像、id）{
如果（image.colorDepth！=24）{
PNGis24Bit=false；
}否则{
PNGis24Bit=true；
}
}

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

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=$（“#结果1”）；
$p2=$（“#结果2”）；
var img1=新图像（）；
img1.crossOrigin='anonymous'
img1.onload=start1；
img1.src=”https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";
函数start1（）{
画布1.宽度=img1.宽度；
画布1.高度=img1.高度；
ctx1.drawImage（img1,0,0）；
var imgData=ctx1.getImageData（0,0，canvas1.width，canvas1.height）；
var数据=imgData.data；
var found1='Left canvas没有透明度'；
对于（var i=0；i我将此作为直接通过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/zpwpem.png），函数（结果）{
console.log（result）；//result.buffer=原始arraybuffer
});
函数检查（缓冲区、回调）{
变量视图=新数据视图（缓冲区）；
//是PNG吗？
if（view.getUint32（0）==0x89504E47&&view.getUint32（4）==0x0D0A1A0A）{
//我们知道格式字段存在于IHDR区块中。区块存在于
//偏移量8+8字节（大小、名称）+8（深度）和+9（类型）
var depth=view.getUint8（8+8+8）；
变量类型=view.getUint8（8+8+9）；
回拨({
深度：深度，
类型：[“G”、“RGB”、“索引”、“GA”、“RGBA”][type]，
buffer:view.buffer，
hasAlpha:type==4 | | type==6//grayscale+alpha或RGB+alpha
})
}
}
函数loadXHR（url，回调）{
var xhr=new XMLHttpRequest（）；
xhr.open（“GET”，url，true）；
xhr.responseType=“arraybuffer”；
xhr.onload=函数（）{
if（xhr.status==200）检查（xhr.response，callback）；
else consle.log（“加载错误：+xhr.statusText”）；
};
xhr.send（）；
}
你能展示一个更完整的代码示例吗？另一个注意事项：人们可以禁用/绕过JavaScript并仍然上传任何东西，你也应该检查服务器端。我添加了额外的代码，是的，你是对的，我仍然需要服务器端检查，但它对我来说不那么重要。一旦你发现一个透明像素，你可能想打破你的循环。#Kaiido，是的。我只需要检查PNG图像是否也是24位的。@Kaido很好的观察你是对的，不间断，它会增加CPU的负载，我根据你的建议进行了编辑。如果你知道ihdr头的确切位置，如果服务器允许范围请求，你也可以请求文件的该部分，或者通过调用Blob.slice（startPos，endPos）在fileReader.readAsArrayBuffer上，以防用户提供的文件。（我不知道如何读取png规范，并且知道您知道；-）@Kaido这是一个好主意，特别是如果文件具有某种大小并且来自服务器。如果文件符合要求，您需要的大小将是26字节（即IHDR始终优先）。这实际上还包括宽度和高度（IHDR数据块中的偏移量0和4在big-endian中为32位值），因此也可以在不加载所有内容的情况下进行检查：）对于FileReader，整个文件当然会首先加载到内存中。在这种情况下，我只需将一个视图附加到arraybuffer，但速度会很快，因为浏览器在检查之前不需要解码任何图像数据。对于FileReader，我认为对静态图像的内存影响几乎可以忽略不计，但对于视频来说，这通常是一个不错的选择处理给定的（未处理的）Blob并在将其传递给fileReader之前直接切片。Blob只是指向直接文件的指针，因此它实际上不使用内存。@Kaido yup，同意-对于file对象（如您所说，技术上是Blob）这是一个很好的方法，应该更快。@Snowball SVG更难，因为在绝对位置没有特定的标题。但您可以将其解析为XML（或手动），并查找所需的SVG属性，如