Невозможно получить динамически созданный HTML внутри div

Question

У меня есть файл компонента, в котором я вызываю другой файл компонента. Как

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.

<div id="qrcode">
  <div>
    <img src="image/...." />
  </div>
</div>

Примечание: я не могу изменить это qrcode HTML.

Но этот console.log(this.qrcode); всегда утешает undefined. Любая помощь, как получить изображение SRC в угловом диалоге. Спасибо заранее.

Answer 1

Если для рисования в диалоговом окне вам необходимо содержимое изображения из холста, вы должны получить двоичные данные изображения из холста как 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

Answer 2

Вы можете связать атрибут src с переменной типа:

<img [src]="imageSource" />

А в вашем компоненте:

imageSource:string = "image/..."

Затем вы можете присвоить эту переменную коду qr:

this.qrcode =  this.imageSource;