Javascript 如何在图像上绘制Angular2 Ionic2

我知道如何画角

在我的html中：

<img ng-src="{{image}}" style="width: 100%">
<canvas id="tempCanvas"></canvas>

这段代码肯定会在人脸图像的顶部绘制HELLO WORLD文本

然而，在Ionic2/Angular2中，它似乎不起作用。我甚至无法让

文档.getElementById（'tempCanvas'）

正常工作

请帮忙

---

谢谢。

您可以写以下内容：

@Component({
  selector: 'my-app',
  template: `<h1>Angular 2 Systemjs start</h1>
    <img [src]="image">
   <canvas #layout></canvas>
  `
})    
export class App {
  @ViewChild('layout') canvasRef;
  image = 'http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png';
  ngAfterViewInit() {
    let canvas = this.canvasRef.nativeElement;
    let context = canvas.getContext('2d');

    let source = new Image(); 
    source.crossOrigin = 'Anonymous';
    source.onload = () => {
        canvas.height = source.height;
        canvas.width = source.width;
        context.drawImage(source, 0, 0);

        context.font = "100px impact";
        context.textAlign = 'center';
        context.fillStyle = 'black';
        context.fillText('HELLO WORLD', canvas.width / 2, canvas.height * 0.8);

        this.image = canvas.toDataURL();  
    };
    source.src = this.image;
  }
}

---

参见本案例中的plunkr

您可以编写以下内容：

@Component({
  selector: 'my-app',
  template: `<h1>Angular 2 Systemjs start</h1>
    <img [src]="image">
   <canvas #layout></canvas>
  `
})    
export class App {
  @ViewChild('layout') canvasRef;
  image = 'http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png';
  ngAfterViewInit() {
    let canvas = this.canvasRef.nativeElement;
    let context = canvas.getContext('2d');

    let source = new Image(); 
    source.crossOrigin = 'Anonymous';
    source.onload = () => {
        canvas.height = source.height;
        canvas.width = source.width;
        context.drawImage(source, 0, 0);

        context.font = "100px impact";
        context.textAlign = 'center';
        context.fillStyle = 'black';
        context.fillText('HELLO WORLD', canvas.width / 2, canvas.height * 0.8);

        this.image = canvas.toDataURL();  
    };
    source.src = this.image;
  }
}

---

请参见本案例中的plunkr

Hi！我指的是您提供的应用程序中的这段代码，它按预期工作，但正如我在这里所描述的，我面临一个问题（）。我用相机拍照，然后用这个canvas指令把文字放在上面，但在那之后，我怎么能在社交媒体上分享这个叠加的图像，甚至把它保存在我的图库中呢？此外，在中添加此指令会使图像部分显示在

ImageDrawTextDirective

中的my display（）上，您有一个无限循环。当您执行

img.src=canvas.toDataURL（）时加载事件被触发，
onLoad
中的所有内容再次运行。@yurzui我使用的是您描述的第一个方法，但是onLoad方法没有被调用，文本也没有在图像上绘制，它是一个ionic应用程序，ionic 3.9.2和angular 5.2.10，您能帮我找到正确的方向吗？嗨！我指的是您提供的应用程序中的这段代码，它按预期工作，但正如我在这里所描述的，我面临一个问题（）。我用相机拍照，然后用这个canvas指令把文字放在上面，但在那之后，我怎么能在社交媒体上分享这个叠加的图像，甚至把它保存在我的图库中呢？此外，在中添加此指令会使图像部分显示在
ImageDrawTextDirective
中的my display（）上，您有一个无限循环。当您执行
img.src=canvas.toDataURL（）时加载事件被触发，
onLoad
中的所有内容再次运行。@yurzui我使用的是您描述的第一种方法，但是onLoad方法没有被调用，文本也没有在图像上绘制，它是一个ionic应用程序，ionic 3.9.2和angular 5.2.10，您能帮我找到正确的方向吗？
@Directive({
 selector: '[draw-text]' 
})
class ImageDrawTextDirective {
  loaded = false;
  @Input() text: String;
  @HostListener('load', ['$event.target'])
  onLoad(img) {
    if(this.loaded) {
      return;
    }
    this.loaded = true;
    let canvas = document.createElement('canvas');
    let context = canvas.getContext('2d');

    canvas.height = img.height;
    canvas.width = img.width;

    context.drawImage(img, 0, 0);
    context.font = "100px impact";
    context.textAlign = 'center';
    context.fillStyle = 'black';
    context.fillText(this.text, canvas.width / 2, canvas.height * 0.8);

    img.src = canvas.toDataURL();
  }
}