Бортовой журнал Ктулху

Как скачать base64 изображение по клику || How to download base64 image by click

Как скачать изображение base64 по клику при помощи javaScript

Html:

<img onclick="imgDownload(event,'imageName.png')" src="/base64 encoded image">

Js code:

function imgDownload(event,name) {
event.preventDefault(); // предотвращаем переход по ссылке
// Получить ссылку на <img> элемент, который находится внутри родительского <a> элемента, с помощью методаquerySelector():
let t = event.target;
// Получить значение атрибута src <img> элемента, содержащего base64 image:
let base64ImageSrc = t.getAttribute('src');
// Разбить значение атрибута src на две части: первая часть будет содержать информацию о типе файла и кодировке base64, а вторая часть будет содержать само содержимое base64 image. Для этого можно использовать метод split():
let base64ImageParts = base64ImageSrc.split(',');
let base64ContentType = base64ImageParts[0]; // "data:image/png;base64"
let base64Content = base64ImageParts[1]; // "iVBORw0KGg...."
// format
let prefix = base64ImageSrc.substring(0, 20);
let format;
switch(true) {
case prefix.includes('data:image/png'):
format = 'png';
break;
case prefix.includes('data:image/jpeg') || prefix.includes('data:image/jpg'):
format = 'jpeg';
break;
case prefix.includes('data:image/gif'):
format = 'gif';
break;
case prefix.includes('data:image/bmp'):
format = 'bmp';
break;
case prefix.includes('data:image/tiff'):
format = 'tiff';
break;
case prefix.includes('data:image/svg+xml'):
format = 'svg';
break;
case prefix.includes('data:image/vnd.microsoft.icon'):
format = 'ico';
break;
case prefix.includes('data:image/webp'):
format = 'webp';
break;
case prefix.includes('data:image/vnd.adobe.photoshop'):
format = 'psd';
break;
case prefix.includes('data:image/vnd.adobe.illustrator'):
format = 'ai';
break;
default:
format = 'unknown';
}
// Декодировать содержимое base64 image с помощью метода atob():
let decodedContent = atob(base64Content);
// Получить бинарные данные из декодированного содержимого и создать новый Blob объект:
let byteArray = new Uint8Array(decodedContent.length);
for (let i = 0; i < decodedContent.length; i++) {
byteArray[i] = decodedContent.charCodeAt(i);
}
// создаем Blob объект и URL для него
let blob = new Blob([byteArray], { type: base64ContentType });
let url = URL.createObjectURL(blob);
// создаем ссылку на элемент <a> и задаем ему атрибуты для загрузки изображения
let downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = name + '.' + format;
// добавляем элемент <a> на страницу и кликаем на него, чтобы сохранить изображение
document.body.appendChild(downloadLink);
downloadLink.click();
// освобождаем ресурсы, связанные с Blob объектом и URL
URL.revokeObjectURL(url);
}