从angular下载图像

Question

在我的angular 8应用程序中，我有图像。如何在angular应用程序中下载图像？

在我的应用程序中有一个列表，列表中有图像。我正在使用codeigniter作为后端。我想知道如何从angular应用程序下载图像。

Answer 1

使用以下代码，您可以从角度下载图像

const a = document.createElement('a');
a.href = URL.createObjectURL(res);
a.download = title;
document.body.appendChild(a);
a.click();

此外，使用此演示，您可以下载图像

Answer 2

您可以使用文件保护程序来完成此任务。我比较了这两种方法及其优点。

方法1：如果你正在处理图像文件，这个方法将不起作用。它只是在浏览器选项卡中打开图像文件

TS

No changes needed

HTML

<img width="80" src="https://picsum.photos/200/300">
<a class="btn btn-primary" [href]="https://picsum.photos/200/300" target="_blank">Download</a>

方法2(建议(：这种方法对所有类型的文件都有帮助。

首先下载文件保护程序模块：npm install file-saver

TS

import { saveAs} from 'file-saver';
downloadImg(url,name){
saveAs(url, name+'.png');
}

HTML

<img width="80" src="https://picsum.photos/200/300">
<button (click)="downloadImg('https://picsum.photos/200/300','photo1')">Download</button>

Answer 3

if (window.navigator.userAgent.toLowerCase().indexOf('trident') > -1) { //For IE browser
const byteCharacters = atob(base64String);
const byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'image/png' }); // change the file type accordingly
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, "Image.png"); 
}
} else { //For other browsers
const linkSource = 'data:image/png;base64,' + base64String;
const downloadLink = document.createElement("a");
const fileName = "Image.png";
downloadLink.href = linkSource;
downloadLink.download = fileName;
downloadLink.click();
}

Answer 4

您可以简单地使用下载属性

<a href="url" download>
<img src="url" alt="">
</a>

如果您的图像来自amazonBucket或类似的东西，那么您需要在将图像保存在Bucket上的同时配置下载属性。