Angular 合并几张图片

Question

是否有任何选项可以将几个图像以角度合并在一起。我看到一个有 HTML 5 编码的，但我无法让它工作

<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>

Answer 1

只需使用它在 Angular 组件中创建一个函数，然后使用局部变量来获取您的画布。

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

在你的 HTML 中，记得声明你的局部变量

<canvas #canvas></canvas>