如何使用html2canvas与canvas-to-TIFF输出24位深度TIFF图像？

核心原因 #

html2canvas生成的Canvas默认是32位RGBA格式（包含Alpha通道），canvas-to-TIFF会默认保留该通道信息，因此输出32位TIFF。要生成24位TIFF，需移除Alpha通道并调整转换参数。

具体解决方案 #

1. 将原Canvas转换为无Alpha的RGB格式Canvas #

创建新画布，填充纯色背景后绘制原Canvas内容，覆盖透明区域，得到纯RGB的24位画布：

// 假设originalCanvas是html2canvas生成的画布
const originalCanvas = await html2canvas(document.body);

// 创建与原画布尺寸一致的新画布
const rgbCanvas = document.createElement('canvas');
rgbCanvas.width = originalCanvas.width;
rgbCanvas.height = originalCanvas.height;
const ctx = rgbCanvas.getContext('2d');

// 填充白色背景（可按需替换为其他颜色）
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, rgbCanvas.width, rgbCanvas.height);
// 绘制原画布内容，覆盖透明区域
ctx.drawImage(originalCanvas, 0, 0);

2. 调整canvas-to-TIFF的转换参数 #

调用canvasToTiff时，明确指定TIFF的位深度参数，仅保留RGB三个通道：

import { canvasToTiff } from 'canvas-to-tiff';

// 使用处理后的rgbCanvas生成24位TIFF
const tiffBuffer = canvasToTiff(rgbCanvas, {
  bitsPerSample: [8, 8, 8], // RGB三通道各8位
  samplesPerPixel: 3,       // 仅包含R、G、B三个通道
  // 可按需添加压缩方式等其他参数
});

// 下载生成的24位TIFF文件
const blob = new Blob([tiffBuffer], { type: 'image/tiff' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'output-24bit.tiff';
a.click();
URL.revokeObjectURL(url);

验证方法 #

转换完成后，可通过Photoshop、GIMP等图像工具查看TIFF属性，确认位深度为24位RGB格式。

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