CORS problems

[Gamewise]

Hi there!

I'm having trouble downloading all cross-origin images. Some urls seem to work and some don't and I'm getting CORS errors.

I can get most images to display on my website, but not all seem to work with modern-screenshot?

Here's an example I can't get to work:

HTML (in Vue 3):

 <button @click="downloadPNG('#zone-0')">download</button>
  <div id="zone-0" 
      style="background: url("https://vitapet.com/media/kczlgn0r/dog-breed-temperaments-1240x640.jpg?fbclid=IwAR2-X8mY96qxVPULvY8zMDmXG8vTyeXP_zbqvjbhjABDDEy82bQUmye-l9I")>
      </div>

JAVASCRIPT

const downloadPNG = async (el) => {
  let div = document.querySelector(el)
  dataURI.value = await domToPng(div,
    {
      scale: 2,
      debug: true,
      fetch: {
        requestInit: {
          mode: 'cors',
        },
        bypassingCache: true,
      }
    }
  ).then(dataUrl => {
    const link = document.createElement('a')
    link.download = 'screenshot.png'
    link.href = dataUrl
    link.click()
    link.remove()
  })
}

What would the minimum code be for downloading a png of a div with a cors background image like that one above?

Thanks so much.

[hdlgo]

how did u resolve it

[Gamewise]

I didn't sorry. I just didn't use it with other sites in the end.

[xsploit]

anyone have any luck im using function downloadScreenshot(element) { const fetchOptions = { requestInit: { mode: 'cors', }, bypassingCache: true, };

            // Use modern-screenshot to capture the image with fetch options
            modernScreenshot.domToPng(element, { fetch: fetchOptions }).then(dataUrl => {
              const link = document.createElement('a')
              link.download = 'screenshot.png'
              link.href = dataUrl
              link.click()
            })

            -and the image isnt showing up in the screenshot

[jacobvanschenck]

What worked for me was using "no-cache":

  return await domToPng(node, {
    fetch: {
      requestInit: {
        cache: "no-cache",
      },
    },
  });

[zhoushan1]

I also encountered this problem, how did you solve it?