使用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 Canvas API：

在Angular組件中：

 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>