Unable to load images

[mIcHyAmRaNe]

hello

i'm trying to use vue-html2canvas but for some reason it s not able to load images

note: i have this as options

const options = {
        type: 'dataURL',
        backgroundColor: 'red',
        allowTaint: true,
        width: '256px',
        height: '512px',
        imageTimeout: 0,

      }

Console output:

0ms html2canvas: html2canvas $npm_package_version
1848ms html2canvas: Document cloned, using computed rendering
1849ms html2canvas: Starting node parsing
1854ms html2canvas: Added image https://www.lesroyaumes.com/images/personnages_midas/hommes/corps/corps_p0_@1X.webp
1856ms html2canvas: Added image https://lesroyaumes.cdn.oxv.fr/images/personnages_midas/hommes/corps/visage_0_p0_@1X.webp
1860ms html2canvas: Added image 
1892ms html2canvas: Finished parsing node tree
1928ms html2canvas: Unable to load image Event {isTrusted: true, type: "error", target: img, currentTarget: img, eventPhase: 2, …}bubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: nulldefaultPrevented: falseeventPhase: 0isTrusted: truepath: [img]returnValue: truesrcElement: nulltarget: nulltimeStamp: 20608.655type: "error"__proto__: Event
2038ms html2canvas: Finished loading 3 images (3) [img, img, null]
2039ms html2canvas: Starting renderer
2041ms html2canvas: Canvas renderer initialized (541x0 at 1708.4635009765625,116.97915649414062) with scale 0.6000000238418579
2054ms html2canvas: Render completed

can you please take a look? source code

[arnoldlabastilla]

Experienced the same issue (not sure if it's an issue though). What I did to quick-fix it is execute the function inside setTimeout().

Also, in my case I got multiple divs to print. So I executed the function recursively. :)

[LTFENG]

I met same issue Here is the original view from my website:

however, after pressing the download button (screenshot) it show like this

image from network(url) does not show, but only the black color container.

Please help me.

[aimen-zenasni]

👍 I experienced the same issue.

[aimen-zenasni]

Experienced the same issue (not sure if it's an issue though). What I did to quick-fix it is execute the function inside setTimeout().

Also, in my case I got multiple divs to print. So I executed the function recursively. :)

Where do you put your setTimeout() ?

[aimen-zenasni]

I found the solutions just have to pass useCORS: true to the options to make it work :)

[arnoldlabastilla]

Where do you put your setTimeout() ?

Actually, we don't really need to put it inside a setTimeout(). It just depends on your use case.

This is what I did to make it work (esp loading images using URLs):

<div>
  <img src="https://somesecuredwebsite.com/images/1.png" crossorigin="anonymous" />
</div>

take note of the crossorigin="anonymous" above...

const base64Image = await this.$html2canvas(el, { type: 'dataURL', useCORS: true, logging: false })
console.log(base64Image)

[jofftiquez]

Hello all, shall we close this?

[iynga]

crossorigin="anonymous"

Not working.

[iynga]

Where do you put your setTimeout() ?

Actually, we don't really need to put it inside a setTimeout(). It just depends on your use case.

This is what I did to make it work (esp loading images using URLs):

<div>
  <img src="https://somesecuredwebsite.com/images/1.png" crossorigin="anonymous" />
</div>

take note of the crossorigin="anonymous" above...

const base64Image = await this.$html2canvas(el, { type: 'dataURL', useCORS: true, logging: false })
console.log(base64Image)

It is not working. I am getting the same issue.

[MichaelHaywood]

I'm also having this occur. I've added useCORS but it still occurs. The solution mentioned adding crossorigin="anonymous" but this won't solve problems if using something like html2pdf.js as you would need to edit the page that you are converting first.

[talalz94]

I'm also facing this issue, however Im not using an img element, its a VUE component that Im trying to draw. In any case, I have created a seperate issue regarding this here. If anyone has any input on this, kindly let me know. Thanks :)

[ASoldo]

I can also confirm that black background is shown when image is loaded via network. My solution is to put as much assets i can in project and then it works fine, but im scared if i need to load something dynamically it wont work... Can you fix that?