javascript將圖像轉換為數據url

Question

使用 javascript 我將 jpg 轉換為數據 url（我得到一個字符串，如 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB...），我得到的 url 在 Firefox 中用作 href，但在 Chrome 中不起作用. 你有什么建議嗎？ 也許 Chrome 有限制？

編輯：

1. 我在具有下載屬性的錨點中使用數據 url 作為 href（鏈接應該強制打開/下載彈出窗口）

2. 如果我傳遞一個較小的圖像，它可以在 Chrome 上運行

你可以在這里看到一個例子：

https://jsfiddle.net/ex180Lyu/

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

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

Answer 1

Chrome 在新窗口中停止支持數據 URI。 這是報告的問題

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

如果你需要測試，你可以這樣做，它支持任何瀏覽器

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

Answer 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);
}

完整代碼在這里

Answer 3

這確實是一個限制，你檢查過這個嗎？ ：

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

一個很好的答案是：

URL 在不同瀏覽器中的最大長度是多少？