如何使用数据uri嵌入大图像答案

【问题标题】：How to embed a large image with data uri如何使用数据uri嵌入大图像
【发布时间】：2016-04-04 18:50:47
【问题描述】：

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

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

【问题讨论】：

这是故意的，因为解码长数据 URL 可能会阻止浏览器。研究使用 ArrayBuffer 将图像加载为 blob。

标签： javascript html image canvas base64

【解决方案1】：

您不应该对大文件使用数据 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”即可。

【讨论】：

我试过这个，现在得到“图像损坏或截断”。