图像不能包含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: 希望有更了解的指正!

相关推荐
晓13132 分钟前
前端篇——番外篇 Bootstrap框架
前端·javascript·css·html
黑心的奥利奥4 分钟前
前端项目利用Gitlab CI/CD流水线自动化打包、部署云服务
前端·ci/cd·gitlab
墨菲安全8 分钟前
NPM组件 @ivy-shared-components/iconslibrary 等窃取主机敏感信息
前端·npm·node.js·npm组件投毒·主机敏感信息窃取·恶意npm包
Mintopia1 小时前
🌀曲面细分求交:在无限细节中捕捉交点的浪漫
前端·javascript·计算机图形学
Mintopia1 小时前
🧙‍♂️用 Three.js 判断一个点是否在圆内 —— 一次圆心和点的对话
前端·javascript·three.js
liliangcsdn1 小时前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero1 小时前
基于vue3完成领域模型架构建设
前端
PanZonghui1 小时前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴1 小时前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss