Using href tag to directly download an image

Question

I have two options for the user to open an image:

1) Directly download the image which is returned from my aspx request - NOT WORKING.

2) Just open the original (higher quality) image in a new tab - WORKING FINE.

This snippet below points to an INTERNAL SERVER, so it doesn't work on this environment.

 <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> 

The first href also contains the download attribute, but since the URL is not directly referencing the jpg image it is opening the returned image to a new tab.

The rendered html is show below:

 <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> 

Is there a way around this where I can directly download the image in my first request ?

Answer 1

The permanent solution is to add the Content-Disposition response header from the server - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition . Once we add this to the server side, then we can make a request for the attachment.

In the meantime, I am just writing the image data to a hidden canvas then using toDataURL Canvas API:

In Angular component:

 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>