javascript将图像转换为数据url答案

【问题标题】：javascript convert image to data urljavascript将图像转换为数据url
【发布时间】：2020-05-19 09:30:38
【问题描述】：

使用 javascript 我将 jpg 转换为数据 url（我得到一个字符串，如 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB...），我得到的 url 在 Firefox 中用作 href，但它不是在 Chrome 中工作。你有什么建议吗？也许 Chrome 有限制？

编辑：

我在具有属性下载的锚中使用数据 url 作为 href（链接应该强制打开/下载弹出窗口）
如果我传递较小的图像，它可以在 Chrome 上运行

你可以在这里看到一个例子：

https://jsfiddle.net/ex180Lyu/

<a href="data:image/jpeg;base64,/9j/4AAQSkZJR..." download="image.jpg">CLICK</a>

它在 Firefox 中有效，但在 Chrome 中无效

【问题讨论】：

此建议可能不符合您的要求，但设置 img 标签 src 属性应该适用于任何浏览器 img src="data:image/jpeg;base64,/9j/4AAQS...." />

标签： javascript todataurl

【解决方案1】：

Chrome 在新窗口中停止支持数据 URI。这是报告的问题

https://github.com/piskelapp/piskel/issues/729

如果你需要测试，你可以这样做，它支持任何浏览器

<img src="data:image/jpeg;base64,/4AAQSkZJRgABAQAAAQAB...." />

【讨论】：

【解决方案2】：

正如 Nithin 所说，Chrome 删除了导航到 data-uris 的可能性。

但您可以在任何网页上设置它，并使用 <img> 标记，如下所示：

 <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB..." alt="Alt text for image"/>

您也可以像这样显示下载链接：

<a href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB..." download="image.jpg">image</a>

如果图像太大而无法尝试此方法，您可以随时将其复制到画布上。我已经成功处理了高达 20MB 的图像。

基本上你直接把图片复制到画布上：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const img = new Image();

img.src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB..."
img.onload = () => {
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  ctx.drawImage(img, 0, 0);
}

完整代码here

【讨论】：

感谢您的回复，我需要一个带有属性 href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB..." 和属性 download="image.jpg 的锚点，而不是 img 标签"
是的，如果下载它是你想做的，那应该是要走的路。很高兴我帮助了
我更新了示例并添加了一个代码框工作示例。正如@khpa 所说，您可能会达到大小限制。如果是这种情况，您也可以尝试将图像复制并粘贴到上。即使使用 20MB 的图像，我也成功地做到了
谢谢！那么，如何制作像 image 这样的下载链接？
您始终可以通过编程方式重新创建具有上述 base64 内容的链接 (`) 但如果时间太长了，我想这次会太长了。如果您右键单击图像，您将能够下载它。既然你用一个例子更新了这个问题，我会考虑一下。

【解决方案3】：

确实是一个限制，你检查过这个吗？：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs#Common_problems

一个很好的答案是这样的：

What is the maximum length of a URL in different browsers?

【讨论】：

感谢重播，您对解决方法有什么建议吗（请参阅主帖中的最后编辑）？