Open distroyq opened 6 years ago
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!
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);
}
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.
Hi @distroyq - any chance you solved this issue?
My problem seems to be that my images are SVG image elements like this one:
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.
@distroyq did you managed to solve this? I'm rendering images but some of them are not displayed constantly. I tried with multiple pass render but it does not change the result:
domtoimage.toBlob(capture).then(render1 => {
domtoimage.toBlob(capture).then(render2 => {
domtoimage.toBlob(capture).then(render3 => {
domtoimage.toBlob(capture, {
}
}).then(renderFinal => {
var fileName = _.kebabCase(name) + '.png';
saveAs(renderFinal, fileName);
});
});
});
});
I came to this thread with the same problem.
Immediately after rendering a report in the browser, I was running 14 calls to domtoimage.toJpeg(...) (for different sections of the report) in parallel inside an await Promise.all block. Everything was fine except there was an image in one section and this image was never captured. The other 13 calls were processing text elements, and they worked.
After reading @Raven-T's comment, above, I took the call that loaded the section with the image out of the Promise.all block and ran it on its own after the Promise.all had returned and the remaining 13 results had been loaded into image objects (in another Promise.all block) for inclusion in a PDF . This all took a good second or more.
This worked. The domtoimage.toJpeg(...) call picked up the image immediately and consistently once this change was made. My assumption is that the time it takes the Promise.all blocks to return gives the image time to load in the browser.
So thanks @Raven-T. Giving the image time to load was definitely my solution.
try {
var response = await Promise.all([ // == #cpc-report-section2 taken out
domtoimage.toJpeg(jQuery('#cpc-page-heading')[0],opts),
domtoimage.toJpeg(jQuery('#cpc-report-section1')[0],opts),
domtoimage.toJpeg(jQuery('#cpc-report-section3')[0],opts),
domtoimage.toJpeg(jQuery('#cpc-report-section4')[0],opts),
domtoimage.toJpeg(jQuery('#cpc-report-section5')[0],opts),
domtoimage.toJpeg(jQuery('#cpc-report-section6')[0],opts),
domtoimage.toJpeg(jQuery('#cpc-report-section7')[0],opts),
domtoimage.toJpeg(jQuery('#cpc-report-section8')[0],opts),
domtoimage.toJpeg(jQuery('#cpc-report-section9')[0],opts),
domtoimage.toJpeg(jQuery('#cpc-report-section10')[0],opts),
domtoimage.toJpeg(jQuery('#cpc-report-section11')[0],opts),
domtoimage.toJpeg(jQuery('#cpc-report-section12')[0],opts),
domtoimage.toJpeg(jQuery('#cpc-page-footer')[0],opts),
]);
} catch(err) {
alert("domtoimage() error: "+err.name + ": "+err.message + "\n" +err.stack);
}
try { //== Load the responses into the image Objs (head, foot, and section[0]...[11], but not section[1])
await Promise.all([
loadImage(response[0],head),
loadImage(response[1],sections[0]),
loadImage(response[2],sections[2]),
loadImage(response[3],sections[3]),
loadImage(response[4],sections[4]),
loadImage(response[5],sections[5]),
loadImage(response[6],sections[6]),
loadImage(response[7],sections[7]),
loadImage(response[8],sections[8]),
loadImage(response[9],sections[9]),
loadImage(response[10],sections[10]),
loadImage(response[11],sections[11]),
loadImage(response[12],foot),
]);
} catch(err) {
alert("loadImage() error: "+err.name + ": "+err.message + "\n" +err.stack);
}
try { // ========== now process the section with the image (#cpc-report-section2)
response2 = await domtoimage.toJpeg(jQuery('#cpc-report-section2')[0],opts);
//========== and put it in the image object section[1]
await loadImage(response2,sections[1]);
} catch(err) {
alert("domtoimage()/loadImage() error: "+err.name + ": "+err.message + "\n" +err.stack);
}
Expected behavior
pull images from server
Actual behavior
[] Chrome 67