vue-html2canvas
vue-html2canvas copied to clipboard
mycurelabs
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/[email protected]
1856ms html2canvas: Added image https://lesroyaumes.cdn.oxv.fr/images/personnages_midas/hommes/corps/[email protected]
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
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. :)
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.
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() ?
I found the solutions just have to pass useCORS: true to the options to make it work :)
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)
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.
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.
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 :)
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?
