我正在使用一个返回PNG编码的base64字符串的插件,我无法更改它,我必须使用它,但是我真正需要的是tiff编码值(base-64).有办法吗？

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

有什么建议么？

解决方法:

由于浏览器通常不将TIFF作为目标文件格式来支持,因此您必须通过使用类型化数组并按照file specifications(请参见此处的Photoshop notes)建立文件结构来手动编码TIFF文件. 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>

使用对象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>