CODEWITHSUNDEEP
javascriptangulartypescripthtml5-canvas
Stephen Reynolds
Stephen Reynolds

Reputation: 55

Angular Merge few images

Is there any option to merge few images together in angular. I saw one with an HTML 5 coding but I couldn't get it to work

<canvas id="canvas"></canvas>
<script type="text/javascript">
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  Image img1 = new Image();
  Image img2 = new Image();

  img1.onload = function () {
    canvas.width = img1.width;
    canvas.height = img1.height;
    img2.src = 'imgfile2.png';
  };
  img2.onload = function () {
    context.globalAlpha = 1.0;
    context.drawImage(img1, 0, 0);
    context.globalAlpha = 0.5; //Remove if pngs have alpha
    context.drawImage(img2, 0, 0);
  };

  img1.src = 'imgfile1.png';

</script>

Upvotes: 1

Views: 3548

Answers (1)

user4676340
user4676340

Reputation:

Simply make a function in an Angular component with that, and use a local variable to get your canvas. 

@ViewChild('canvas') canvas: ElementRef;

mergeImages() {
  var canvas: HTMLCanvasElement = this.canvas.nativeElement;
  var context = canvas.getContext('2d');

  let img1 = new Image();
  let img2 = new Image();

  img1.onload = function() {
    canvas.width = img1.width;
    canvas.height = img1.height;
    img2.src = 'imgfile2.png';
  };
  img2.onload = function() {
    context.globalAlpha = 1.0;
    context.drawImage(img1, 0, 0);
    context.globalAlpha = 0.5; //Remove if pngs have alpha
    context.drawImage(img2, 0, 0);
  };        

  img1.src = 'imgfile1.png';
}

In your HTML, remember to declare your local variable 

<canvas #canvas></canvas>

Upvotes: 1

Related Questions