CODEWITHSUNDEEP
angulartypescriptangular7
jwww
jwww

Reputation: 189

Merging 2 images one over the other with Angular 7?

I'm trying to place one image on top of the other and export it into a PNG file with Angular. I've tried using the merge-images NPM library, but to no avail.

Can someone help me out there? Thank you so much!

So I've looked around the community and tried the following way, placing the piece of code below the @Component section in my app.component.ts

@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';
}

Before mergeImages() could run, I'm running into the follow error for @ViewChild: src/app/app.component.ts(13,21): error TS1146: Declaration expected. src/app/app.component.ts(15,15): error TS1005: ';' expected.

In my html file, this is what i have:

<canvas #canvas></canvas>
  <div id="imagesave">
    <qrcode #parent [qrdata]="qrdata" [size]="256" [level]="'M'"></qrcode>
  </div>

Upvotes: 1

Views: 1780

Answers (1)

Caius
Caius

Reputation: 2264

Angular and canvas approach

Some time ago I've had kinda the same need. Although the project was never completed, and kind of left to die, I've started something that you could use as a starting point at least

Here you go: https://github.com/caiusCitiriga/ngx-paint

It's not the best UI/UX project, it was still a POC. But it has all the base features. Like multi layer images, layer select, zoom of selected layer, and drag around the canvas of the selected layer. Still, everything could be better polished, but again, it should be a good starting point.

let me know if it was useful ❤️

Upvotes: 1

Related Questions