如何从带alpha值的Canvas下载保留透明通道的PNG图片

你遇到的alpha通道全为ff的问题是代码语法错误导致的，和导出格式无关：
CSS rgba() 语法要求第四个透明度参数取值为 *0_{1之间的浮点数*，但你直接传入了从十六进制字符串解析得到的0}255范围的整数值，只要数值≥1都会被浏览器判定为完全不透明，对应alpha通道值ff。

仅需修改fillStyle赋值行即可修复：

const download = (canvas, filename) => {
    const link = document.createElement('a');
    link.download = `${filename}.png`;
    link.href = canvas.toDataURL("image/png");
    console.log(link.href);
    link.click();
};

const drawAndDownload = str => {
    const canvas = document.createElement("canvas");
    canvas.width = pixels.length;
    canvas.height = 1; // intentionally small
    const ctx = canvas.getContext("2d");
    
    // pixels is an array of "rrggbbaa" strings
    pixels.forEach((rgba, i) => {
        const r = parseInt(rgba.slice(0, 2), 16);
        const g = parseInt(rgba.slice(2, 4), 16);
        const b = parseInt(rgba.slice(4, 6), 16);
        const a = parseInt(rgba.slice(6, 8), 16);

        // 把alpha值除以255转换为0~1范围
        ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
        ctx.fillRect(i, 0, 1, 1);
    });

    download(canvas, str.replace(/\W/g, "_"));
};

• Canvas原生toDataURL("image/png")默认导出的就是带8位alpha通道的PNG格式（你提到的PNG-24带alpha通道等价于PNG-32，即三个8位颜色通道加8位alpha通道共32位），不需要额外配置参数即可保留完整半透明信息。
• 校验导出文件格式的本地方法：
  • 查看文件属性的位深度字段，显示32位即为带alpha通道的PNG
  • 用系统预览功能打开文件，背景为灰白透明格子说明alpha通道正常生效
  • 导入任意设计工具（如Photoshop、Figma）可直接查看alpha通道的具体数值

内容的提问来源于stack exchange，提问作者Azure