如何创建可读写修改TIFF的网页（保留元数据，解决代码报错）

需求说明 #

需要实现纯浏览器端的TIFF处理工具，支持：

• 上传TIFF文件（重点支持二值像素图像）
• 修改图像像素（如二值翻转）
• 导出修改后的TIFF文件并保留原元数据
  现有Python+NumPy方案，但需无Python环境下运行，使用UTIF.js时出现"unknown tag type"错误。

问题分析 #

原代码的核心问题：

1. UTIF.js解码时遇到不支持的TIFF标签会抛出"unknown tag type"错误
2. 使用UTIF.toRGBA8转换后再调用UTIF.encodeImage会生成全新IFD对象，丢失原元数据
3. 二值图像转换为RGBA是冗余操作，且可能破坏原图像格式

修正后的代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Modify TIFF (Binary Image)</title>
</head>
<body>
    <script src="UTIF.js"></script>
    <input type="file" id="fileSelector" accept="image/tiff">
    <script>
        document.getElementById('fileSelector').onchange = event => {
            const tiffFile = event.target.files[0];
            const reader = new FileReader();
            reader.onload = () => {
                try {
                    const tiffData = reader.result;
                    // 解码时忽略未知标签，避免"unknown tag type"异常
                    const ifds = UTIF.decode(tiffData, true);
                    
                    for (let page = 0; page < ifds.length; ++page) {
                        const ifd = ifds[page];
                        UTIF.decodeImage(tiffData, ifd);
                        
                        // 专门处理二值图像（BitsPerSample=1）
                        if (ifd.bitsPerSample === 1) {
                            const w = ifd.width;
                            const h = ifd.height;
                            const bytesPerRow = Math.ceil(w / 8);
                            
                            // 翻转二值像素：按字节取反（0变1，1变0）
                            for (let y = 0; y < h; y++) {
                                const rowStart = y * bytesPerRow;
                                for (let xByte = 0; xByte < bytesPerRow; xByte++) {
                                    const byteIdx = rowStart + xByte;
                                    ifd.data[byteIdx] = ~ifd.data[byteIdx] & 0xFF;
                                }
                            }
                        } else {
                            // 兼容非二值图像的像素翻转处理
                            const imgData = UTIF.toRGBA8(ifd);
                            for (let i = 0; i < imgData.length; i += 4) {
                                imgData[i] = 255 - imgData[i];
                                imgData[i+1] = 255 - imgData[i+1];
                                imgData[i+2] = 255 - imgData[i+2];
                            }
                            // 将修改后的数据写回原IFD，保留元数据
                            UTIF.replaceImageData(ifd, imgData, ifd.width, ifd.height);
                        }
                    }
                    
                    // 编码所有IFD，保留原元数据
                    const newTiffBuffer = UTIF.encode(ifds);
                    const newFile = new File([newTiffBuffer], 'modified.tif', { type: 'image/tiff' });
                    
                    // 触发下载并清理资源
                    const link = document.createElement('a');
                    link.style.display = 'none';
                    link.href = URL.createObjectURL(newFile);
                    link.download = 'modified.tif';
                    document.body.appendChild(link);
                    link.click();
                    URL.revokeObjectURL(link.href);
                    link.remove();
                } catch (err) {
                    alert(`处理失败: ${err.message}`);
                    console.error(err);
                }
            };
            reader.readAsArrayBuffer(tiffFile);
        };
    </script>
</body>
</html>

关键修改点 #

• 忽略未知标签：调用UTIF.decode时传入第二个参数true，跳过不支持的TIFF标签，避免解码报错
• 二值图原生处理：直接操作IFD的原始字节数据，无需转换为RGBA，保留二值格式和元数据，翻转效率更高
• 保留元数据：修改后的数据直接写回原IFD对象，而非生成新的IFD，确保原标签信息不丢失
• 资源清理：添加URL.revokeObjectURL释放临时URL内存，避免浏览器内存泄漏

内容的提问来源于stack exchange，提问作者Erik på kontoret