Html Question posted in
Some basic documentation can be found here.

iam working on project but i'm getting this error for html2canvas

  const handleDownloadImage = async () => {
    try {
      const canvas = await html2canvas(cardRef.current);
      console.log(cardRef.current);
      const imageData = canvas.toDataURL("image/png");
      setImageUrl(imageData);
    } catch (error) {
      console.error("Error capturing image:", error);
    }
  };

and Iam getting this error

#4 240ms Starting DOM parsing logger.ts:25:29
#4 273ms Starting renderer for element at 216,32 with size 400x450 logger.ts:25:29
#4 273ms Canvas renderer initialized (400x450) with scale 1 logger.ts:25:29
#4 278ms Error loading image https://userpic.codeforces.org/3332594/title/6e3ce0bb53e6ed79.jpg Home:13441:25
#4 295ms Finished rendering

How can handle this error
i think it’s because the image is online it’s working for my local images

Help me to fix this issue

Tags:

2

Answers


  1. 0

    few options to explore this error for better understanding

    1. Check is the url is valid and No CORS error.
    2. Check the cardRef is null or valid value
    3. Your browser is supporting html2canvas without any compatibility issues.
    Login or Signup to reply.
  2. 0

    It looks like you would need to enable CORS in the h2ml2canvas options for this to work. It would need to be configured like:

    const canvas = await html2canvas(cardRef.current, {
  useCORS: true,
});

    instead of

    const canvas = await html2canvas(cardRef.current);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search