I am getting oops, something went wrong! error when i try to create html to Png in Next.js 14 (App router)

[abhms]

import { toPng, toJpeg, toBlob, toPixelData, toSvg } from "html-to-image";
const takeSnapImage = () => {
setLoader(true);
const divToCapture = document.getElementById("mainDiv");
console.log(divToCapture, "divvvvvv");

toPng(divToCapture)
  .then(async function (dataUrl) {
         console.log(dataUrl)
  })
  .catch(function (error) {
    console.error("oops, something went wrong!", error);
  });

};
<button
onClick={takeSnapImage}
style={{ color: "black" }}
>
Share Image

when i try to get png or jpg from this version "html-to-image": "^1.11.11" ,i am getting below error

Expected Behavior

it should create a png file Url or jpg url it works pretty well with "html-to-image": "^1.9.0" this version
i am using it on server and locally on Linux Mint

Reproduce step:
install version 1.11.11 and then
import all module in component such as
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from "html-to-image";

const takeSnapImage = () => {
setLoader(true);
const divToCapture = document.getElementById("mainDiv");
console.log(divToCapture, "divvvvvv");

toPng(divToCapture)
  .then(async function (dataUrl) {
   console.log(dataUrl)
  })
  .catch(function (error) {
    console.error("oops, something went wrong!", error);
  });

};
this is the error and this version work pretty well "html-to-image": "^1.9.0" but ^1.11.11 give below error,because of it i downgrade the html to image version

OS: Linux Mint
Next.js: 14.1.4 (App router with src and typescript)
Google Chrome: 124.0.6367.118

[biiibooo]

👋 @abhms

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[abhms]

OS: Linux Mint
Next.js: 14.1.4 (App router with src and typescript)
Google Chrome: 124.0.6367.118

[bestmmmz]

mainDiv下有图片，有跨域问题，html-to-image会报错的

[iyhub]

mainDiv下有图片，有跨域问题，html-to-image会报错的

所以不能有远端图片吗？要处理远端图片怎么解？哥

[iyhub]

Hey friend, I've encountered the same issue too. My solution was to allow my images to be cross-origin,For me, I used CF R2, Bucket > Setting > Edit CORS policy.

There are GPT give me some suggestions：

1.Ensure cross-origin image support: Configure CORS header information on the server side to allow your domain to access image resources.

2.Use a proxy server: Configure an API route in the Next.js application to proxy requests for remote images.

3.Download and embed image data: Before generating the image, download the remote image and convert it to base64 format to embed into the DOM.

[bestmmmz]

mainDiv下有图片，有跨域问题，html-to-image会报错的

所以不能有远端图片吗？要处理远端图片怎么解？哥

图片下载下来，转成base64展示

[SimRunBot]

this fixed it for me using proxy and filter