显示 tiff 文件

Question

有没有办法在 React 中将 tiff 文件转换为 png 或 jpg 格式，或者以某种方式在 chrome 中查看 tiff 文件？我尝试在画布上绘图并获取数据网址，但没有成功。我也尝试过 tiff.js 但出现 fs、路径、加密错误。 下面的代码是我尝试进行转换操作的方法。 感谢您的帮助。

Promise.all(promises)
  .then(values => {
     let images = [];
     values.forEach(res => {
        if (res.imageBuffer) {
           const blob = new Blob([new 
           Uint8Array(res.imageBuffer.Body.data)], { type: res.imageBuffer.ContentType });
           let url = URL.createObjectURL(blob);

           if (res.imageBuffer.ContentType === 'image/tiff') {
               var myCanvas = document.createElement('canvas');
               var ctx = myCanvas.getContext('2d');
               var img = new Image();
               img.onload = function () {
                   ctx.drawImage(img, 0, 0);
               };
               img.src = url;
               url = myCanvas.toDataURL()
            }

            images.push({
                blobURL: url,
                date: res.attachment_source_date,
                ...res,
            });
        }
    });

    setImages(images);
  })
  .catch(err => {
        console.error(err);
  });

Answer 1

最有效的方法是使用https://github.com/photopea/UTIF.js。 可以说是 tiff 文件的最佳解码器，与 tiff.js 相比，它提供了更多功能。

就你而言 -

import UTIF from "utif";
Promise.all(promises)
  .then((values) => {
    let images = [];
    values.forEach((res) => {
      if (res.imageBuffer) {
        const blob = new Blob([new Uint8Array(res.imageBuffer.Body.data)], {
          type: res.imageBuffer.ContentType,
        });
        let url = URL.createObjectURL(blob);

        if (res.imageBuffer.ContentType === "image/tiff") {
          let arraybuffer = res.imageBuffer;
          let pages = UTIF.decode(arraybuffer);
          UTIF.decodeImage(arraybuffer, pages[0]);
          const rgba = UTIF.toRGBA8(pages[0]);
          const myCanvas = document.createElement("canvas");
          myCanvas.width = pages[0].width;
          myCanvas.height = pages[0].height;
          const ctx = myCanvas.getContext("2d");
          if (ctx === null) {
            throw new Error("Could not load canvas 2d context");
          }
          const imageData = ctx.createImageData(canvas.width, canvas.height);
          for (let i = 0; i < rgba.length; i++) {
            imageData.data[i] = rgba[i];
          }
          ctx.putImageData(imageData, 0, 0);
          url = myCanvas.toDataURL('image/png');
        }
        images.push({
          blobURL: url,
          date: res.attachment_source_date,
          ...res,
        });
      }
    });
    setImages(images);
  })
  .catch((err) => {
    console.error(err);
  });

查看此示例以供参考 -

https://github.com/johnthad/utif-demo/blob/master/thumbnails-lzw.html https://codesandbox.io/p/sandbox/xqk18krqo