Unable to load images

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/[e-mail]
1856ms html2canvas: Added image https://lesroyaumes.cdn.oxv.fr/images/personnages_midas/hommes/corps/[e-mail]
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

[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.

[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)