catalog-ui/src/app/ng2/pages/composition/graph/common/image-creator.service.ts

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20 'use strict';
  21 import {Injectable} from "@angular/core";
  22
  23 export interface ICanvasImage {
  24     src: string;
  25     width: number
  26     height: number;
  27     x: number;
  28     y: number;
  29 }
  30
  31 @Injectable()
  32 export class ImageCreatorService {
  33
  34     private _canvas:HTMLCanvasElement;
  35
  36     constructor() {
  37         this._canvas = <HTMLCanvasElement>$('<canvas>')[0];
  38         this._canvas.setAttribute('style', 'display:none');
  39
  40         let body = document.getElementsByTagName('body')[0];
  41         body.appendChild(this._canvas);
  42     }
  43
  44     /**
  45      * Create an image composed of different image layers
  46      * @param canvasImages
  47      * @param canvasWidth
  48      * @param canvasHeight
  49      * returns a PROMISE
  50      */
  51     getMultiLayerBase64Image(canvasImages: ICanvasImage[], canvasWidth?:number, canvasHeight?:number):Promise<string> {
  52
  53         var promise = new Promise<string>((resolve, reject) => {
  54             if(canvasImages && canvasImages.length === 0){
  55                 return null;
  56             }
  57
  58             //If only width was set, use it for height, otherwise use first canvasImage height
  59             canvasHeight = canvasHeight || canvasImages[0].height;
  60             canvasWidth = canvasWidth || canvasImages[0].width;
  61
  62             const images = [];
  63             let imagesLoaded = 0;
  64             const onImageLoaded = () => {
  65                 imagesLoaded++;
  66                 if(imagesLoaded < canvasImages.length){
  67                     return;
  68                 }
  69                 this._canvas.setAttribute('width', (canvasWidth * 4).toString());
  70                 this._canvas.setAttribute('height', (canvasHeight * 4).toString());
  71                 const canvasCtx = this._canvas.getContext('2d');
  72                 canvasCtx.scale(4,4);
  73                 canvasCtx.clearRect(0, 0, this._canvas.width, this._canvas.height);
  74                 images.forEach((image, index) => {
  75                     const canvasImage = canvasImages[index];
  76                     canvasCtx.drawImage(image, canvasImage.x, canvasImage.y, canvasImage.width, canvasImage.height);
  77                 });
  78
  79                 let base64Image = this._canvas.toDataURL();
  80                 resolve(base64Image)
  81             };
  82             canvasImages.forEach(canvasImage => {
  83                 let image = new Image();
  84                 image.onload = onImageLoaded;
  85                 image.src = canvasImage.src;
  86                 images.push(image);
  87             });
  88         });
  89
  90         return promise;
  91     }
  92 }