added download button

demo/app.component.ts

@@ -57,7 +57,8 @@ export class AppComponent {
       showImageNumberLabel: true,
       disableScrolling: true,
       showZoom: true,
-      showRotate: true
+      showRotate: true,
+      showDownloadButton: true
     });
   }
 

package.json

@@ -18,12 +18,14 @@
     "copyfiles": "^2.1.0",
     "core-js": "^2.6.9",
     "del-cli": "^2.0.0",
+    "file-saver": "^2.0.5",
     "jasmine-core": "^3.4.0",
     "karma": "^4.1.0",
     "karma-jasmine": "^2.0.1",
     "karma-phantomjs-launcher": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^3.0.5",
+    "ngx-filesaver": "8.1.0",
     "ngx-lightbox": "^2.1.2",
     "phantomjs-prebuilt": "^2.1.16",
     "rxjs": "^6.5.2",

src/lightbox-config.service.ts

@@ -15,6 +15,7 @@ export class LightboxConfig {
   public albumLabel: string;
   public showZoom: boolean;
   public showRotate: boolean;
+  public showDownloadButton: boolean;
   public containerElementResolver: (document: any) => HTMLElement;
 
   constructor() {

src/lightbox.component.ts

@@ -1,4 +1,5 @@
 import { DOCUMENT } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
 import {
   AfterViewInit,
   Component,
@@ -12,6 +13,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import { FileSaverService } from 'ngx-filesaver';
 
 import {
   IAlbum,
@@ -51,6 +53,9 @@ import {
           <div class="lb-closeContainer">
             <a class="lb-close" (click)="close($event)"></a>
           </div>
+          <div class="lb-downloadContainer" [hidden]="!ui.showDownloadButton">
+            <a class="lb-download" (click)="download($event)"></a>
+          </div>
           <div class="lb-turnContainer" [hidden]="!ui.showRotateButton">
             <a class="lb-turnLeft" (click)="control($event)"></a>
             <a class="lb-turnRight" (click)="control($event)"></a>
@@ -94,6 +99,8 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
     private _lightboxEvent: LightboxEvent,
     public _lightboxElem: ElementRef,
     private _lightboxWindowRef: LightboxWindowRef,
+    private _http: HttpClient,
+    private _fileSaverService: FileSaverService,
     private _sanitizer: DomSanitizer,
     @Inject(DOCUMENT) private _documentRef
   ) {
@@ -125,6 +132,9 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
       // page number or not
       showPageNumber: false,
       showCaption: false,
+
+      // control whether to show the download button or not
+      showDownloadButton: false,
       classList: 'lightbox animation fadeIn'
     };
 
@@ -185,6 +195,19 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
     }
   }
 
+  public download($event: any): void {
+    $event.stopPropagation();
+    const url = this.album[this.currentImageIndex].src;
+    const parts = url.split('/');
+    const fileName = parts[parts.length - 1];
+
+    this._http.get(url, {
+      responseType: 'blob'
+    }).subscribe(res => {
+      this._fileSaverService.save(res, fileName);
+    });
+  }
+
   public control($event: any): void {
     $event.stopPropagation();
     let height: number;
@@ -454,6 +477,7 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
     setTimeout(() => {
       this.ui.showZoomButton = this.options.showZoom;
       this.ui.showRotateButton = this.options.showRotate;
+      this.ui.showDownloadButton = this.options.showDownloadButton;
     }, 0);
   }
 

src/lightbox.css

@@ -195,6 +195,11 @@ html.lb-disable-scrolling {
   margin-right: 5px;
 }
 
+.lb-data .lb-downloadContainer {
+  float: right;
+  margin-right: 5px;
+}
+
 .lb-data .lb-closeContainer {
   float: right;
 }
@@ -279,6 +284,22 @@ html.lb-disable-scrolling {
   transition: opacity 0.2s;
 }
 
+.lb-data .lb-download {
+  display: block;
+  float: right;
+  width: 30px;
+  height: 30px;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAaUlEQVR4Ae3VgQVAIQCE4UZplDa70Rrt3gQ5eDry/wRIn1QNoka2l22FsW6C5JwAAQIE6IeF5+HR287tw9x5YzdSedcKKDXOTcZ0UQFTQOnta59RVUxAFTABVcAElAZRuEX1DxYQEV3oA58RWgFolpBxAAAAAElFTkSuQmCC') right no-repeat;
+  text-align: right;
+  outline: none;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
+  opacity: 0.7;
+  -webkit-transition: opacity 0.2s;
+  -moz-transition: opacity 0.2s;
+  -o-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+
 .lb-data .lb-close:hover {
   cursor: pointer;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

src/lightbox.module.ts

@@ -4,6 +4,8 @@ import { LightboxConfig } from './lightbox-config.service';
 import { LightboxEvent, LightboxWindowRef } from './lightbox-event.service';
 import { LightboxOverlayComponent } from './lightbox-overlay.component';
 import { NgModule } from '@angular/core';
+import { FileSaverModule } from 'ngx-filesaver';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [ LightboxOverlayComponent, LightboxComponent ],
@@ -13,6 +15,7 @@ import { NgModule } from '@angular/core';
     LightboxEvent,
     LightboxWindowRef
   ],
-  entryComponents: [ LightboxOverlayComponent, LightboxComponent ]
+  entryComponents: [ LightboxOverlayComponent, LightboxComponent ],
+  imports: [ FileSaverModule, HttpClientModule ]
 })
 export class LightboxModule { }

yarn.lock

@@ -2486,6 +2486,11 @@ [email protected]:
     loader-utils "^1.2.2"
     schema-utils "^1.0.0"
 
+file-saver@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
+  integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
+
 fill-range@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
@@ -4245,6 +4250,13 @@ next-tick@^1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
+[email protected]:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/ngx-filesaver/-/ngx-filesaver-8.1.0.tgz#f82a567f70c4ee81fc67b25bf594f3959c371b19"
+  integrity sha512-xAwThsB/ap9qs7BRgW+mJPWBK60uaqkfPnw3vzbykTdfIvGf62U/6osDCq4TCPl/POWLFui6b3Bu+gfDMqoZhw==
+  dependencies:
+    tslib "^1.9.0"
+
 ngx-lightbox@^2.1.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/ngx-lightbox/-/ngx-lightbox-2.2.2.tgz#09b020655e449ca82a68c9438c937f5922f9efea"