使用 href 标签直接下载镜像

Question

我有两个选项供用户打开图像：

1(直接下载从我的aspx请求返回的图像 - 不起作用。

2(只需在新选项卡中打开原始(更高质量(图像 - 工作正常。

下面的代码段指向内部服务器，因此它不适用于此环境。

<div class="modal-header">
    <a
      type="image/jpg"            
      [href]="theImage.CompUrl"
      title="Save Image"
      download="img_{{ theImage.UID }}.jpg"
    >
      <i class="fa fa-floppy-o" aria-hidden="true"></i>
    </a>
    <a
      type="button"
      class="btn btn-primary btn-sm"
      [href]="originImgUrl"
      title="Open Original Image"
      target="_blank"
    >
      <i class="fa fa-share" aria-hidden="true"></i>
    </a>
</div>

第一个 href 还包含 download 属性，但由于 URL 不直接引用 jpg 图像，因此它将返回的图像打开到新选项卡。

呈现的 html 如下所示：

<div _ngcontent-c40="" class="modal-content">
	<div _ngcontent-c40="" class="modal-header ng-star-inserted">
		<a _ngcontent-c40="" class="btn btn-primary btn-sm" 
			type="image/jpg" 
			href="https://Server01.DomainName.com/Folder1234/TheServer.aspx?s=33333444445555a&amp;m=comp&amp;id=1330849" 
			title="Export Image" download="img_1330849.jpg">
			<i _ngcontent-c40="" aria-hidden="true" class="fa fa-floppy-o"></i>
		</a>
		<a _ngcontent-c40="" class="btn btn-primary btn-sm" target="_blank" type="button" 
			href="https://Server01.DomainName.com/Folder1234/TheServer.aspx?s=cc4444444423aa&amp;m=org&amp;id=1330849" 
				title="Export Original Image">
				<i _ngcontent-c40="" aria-hidden="true" class="fa fa-share"></i></a>
				<button _ngcontent-c40="" class="close" data-dismiss="modal" type="button">×</button>
	</div>
</div>

有没有办法解决这个问题，我可以在第一个请求中直接下载图像？

Answer 1

永久的解决方案是从服务器添加Content-Disposition响应标头 - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition。一旦我们将其添加到服务器端，我们就可以对附件发出请求。

同时，我只是将图像数据写入隐藏的画布，然后使用toDataURL画布 API：

在角度组件中：

const hiddenCanvas = document.createElement("canvas");
hiddenCanvas.width = this.imageObj.width;
hiddenCanvas.height = this.imageObj.height;
this.ctxHidden = hiddenCanvas.getContext("2d");
this.ctxHidden.drawImage(this.imageObj, 0, 0);
this.saveImgSrc = hiddenCanvas.toDataURL("image/jpeg", 1);
this.printImg.nativeElement.src = this.saveImgSrc; // displayed in modal-body

<div *ngIf="printModalType == 'export'" class="modal-header">
        <a
          type="button"
          class="btn btn-primary btn-sm"
          href="{{ saveImgSrc }}"
          title="Save image"
          download="img_{{ theImage.UID }}.jpg"
        >
          <i class="fa fa-floppy-o" aria-hidden="true"></i>
        </a>
</div>