使用 Angular 7 将 2 个图像一个接一个地合并？答案

【问题标题】：Merging 2 images one over the other with Angular 7?使用 Angular 7 将 2 个图像一个接一个地合并？
【发布时间】：2019-10-03 09:21:49
【问题描述】：

我正在尝试将一个图像放在另一个图像之上，然后使用 Angular 将其导出为 PNG 文件。我尝试使用 merge-images NPM 库，但无济于事。

有人可以帮我吗？非常感谢！

所以我环顾了社区并尝试了以下方法，将这段代码放在我的 app.component.ts 中的 @Component 部分下方

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

在 mergeImages() 可以运行之前，我遇到了 @ViewChild 的以下错误： src/app/app.component.ts(13,21)：错误 TS1146：需要声明。 src/app/app.component.ts(15,15): 错误 TS1005: ';'预计。

在我的 html 文件中，这就是我所拥有的：

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

【问题讨论】：

向我们展示您的尝试。
Angular 是一个 Web 框架，而不是一个图像库。例如，您可以使用 Canvas 执行此操作。或者将两个图像定位为元素，然后获取这些位置并将其提供给后端并使用图像库或类似的东西解决它。
为什么不使用普通的canvas？前段时间我设法用 angular 和 canvas 做类似的事情

标签： angular typescript angular7

【解决方案1】：

角度和画布方法

前段时间我也有同样的需求。尽管该项目从未完成，并且有点死，但我已经开始了一些你至少可以用作起点的东西

给你： https://github.com/caiusCitiriga/ngx-paint

这不是最好的 UI/UX 项目，它仍然是一个 POC。但它具有所有基本功能。像多层图像一样，图层选择，所选图层的缩放，以及在所选图层的画布周围拖动。尽管如此，一切都可以更好地完善，但同样，这应该是一个很好的起点。

如果有用请告诉我❤️

【讨论】：