【问题标题】:is it possible to Combine image files in a blob是否可以将图像文件组合成一个blob
【发布时间】:2019-03-07 14:01:24
【问题描述】:

假设我有两张图片。 ('left.jpg'、'right.jpg')。 我想加载这两个文件,并使用 blob 将它们显示在单个 img 标记中。 是否可以通过使用“blob”在单个 img 标签中将它们彼此相邻显示?

【问题讨论】:

  • 为了完整起见,标题的答案是“是”,但正文的答案是“否”。
  • 还有立体 PNG 文件(使用块 sTER),它允许您使用单个 img 标签加载左+右。浏览器支持尚不清楚,因此需要进行测试。

标签: javascript image image-processing blob filereader


【解决方案1】:

不,blob 与格式无关。他们不了解他们所代表的数据的底层文件格式(jpg、png 等),他们只知道他们有一大块二进制数据,所以他们不知道如何正确组合文件需要发生什么。

但是,您可以遵循的潜在流程是:

  1. 通过Image()加载图片
  2. drawImage() 将它们粘贴到<canvas>
  3. 使用toDataURL()<canvas> 上的图像数据中创建一个数据URI
  4. <img>src 设置为步骤3 中的数据URI

【讨论】:

  • toBlob 和另一个过程将创建两个 <img> 标签 ;-)
  • @Kaiido 这会比数据 URI 更好吗?我只是在考虑如何最好地将图像数据提供给<img> 标签;还是你在说别的?
  • @Kaiido 但所需的最终状态是显示两个图像的单数 <img>。据我所知,您无法设置<img> 的图像数据,除非通过src。我同意简单地将 2 <img> 与 CSS 合成可能是最直接的方法,甚至将它们留在 <canvas> 上。
  • 是的,留在画布上是我现在要做的 ;-) 但是,我的观点是,toBlob 应该比 toDataURL 更受欢迎,甚至是 polyfiled。 (现在我看到我在之前的评论中将哈希留给了 polyfill,这是无意的......)
猜你喜欢
  • 2022-06-27
  • 2019-08-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-12-06
  • 1970-01-01
  • 2022-06-25
相关资源
最近更新 更多