Question

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

=\"\w+\"

其中ProqrComponent是一个不同的组件文件。在ProqrComponent中，这就是处理方式：

this.dialog.open(ProqrComponent, {
        width: '560px',
        height: 'auto',
        panelClass : 'docqr'
});

好，我正在使用画布。因此，此drawImage方法将在HTML下方生成并动态添加到对话框HTML。

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);
}

注意：我无法更改此<div id="qrcode"> <div> <img src="image/...." /> </div> </div> HTML。

但是此qrcode始终是控制台console.log(this.qrcode);。任何有关如何在角度对话框中获取图像src的帮助。谢谢。

Answer 1

您可以为src属性绑定变量，例如：

<img [src]="imageSource" />

在您的组件中：

imageSource:string = "image/..."

然后您可以将此变量分配给二维码：

this.qrcode =  this.imageSource;

Answer 2

如果需要在画布中绘制图像内容以在对话框中进行绘制，则应从画布获取图像二进制数据作为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();

请参见以下示例：https://stackblitz.com/edit/angular-image-from-canvas?file=src%2Fapp%2Fdraw%2Fdraw.component.ts

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

2 个答案: