html div无法,无法在div中获得动态创建的HTML

我有一个组件文件，在其中调用另一个组件文件。喜欢

this.dialog.open(ProqrComponent, {

width: '560px',

height: 'auto',

panelClass : 'docqr'

});

ProqrComponent是一个不同的组件文件。在ProqrComponent中，这是如何处理这个：

ngAfterViewInit() {

var scope = this;

this.cc=document.getElementById("mcanvas");

var ctx = this.cc.getContext("2d");

this.img = document.getElementById("scream");

this.gctx = ctx;

ctx.clearRect(0, 0, 520,140);

ctx.drawImage(this.img,0,20,520, 140);

this.qrcode = $("#qrcode div img").attr("src");

console.log(this.qrcode);

}

好吧，我正在使用帆布。因此，这个drawImage方法将生成HTML以下并动态附加到对话框HTML。

注意：我无法更改此qrcode HTML。

但是这个console.log(this.qrcode);总是安慰undefined。任何帮助如何在角度对话框中获取图像src。 Thanx提前。

答案

您可以将src属性绑定到变量，如：

在你的组件中：

imageSource:string = "image/..."

然后，您可以将此变量分配给qr代码：

this.qrcode = this.imageSource;

另一答案

如果您需要画布中的图像内容在对话框中绘制，您应该将画布中的图像二进制数据作为base64并使用它来绘制。

这是提取base64数据的片段：

let canvas = document.getElementById('canvas');

let ctx = canvas.getContext('2d');

let image = document.getElementById('source');

ctx.fillRect(10,10,10,10);

ctx.fillRect(30,10,10,10);

const data = canvas.toDataURL();