将PNG Base-64字符串转换为TIFF Base-64字符串 [英] Convert PNG Base-64 string to TIFF Base-64 string

问题描述

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

I'm using a plugin that returns a PNG encoded base64 string, I cannot change it, I must work with it, but what I really need is the tiff encoded value (base-64). Is there a way of doing this?

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

I tried to create a canvas, load the png base64 and then used toDataURL('image/tiff') but after some research, I'd found that tiff is not supported as output of toDataURL().

有任何建议吗？

推荐答案

由于浏览器通常不支持TIFF作为目标文件格式，您必须通过使用类型化数组并根据文件规范（请参阅 Photoshop说明这里）。这是可行的：

As TIFF is not generally supported as target file-format in the browser, you will have to manually encode the TIFF file by building up the file-structure using typed arrays and in accordance with the file specifications (see Photoshop notes here). It's doable:

• 从画布中获取原始RGBA位图（请记住CORS很重要）


• 使用带有DataView视图的类型化数组能够在未对齐位置写入各种数据


• 构建文件头，定义最小TAG集并以您需要的方式编码RGBA数据（未压缩易于实现，或简单的RLE压缩）。


• 构造最终文件缓冲区。从这里你有一个可以作为字节传输的ArrayBuffer，可选：


• 使用ArrayBuffer和tiff mime-type转换为Blob。


• 转换为数据-URI使用ArrayBuffer作为基础

• Get the raw RGBA bitmap from canvas (remember that CORS matters)
• Use typed arrays with DataView view to be able to write various data at unaligned positions
• Build up file header, define minimum set of TAGS and encode the RGBA data in the way you need (uncompressed is simple to implement, or a simple RLE compression).
• Construct the final file buffer. From here you have an ArrayBuffer you can transfer as bytes, optionally:
• Convert to Blob with ArrayBuffer and tiff mime-type.
• Convert to Data-URI using ArrayBuffer as basis

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

Update canvas-to-tiff can be used to save canvas as TIFF images (disclaimer: I'm the author).

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

To get an Data-URI using canvas-to-tiff you can simply do:

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）。

Although, I would recommend using toBlob(), or if you want to give the user a link, toObjectURL() (instead of toDataURL).

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>

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>

这篇关于将PNG Base-64字符串转换为TIFF Base-64字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！