catalog-ui/app/scripts/directives/graphs-v2/image-creator/image-creator.service.ts

   1 module Sdc.Utils {
   2     export class ImageCreatorService {
   3         static '$inject' = ['$q'];
   4         private _canvas: HTMLCanvasElement;
   5
   6         constructor(private $q: ng.IQService) {
   7             this._canvas = <HTMLCanvasElement>$('<canvas>')[0];
   8             this._canvas.setAttribute('style', 'display:none');
   9
  10             let body = document.getElementsByTagName('body')[0];
  11             body.appendChild(this._canvas);
  12         }
  13
  14         getImageBase64(imageBaseUri: string, imageLayerUri: string): ng.IPromise<string> {
  15             let deferred = this.$q.defer();
  16             let imageBase = new Image();
  17             let imageLayer = new Image();
  18             let imagesLoaded = 0;
  19             let onImageLoaded = () => {
  20                 imagesLoaded++;
  21
  22                 if (imagesLoaded < 2) {
  23                     return;
  24                 }
  25                 this._canvas.setAttribute('width', imageBase.width.toString());
  26                 this._canvas.setAttribute('height', imageBase.height.toString());
  27
  28                 let canvasCtx = this._canvas.getContext('2d');
  29                 canvasCtx.clearRect(0, 0, this._canvas.width, this._canvas.height);
  30
  31                 canvasCtx.drawImage(imageBase, 0, 0, imageBase.width, imageBase.height);
  32                 canvasCtx.drawImage(imageLayer, imageBase.width - imageLayer.width, 0, imageLayer.width, imageLayer.height);
  33
  34                 let base64Image = this._canvas.toDataURL();
  35                 deferred.resolve(base64Image);
  36             };
  37
  38             imageBase.onload = onImageLoaded;
  39             imageLayer.onload = onImageLoaded;
  40             imageBase.src = imageBaseUri;
  41             imageLayer.src = imageLayerUri;
  42
  43             return deferred.promise;
  44         }
  45     }
  46 }