Convert PNG Base-64 string to TIFF Base-64 string(将 PNG Base-64 字符串转换为 TIFF Base-64 字符串)
问题描述
我正在使用一个返回 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 作为目标文件格式,因此您必须通过使用 typed 构建文件结构来手动编码 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 视图中使用类型化数组,以便能够在未对齐的位置写入各种数据
- 构建文件头,定义最小的 TAGS 集并以您需要的方式对 RGBA 数据进行编码(未压缩很容易实现,或者简单的 RLE 压缩).
- 构造最终的文件缓冲区.从这里你有一个 ArrayBuffer 可以作为字节传输,可选:
- 使用 ArrayBuffer 和 tiff mime-type 转换为 Blob.
- 以ArrayBuffer为基础转换为Data-URI
更新 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 获取 Data-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="aHR0cHM6Ly9jZG4ucmF3Z2l0LmNvbS9lcGlzdGVtZXgvY2FudmFzLXRvLXRpZmYvbWFzdGVyL2NhbnZhc3RvdGlmZi5taW4uanM=">
</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="aHR0cHM6Ly9jZG4ucmF3Z2l0LmNvbS9lcGlzdGVtZXgvY2FudmFzLXRvLXRpZmYvbWFzdGVyL2NhbnZhc3RvdGlmZi5taW4uanM=">
</script>
<a href=""></a><br>
<canvas width=400 height=400></canvas>
这篇关于将 PNG Base-64 字符串转换为 TIFF Base-64 字符串的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:将 PNG Base-64 字符串转换为 TIFF Base-64 字符串
- CSS媒体查询(最大高度)不起作用,但为什么? 2022-01-01
- addEventListener 在 IE 11 中不起作用 2022-01-01
- Css:将嵌套元素定位在父元素边界之外一点 2022-09-07
- 使用RSelum从网站(报纸档案)中抓取多个网页 2022-09-06
- 如何使用 JSON 格式的 jQuery AJAX 从 .cfm 页面输出查 2022-01-01
- 400或500级别的HTTP响应 2022-01-01
- Fetch API 如何获取响应体? 2022-01-01
- Quasar 2+Apollo:错误:找不到ID为默认的Apollo客户端。如果您在组件设置之外,请使用ProvideApolloClient() 2022-01-01
- Flexslider 箭头未正确显示 2022-01-01
- 失败的 Canvas 360 jquery 插件 2022-01-01