将 PNG Base-64 字符串转换为 TIFF Base-64 字符串

Question

我正在使用一个返回 PNG 编码的 base64 字符串的插件，我无法更改它，我必须使用它，但我真正需要的是 tiff 编码值（base-64）。有没有办法做到这一点？

我尝试创建一个画布，加载 png base64，然后使用 toDataURL('image/tiff')，但经过一些研究，我发现不支持 tiff 作为 toDataURL() 的输出。

有什么建议吗？

Answer 1

由于浏览器中通常不支持 TIFF 作为目标文件格式，因此您必须通过使用类型化数组构建文件结构并按照 file specifications 手动编码 TIFF 文件（请参阅 Photoshop notes这里）。我是doable：

• 从画布中获取原始 RGBA 位图（记住 CORS 很重要）
• 在 DataView 视图中使用类型化数组，以便能够在未对齐的位置写入各种数据
• 构建文件头，定义最小的 TAGS 集并以您需要的方式对 RGBA 数据进行编码（未压缩很容易实现，或者简单的 RLE 压缩）。
• 构造最终文件缓冲区。从这里你有一个 ArrayBuffer，你可以选择作为字节传输：
• 使用 ArrayBuffer 和 tiff mime-type 转换为 Blob。
• 以ArrayBuffer为基础转换为Data-URI

更新 canvas-to-tiff 可用于将画布保存为 TIFF 图像（免责声明：我是作者）。

要使用 canvas-to-tiff 获取 Data-URI，您只需执行以下操作：

CanvasToTIFF.toDataURL(canvasElement, function(url) {
   // url now contains the data-uri.
   window.location = url;    // download, does not work in IE; just to demo
});

不过，我建议使用 toBlob()，或者如果你想给用户一个链接，toObjectURL()（而不是 toDataURL）。

使用 Data-URI 的演示

var c = document.querySelector("canvas"),
    ctx = c.getContext("2d");

// draw some graphics
ctx.strokeStyle = "rgb(0, 135, 222)";
ctx.lineWidth = 30;
ctx.arc(200, 200, 170, 0, 2*Math.PI);
ctx.stroke();

// Covert to TIFF using Data-URI (slower, larger size)
CanvasToTIFF.toDataURL(c, function(url) {
  var a = document.querySelector("a");
  a.href = url;
  a.innerHTML = "Right-click this link, select Save As to save the TIFF";
})

<script src="https://cdn.rawgit.com/epistemex/canvas-to-tiff/master/canvastotiff.min.js">
</script>
<a href=""></a><br>
<canvas width=400 height=400></canvas>

使用 Object-URL 的演示

var c = document.querySelector("canvas"),
    ctx = c.getContext("2d");

// draw some graphics
ctx.strokeStyle = "rgb(0, 135, 222)";
ctx.lineWidth = 30;
ctx.arc(200, 200, 170, 0, 2*Math.PI);
ctx.stroke();

// Covert to TIFF using Object-URL (faster, smaller size)
CanvasToTIFF.toObjectURL(c, function(url) {
  var a = document.querySelector("a");
  a.href = url;
  a.innerHTML = "Right-click this link, select Save As to save the TIFF";
})

<script src="https://cdn.rawgit.com/epistemex/canvas-to-tiff/master/canvastotiff.min.js">
</script>
<a href=""></a><br>
<canvas width=400 height=400></canvas>