Как вставить большое изображение с данными uri

Question

В настоящее время у меня есть большой urile-образ base64 (полученный через внешний скрипт JS) и вы хотите встроить его в HTML-страницу. Я сделал это успешно локально, но теперь, когда он вытаскивает его из другого места, похоже, он не работает, он загружает часть изображения, а затем говорит: «Изображение повреждено или усечено. URI в этой заметке усечен из-за длины». Это происходит как в теге <img>, так и с использованием <canvas>, есть ли способ загрузить большие изображения из uri? Или другой способ отображения изображений из строки base64?

Что не имеет смысла, это прекрасно работает, если я укажу строку base64 как переменную javascript, но когда я включаю ее как переменную во внешний скрипт, она дает эту ошибку. Разломал бы строку, а затем вернул бы ее вместе, исправив это?

Answer 1

Вы не должны использовать URL-адреса данных для огромных файлов.

Вы могли бы попытаться конвертировать base64 URL в большой двоичный объект и объект двоичных объектов во временный URL объекта Blob с помощью следующей яваскрипта функции:

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

Просто убедитесь, что используете «URL.revokeObjectURL», когда вам больше не нужен URL-адрес blob.