How to get html2canvas to work?

Highlighted
New Member
5 0 0

I am trying to use html2canvas on a product page to convert a div to an imgURL to set as a form value. Whenever I use html2canvas, I get the error:

Uncaught ReferenceError: onLoadStylesheet is not defined at HTMLLinkElement.onload

When I try to pinpoint the error, it just directs me to <!doctype html> highlighted with the message

Each dictionary in the list "icons" should contain a non-empty UTF8 string field "type".

This also prevents the form from posting for some reason.

 

 

html2canvas(document.querySelector("#container"), {useCORS: true, logging: false}).then(canvas => {
  document.getElementById("imgURL").value = canvas.toDataURL();
});

 

 


How do I fix this?

0 Likes
Highlighted

Seems like the file is not being properly imported.

To double check whether the file is actually imported:

1. go to the dev tools on your website
2. type in "html2canvas" in the console and hit enter, it should return a function.

diego_ezfy_0-1604244867230.png

 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I'm available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
◦ My app free for limited time: Add a navigation styled like Instagram Stories to your website!
0 Likes
Highlighted
New Member
5 0 0

busybee333_0-1604245565434.png

It returns a function, so I'm not sure what the problem could be

0 Likes
Highlighted

Does it show up as well when you use console.log(html2canvas) inside your code? Right before you call the function?

Example:

console.log("canvas: ", html2canvas);

html2canvas(document.querySelector("#container"), {useCORS: true, logging: false}).then(canvas => {
  document.getElementById("imgURL").value = canvas.toDataURL();
});
◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I'm available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
◦ My app free for limited time: Add a navigation styled like Instagram Stories to your website!
0 Likes
Highlighted
New Member
5 0 0

Yes

busybee333_0-1604247331325.png

 

0 Likes
Highlighted

Then there is something intrinsically wrong with how you're using the library. I have never used this specific library before so I don't know what exactly could be going on.

Did you double check you're passing the right parameters to html2canvas?
If #container is being dynamically loaded, have you checked that it's available before you pass it as a parameter?


◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I'm available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
◦ My app free for limited time: Add a navigation styled like Instagram Stories to your website!
0 Likes
Highlighted
New Member
5 0 0

Yes, I've checked that I am passing the right parameters and the #container element is loaded when the page is loaded, so I'm really confused why I'm getting those errors.

0 Likes
Highlighted

If HTML2Canva is open soure (i.e. is on github) try opening an issue reporting the error

Additionally try to make it reproduce-able on Codepen or something, it's going to be much easier to get it solved!

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I'm available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
◦ My app free for limited time: Add a navigation styled like Instagram Stories to your website!
0 Likes