如何创建读取 TIFF 文件、修改像素并提供修改后的 TIFF 文件的网页？

问题描述 投票：0回答：1

如何创建一个采用 TIFF 文件、修改像素并提供修改后的 TIFF 文件的网页？任何元数据都应该被保留。以下代码失败并显示“未知标签类型”：

<!DOCTYPE html>
<html>
  <head>
    <title>Modify tiff</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 = () => {
            const tiffData = reader.result;
            const ifds = UTIF.decode(tiffData);
            for (let page = 0; page < ifds.length; ++page) {
              UTIF.decodeImage(tiffData, ifds[page]);
              const w = ifds[page].width;
              const h = ifds[page].height;
              const imgData = UTIF.toRGBA8(ifds[page]);
              for (let i = 0; i < imgData.length; ++i) imgData[i] = (imgData[i] + 1) % 2;
              UTIF.encodeImage(imgData, w, h);
            }
            const newFile = new File([UTIF.encode(ifds)], '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();
            link.remove();
          };
        reader.readAsArrayBuffer(tiffFile);
      }
    </script>
  </body>
</html>

我有一些使用 Python 和 numpy 的东西，但我希望能够在没有 Python 但有浏览器的计算机上完成它。我最感兴趣的是只有二进制像素的图像。

javascript html tiff
1个回答
0
投票

我无法告诉你如何修复它，因为我不是 js 专家；也不是 TIFF 专家。我所知道的是，您在 for 循环中使用的 

UTIF.decodeImage
函数正在向您的 
isLE
对象添加名为 
data
、
width
、
height
和 
ifds
的新字段。

循环之后，您调用了 

UTIF.encode(ifds)
，它又调用了 
UTIF._writeIFD
 函数，其中有一个循环迭代 
ifds
中的键，期望它们为 tXYZ 形式，其中 XYZ 是 TIFF 标签号，相反，遇到 
isLE
，这会在输入 
parseInt("isLE".slice(1))
时导致 NaN，与您在控制台中抛出错误时看到的 NaN 相同。

这是你的错误还是 UTIF.js 我不知道（也许你应该通知他们，如果你有资格判断），但你可以在循环之前克隆 

ifds
，然后将克隆传递给 
UTIF.encode
像这样:

const ifdsClone = structuredClone(ifds);
for (;;) {
   // That loop
}
const newFile = new File([UTIF.encode(ifdsClone)], ...);

或者也许其他一些更智能的 js 解决方案可以让该对象中没有这 4 个字段。

我实际上是在这里提供有关您在SO上提出的“其他问题”的帮助，但它已作为题外话关闭，上面的答案只是一个额外的好处。我没有足够的声誉来评论这个问题，所以我想除了回答你的另一个问题之外，还有什么更好的方式来告诉你这个问题。我觉得非常令人震惊的是，SO 社区宁愿破坏兄弟代码，只是为了遵守 SO 代码。 @SharpBritannia 是我的 GitHub 和 Telegram 账号；我和我的朋友们将尊重那里的兄弟准则。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.