如何在Scratch.mit中将PNG的Base64编码转换为单个像素的RGB值

整体实现流程 #

总共可拆解为4个核心步骤：

• 剥离Base64前缀
  你提供的是Data URI格式字符串，首先要删除开头的data:image/png;base64,前缀，剩余内容才是PNG文件的纯Base64编码。
• Base64转二进制
  把纯Base64字符串解码，得到PNG文件的原始二进制字节流。
• 解析PNG结构
  PNG是有固定格式的二进制文件，不是直接存储像素数据，需要按规范解析块结构：
  • 先读取前8字节的PNG签名头，确认文件合法性
  • 按固定格式逐块解析：每个块由「4字节长度+4字节块类型+对应长度的块数据+4字节CRC校验」组成
  • 核心必处理块：IHDR（头块，存储图像宽高、位深、颜色类型、压缩方法等关键参数）、IDAT（图像数据块，存储压缩后的像素数据）、IEND（结束块）
• 解压提取RGB像素
  PNG的IDAT块采用Deflate算法压缩，解压后得到带过滤的扫描线数据，逐行撤销扫描线过滤规则后，就可以根据颜色类型提取每个像素的R、G、B值，带透明通道的图像还可以同步提取A值。

快速原型实现方案（无需手动解析PNG） #

如果是用常规编程语言做原型验证，可以直接调用内置图像库跳过PNG解析步骤，以下是Python示例：

import base64
from PIL import Image
import io

# 待转换的Base64字符串
b64_str = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAAC7CAMAAACjH4DlAAAAbFBMVEX///8AAADo6Oj09PQTExNUVFT4+PgEBAQiIiKZmZlbW1v8/PzPz89NTU2NjY2Ghoazs7N3d3fDw8Pf398yMjI+Pj6jo6OAgIBJSUmwsLDu7u6SkpKbm5u+vr7GxsaIiIhtbW3V1dUODg5iYmJbCxS8AAAD0ElEQVR4nO3d61LaQABAYSFcqhFBbRsxXO37v2NnOlX2dMx2EyIEcs6/LVlJvtKZbojJzY2ZtVI2vKqyIzluB6MranB7JEc5uKrKVjmm1aPpNHHDprXy3nJgJAdGcmAkB0ZyYCQHRnJgJAdGcmB0LMdtG0fSneqvWV7X66dD89n4iprNg0Nbr18TOJ7A+Vj/A9XlHnFwTwkz5EByIDmQHEgOJAeSA8mB5EByIDnQpj8cm0+3ycqHoKKYHyoW2HK5DTbcDlN3Yo1p+/ClfPVwfFssTYd4tyX2ZIGDK8IfUr5/fzsE2UvkuMbY8j6Vo8A07GD2bdBCz+GPvMdL48h+vWDL97/d4Sj801lePf+uGccc0/CBy76nHnLsJFeE4656t/JZuOFIDjnkkEMOOeSQQw45anatHF+9Zukgx7aaI18vF1Vx5fercrvFcnJRHJFPR6wFpm1Tp/WDY546TQ4kB5IDyYHkQHIgOZAcSA7UeY7ImiXWhXFsJllSOddiF8Ax/eg/HNNgyxqF02pwhNPqLOGCaXGOYMOjPx0Nu4BPRyOOhr81IIcccsghhxwfyYHkQHIgOVBf/pPeaAn3LbXRSZdw+7fwrXfVG7a8hNvkk6ROfPrnBm8eOZp+nA1LTg4kB5IDyYHkQHIgOZAcSA4kB7pojuQlXHItr2hrfGVduaLNf95Wtdph2niFF8NBiXv2vpbhaxH8lle0F3ERduQXRzv4j8XfWJBDDjnkkEMOOeSQQ47PODC/9ze7ycLl4aoY3x0arzB/gXVkyr1x/7QJ15gl9j2yov13gVs9Sl/RrnBwBQ7880fZ9P5GWczbqCE5kBxIDiQHkgPJgeRAciA5kBxojRm7PPEizViJ159+ffkOB7dO2PfsPmhfjIJLeN+W/5/+WeXo3+uQz9So2IdHV/9xrHyY0c9mHDz9c87afQDrOTk68agrOeSQQw455JAjMk0OjOTAqBMcvBXSOWv3Aazlc9ikelqGDR8rdu70HbtmycNbPE2Sv7Lm9dNF4i2kvr6GZygqSr6gYYkN27+6vhs15ChOt4cnTQ4kB5IDyYHkQHIgOZAcSA6UzLHoO8cEz1nZzsaHXhqeF+h8EY5nvPTjXHt40uRAciA5kBxIDiQHkgPJgeRAciA5EDn24Uv87dPv59rDk0aO3Tzocf4QdK1rWBa79XPkC+xrLXJj8EH9K5ovPjmQHEgOJAeSA8mB5EByIDmQHCi2Zuk9x+oprN0rWC+iyPmOPtbwNmrXmhxIDiQHkgPJgeRAciA5kBxIDvRrMDokx+swrIdrWDP722+4TLrS0rwNTgAAAABJRU5ErkJggg=="
# 剥离前缀
pure_b64 = b64_str.split(",")[1]
# Base64解码为二进制
img_bytes = base64.b64decode(pure_b64)
# 读取为图像对象
img = Image.open(io.BytesIO(img_bytes))
# 提取所有像素值，返回结果为(R,G,B)或(R,G,B,A)元组组成的列表
pixels = list(img.getdata())

自主开发转换引擎核心要点 #

如果要完全不依赖第三方库自行实现转换引擎，需要逐个实现以下模块：

• Base64编解码模块：按照Base64编码规则完成字符串到字节流的转换
• PNG块解析模块：按PNG规范解析所有块，提取IHDR参数、IDAT压缩数据
• Deflate解压模块：实现DEFLATE算法的解压逻辑，处理IDAT块数据
• 扫描线过滤还原模块：PNG每行扫描线都采用了5种过滤算法之一，需要根据扫描线开头的过滤标志逐像素撤销过滤，得到原始像素字节
• 像素格式转换模块：根据IHDR的位深、颜色类型，把原始像素字节转换为标准8位R、G、B值

Scratch项目参考 #

Scratch平台已有同类功能的公开实现，核心逻辑是把上述步骤拆分为自定义积木实现，直接在平台搜索「Base64转图像」「PNG像素读取」关键词即可找到对应项目参考。

内容的提问来源于stack exchange，提问作者I know Stuff