Dom-to-image: images not being fetched

[distroyq]

Expected behavior

pull images from server

Actual behavior

image cannot be found

[] Chrome 67

[distroyq]

i see the pictures in the app
but when i create the png of the div with domtoimage.toPng, the image doesn't have the small pictures

thanks!

[Raven-T]

I had a similar problem with loading an img HTML tag. The problem was that the Image itself takes longer to generate then the actual DOM element. I fixed the problem after many tries with a Timeout before executing the domtoimage.toPng function.

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import domtoimage from 'dom-to-image-chrome-fix'; //Use your normal dom to image import

export class EndpageComponent implements OnInit, AfterViewInit {
ngAfterViewInit() {
setTimeout(() => {
var node = document.getElementById('capture');

domtoimage.toPng(node)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});

}, 100);

}

[distroyq]

hi @Raven-T thanks for the comment!
I tried this and it doesn't seem to work. i'm running the domtoimage.toPng function after the page is completely loaded
I tried with a higher timeout as well.

[BMPMS]

Hi @distroyq - any chance you solved this issue?

[BMPMS]

My problem seems to be that my images are SVG image elements like this one:

[cocoacube]

var node = document.getElementById(id);

const scale = 2;
this.shot_loading = true;
domtoimage.toBlob(document.getElementById(id)).then(function (blob) {
saveAs(blob, 'yourimg.png');
});

I had similar issue. add this.shot_loading = true

In my case, i have to a button to execute saveAs twice to get a image loaded.