Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CORS problems #54

Open
Gamewise opened this issue Oct 23, 2023 · 5 comments
Open

CORS problems #54

Gamewise opened this issue Oct 23, 2023 · 5 comments

Comments

@Gamewise
Copy link

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
Copy link

hdlgo commented Dec 18, 2023

how did u resolve it

@Gamewise
Copy link
Author

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

@xsploit
Copy link

xsploit commented Jan 20, 2024

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
Copy link

jacobvanschenck commented Mar 1, 2024

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

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

@zhoushan1
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants