如何指定FileReader的readAsDataURL()返回PNG而非TIFF格式？

嘿，这个问题我刚好碰到过！FileReader本身其实没办法直接指定输出格式的，因为它的作用就是原封不动读取文件的原始内容——你拿到TIFF的base64，说明它默认读的是剪贴板里的TIFF版本文件。不过有两个可行的办法来实现你的需求：

1. 优先读取剪贴板中的PNG文件 #

既然剪贴板里同时存在image/png和image/tiff两种类型，我们可以手动遍历剪贴板项，优先选择PNG类型的文件来读取，这样直接就能得到PNG格式的base64了。

示例代码：

// 给contenteditable元素绑定粘贴事件
document.querySelector('[contenteditable]').addEventListener('paste', (e) => {
  e.preventDefault(); // 阻止默认粘贴行为，避免直接插入TIFF图片
  const clipboardItems = e.clipboardData.items;

  // 遍历剪贴板中的所有项，找到PNG类型的文件
  for (const item of clipboardItems) {
    if (item.type === 'image/png') {
      const pngFile = item.getAsFile();
      const reader = new FileReader();

      reader.onload = function(event) {
        // 这里拿到的就是以"data:image/png,"开头的base64字符串
        const pngBase64 = event.target.result;
        console.log(pngBase64);
        // 接下来可以把这个PNG内容插入到contenteditable中
      };

      reader.readAsDataURL(pngFile);
      return; // 找到PNG后就停止遍历
    }
  }

  // 如果没找到PNG，再处理TIFF的情况（可选）
  console.log("剪贴板中没有PNG类型的图片");
});

2. 通过Canvas将TIFF转换为PNG #

如果因为某些原因只能拿到TIFF格式的文件，我们可以借助Canvas来转换格式。需要注意的是，部分浏览器（比如旧版Safari）原生不支持TIFF图片的直接加载，这时候可能需要用到第三方库tiff.js来解析TIFF。

方法一：浏览器原生支持TIFF的情况 #

async function convertTiffToPng(tiffBase64) {
  // 将TIFF的base64转换为Blob
  const blob = await (await fetch(tiffBase64)).blob();
  const img = new Image();

  // 加载TIFF图片
  img.src = URL.createObjectURL(blob);
  await new Promise(resolve => img.onload = resolve);

  // 创建Canvas并绘制图片
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);

  // 导出PNG格式的base64
  const pngBase64 = canvas.toDataURL('image/png');
  URL.revokeObjectURL(img.src); // 释放URL对象，避免内存泄漏

  return pngBase64;
}

// 使用示例
convertTiffToPng(yourTiffBase64String).then(pngBase64 => {
  console.log(pngBase64); // 输出"data:image/png,"开头的字符串
});

方法二：使用tiff.js处理不兼容的情况 #

如果浏览器不支持原生加载TIFF，先引入tiff.js库，然后用以下方式转换：

async function convertTiffToPngWithLib(tiffBase64) {
  const blob = await (await fetch(tiffBase64)).blob();
  const arrayBuffer = await blob.arrayBuffer();

  // 用tiff.js解析TIFF文件
  const tiff = new Tiff({ buffer: arrayBuffer });
  const canvas = tiff.toCanvas(); // 将TIFF转换为Canvas

  // 导出PNG格式的base64
  const pngBase64 = canvas.toDataURL('image/png');
  return pngBase64;
}

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