如何将大型ImageData对象压缩为可解压字符串，以便在Canvas中还原使用？

离线压缩流程 #

针对600×600画布的ImageData（144万RGBA元素），按以下步骤将其压缩为字符串：

1. 提取原始数据：获取ImageData.data（Uint8ClampedArray类型），转换为标准Uint8Array便于压缩：

   const imageData = ctx.getImageData(0, 0, 600, 600);
   const rawData = new Uint8Array(imageData.data);
   

2. 压缩数据：使用gzip算法压缩原始数据（推荐用pako库，离线环境可直接引入脚本或在Node.js环境运行）：

   // 引入pako后执行压缩
   const compressedData = pako.gzip(rawData);
   

3. 转换为字符串：将压缩后的二进制数据转成base64字符串，方便存储：

   const compressedStr = btoa(String.fromCharCode(...compressedData));
   

网站内解压与渲染流程 #

在目标网站中，通过以下步骤解压字符串并渲染到canvas：

1. 解码字符串：将base64字符串转回二进制数据：

   const compressedData = new Uint8Array(atob(compressedStr).split('').map(char => char.charCodeAt(0)));
   

2. 解压数据：用pako的解压方法还原原始RGBA数据：

   const rawData = pako.ungzip(compressedData);
   

3. 重建ImageData并渲染：将解压后的Uint8Array转换为Uint8ClampedArray，创建ImageData后绘制到canvas：

   const canvas = document.getElementById('targetCanvas');
   const ctx = canvas.getContext('2d');
   canvas.width = 600;
   canvas.height = 600;
   
   const imageData = new ImageData(new Uint8ClampedArray(rawData), 600, 600);
   ctx.putImageData(imageData, 0, 0);
   

替代方案：无依赖原生压缩 #

若不想引入第三方库，可利用浏览器原生的CompressionStream（现代浏览器支持）：

离线压缩 #

async function compressImageData(imageData) {
  const rawData = new Uint8Array(imageData.data);
  const stream = new Blob([rawData]).stream().pipeThrough(new CompressionStream('gzip'));
  const compressedBlob = await new Response(stream).blob();
  const compressedArray = new Uint8Array(await compressedBlob.arrayBuffer());
  return btoa(String.fromCharCode(...compressedArray));
}

网站内解压 #

async function decompressAndRender(compressedStr, canvas) {
  const compressedArray = new Uint8Array(atob(compressedStr).split('').map(c => c.charCodeAt(0)));
  const stream = new Blob([compressedArray]).stream().pipeThrough(new DecompressionStream('gzip'));
  const rawBlob = await new Response(stream).blob();
  const rawData = new Uint8ClampedArray(await rawBlob.arrayBuffer());
  
  canvas.width = 600;
  canvas.height = 600;
  const ctx = canvas.getContext('2d');
  ctx.putImageData(new ImageData(rawData, 600, 600), 0, 0);
}

注意事项 #

• 若使用pako，需确保目标网站允许引入该库；原生CompressionStream无需额外依赖。
• 压缩率取决于图片内容：纯色或重复图案压缩率极高，照片类约为30%-50%。
• 压缩后的字符串可直接嵌入脚本作为常量，完全避开CSP对图片资源的限制。

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