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

相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing6 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python
袁煦丞7 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作