Как скачать изображение 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); }