如何嵌入带有数据uri的大图像

How to embed a large image with data uri

本文关键字：图像 uri 数据 何嵌入      更新时间：2023-09-26

我目前有一个很大的base64图像uri（通过外部JS脚本接收），并希望将其嵌入HTML页面。我在本地成功地做到了这一点，但现在它从另一个地方把它拉了出来，似乎不起作用，它加载了部分图像，然后说"图像损坏或被截断。这个注释中的URI由于长度而被截断。"这种情况只发生在<img>标记中，也发生在使用<canvas>时，有什么方法可以从URI加载大图像吗？或者用另一种方式显示base64字符串中的图像？

没有意义的是，如果我将base64字符串指定为javascript变量，它可以正常工作，但当我将其作为变量包含在外部脚本中时，它会出现此错误。把绳子掰开然后再放回一起能解决这个问题吗？

您不应该将数据URL用于大型文件。

您可以尝试使用以下javascript函数将base64 URL转换为blob对象，并将blob对象转换为临时blob URL：

function dataurlToBlobUrl(url){
  var parts = url.split(',',2);
  var mime = parts[0].substr(5).split(';')[0];
  var blob = b64toBlob(parts[1],mime);
  return URL.createObjectURL(blob);
}

以及b64toBlob函数：https://stackoverflow.com/a/16245768/5406901

只要确保在不再需要blob URL时使用"URL.revokeObjectURL"即可。

相关文章：