javascript-将PNG Base-64字符串转换成TIFF Base-64字符串

发布时间：2023-03-14 12:46:17 所属栏目：教程来源：

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

我试图创建一个画布,加载png base64,然后使用toDataURL(‘image / tiff&rsqu

我正在使用一个返回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>
<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>
<a href=""></a><br>
<canvas width=400 height=400></canvas>

（编辑：驾考网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!