Javascript 角度合并少数图像

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

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

var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
图像img1=新图像（）；
图像img2=新图像（）；
img1.onload=函数（）{
canvas.width=img1.width；
canvas.height=img1.height；
img2.src='imgfile2.png'；
};
img2.onload=函数（）{
context.globalAlpha=1.0；
drawImage（img1,0,0）；
context.globalAlpha=0.5；//如果PNG具有alpha，则删除
drawImage（img2，0，0）；
};
img1.src='imgfile1.png'；

只需在一个角度分量中使用它生成一个函数，然后使用一个局部变量来获取画布

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

谢谢你的回答，但它似乎不起作用。（webstorm）在编解码器中给出错误的IDE找不到img1。然后我添加了这个变量img1:HTMLImageElement；并将img1添加为“Image this.img1=new Image（）；”，但IIDE在“Image”附近给出了错误“预期换行符或分号”。我试图删除“图像”，但它没有正常工作。我正在使用angular Cli。是的，对不起，我只是复制粘贴了你的代码。我编辑了我的答案，这应该有用。再次感谢你的帮助。现在在“@ViewChild（'canvas'）canvas上只有一个错误：ElementRef；”它在canvas下给出了错误。错误消息是未使用的标签。我试着删除它，但没有成功。你是否像我用标签一样给画布加了一个局部变量？