javascript конвертировать изображение в URL данных

Question

Используя javascript Я конвертирую JPG в URL-адрес данных (получаю строку, подобную data: image / jpeg; base64, / 9j / 4AAQSkZJRgABAQAAAQAB ...), полученный URL-адрес работает как href в Firefox, но он не работает в Chrome. У вас есть какие-либо предложения? Может быть, есть предел в Chrome?

РЕДАКТИРОВАТЬ:

1. Я использую URL-адрес данных в качестве href в привязке с атрибутом download (ссылка должна вызывать открытие / загрузку всплывающее окно)

2. Если я передаю уменьшенное изображение, оно работает на Chrome

Пример можно посмотреть здесь:

https://jsfiddle.net/ex180Lyu/

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

Работает в Firefox, но не в Chrome

Answer 1

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>

Если изображение слишком велико, чтобы попробовать этот метод, вы всегда можете скопировать его на холст. Я успешно работал с изображениями размером до 20 МБ.

По сути, вы копируете изображение на холст напрямую:

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 2

Это действительно предел, вы это проверяли? :

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

очень хороший ответ таков:

Какова максимальная длина URL в разных браузерах?

Answer 3

Chrome прекращает поддержку URI данных в новом окне. Вот проблема, о которой сообщается *