图像不能包含alpha通道或者透明度

在内部系统根据Apple Store发布要求预先处理iOS审核需要的图片,使之符合所有的需求后再推送到审核平台。目前出现的错误是:图像不能包含alpha通道或者透明度(iOS: Images can't contain alpha channels or transparencies)。

什么是alpha通道/透明度

goolge+百度了很多文章,发现alpha通道、透明度应该是一个东西。在一个介绍 alpha channel 的视频里面的解释我觉得可以验证这个逻辑

正常图片由R,G,B三个灰色通道组成。alpha通道是在这三个通道的基础上再叠加一个通道。

通过各种查询,发现alpha通道有很多好的用法:

  • 去除一个图片的背景色
  • 保存选取
  • 给图片更换主题色等

含有alpha通道图片类型

iOS官方要求图片必须是JPG或者PNG格式,且必须采用RGB色彩空间

在Photoshop中保存图片时,可选择属性"透明度"只在PNG格式时可以勾选

由此判断alpha通道问题只需要判断图片类型为png类型时就可以了。

如何判断png图片是否含有alpha通道

PNG图片的基础信息查看

用于测试的图片基本信息如下:

我们通过FileReader读取图片的数据流。然后根据文档查看PNG图片包含的基本信息。

js 复制代码
        const reader = new FileReader();
        // 文件加载完成时的回调函数
        reader.onload = function () {
            // 创建一个新的img元素
            const img = new Image();
            // 图片加载完成时的回调函数
            img.onload = function () {
                // 获取图片的宽度和高度
                const width = this.width;
                const height = this.height;
                // 从DOM中移除图像
                img.parentNode.removeChild(img);
                // 获取buffer
                const buffers = reader.result;
                const unit8Array = new Uint8Array(buffers, 0, 26);
                let data = unit8Array;
                const strs = String.fromCodePoint.apply(null, data); // 对应的字符信息
                console.log("===未解析数据==",data);
                console.log("===解析数据==",data);
                if (strs?.includes("PNG") && strs?.includes("IHDR")) {
                    const colorType = data[25]; // color type 
                    // 判断有alpha通道4,6
                    if ([4,6]?.includes(colorType)) {
                        remind.notice({
                            type: "error",
                            content: (file.name + "图像不能有alpha通道或者透明度")
                        });
                    }
                } 
            };
            // 将图像的URL设置为FileReader结果
            img.src = URL.createObjectURL(file);
        };

        // 读取文件数据
        reader.readAsArrayBuffer(file);

上面代码的打印结果如下:

PNG图片的数据结构

根据文档可知,图片的头信息是8个16制的值。其对应的10进制即上面打印的前八个字节137, 80, 78, 71, 13, 10, 26, 10 通过解析可知其代表的是PNG类型。

紧接着,后面4个字节代表其后面的CHUNK DATA的长度(=13)

再后面CHNUK TYPE 四个字节73, 72, 68, 82根据打印数据可知为IHDR

根据文档可知,类型有四种

通过查看各个类型包含的信息可知,只有IHDR类型含有alpha通道信息

其中IHDR具体信息如下:

可以知道后续的8个字节0, 0, 10, 236,0, 0, 5, 10分别为图片的宽度和高度。

js 复制代码
width: 0, 0, 10, 236
height: 0, 0, 5, 10

将其转为二进制和十进制后为:

js 复制代码
// 对应我们使用的素材图片的基础宽度和高度
width: 101011101100    -- 2796
height: 10100001010    -- 1290

和我们alpha通道有关的是第26个字节Colour Type

根据表格信息可知,当其为4/6时,是含有alpha通道的。

而我们的素材图片对应的值是6, 说明是含有alpha通道的,不符合需求。

PS: 希望有更了解的指正!

相关推荐
烛阴10 分钟前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化24 分钟前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月25 分钟前
7月10号总结 (1)
前端·css·css3
天天扭码1 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder1 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang1 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子2 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z2 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom