从angular下载图片

Question

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

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

Answer 1

您可以使用file-saver来完成此任务。我已经比较了这两种方法及其优点。

方法一:如果您正在处理图像文件，此方法将不起作用。它只是在浏览器选项卡中打开图像文件。

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 2

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

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

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

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();
}

​