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.

[ArtemisGraphic]

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

[DavidThomas48]

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