qq15725 / modern-screenshot

📸 Quickly generate image from DOM node using HTML5 canvas and SVG
https://www.toolpkg.com/image/html-to-image
MIT License
457 stars 32 forks source link

CORS problem with images from AWS S3 #72

Closed yardenfarag closed 6 months ago

yardenfarag commented 6 months ago

hello,

I am having an issue with taking screenshot of divs with images stored in AWS S3. the s3 bucket is managed by me and of course allowed public access to the files stored. the problem is the screenshot doesn't include the two images in the div, for example, if a div has 2 images only one will appear in the screenshot and the other one will be blocked by CORS. (at least from what I'm seeing in the network requests and the debugger) i will attach the relevant code: (I'm using react with typescript)

` const downloadTemplateHandler = async (templateId: string) => { const capture = document.getElementById(templateId)

    if (!capture) {
        props.setErrorMessage('Something went wrong. Please try again later')
        return
    }

    await domToPng(capture, {
        scale: 1,
        debug: true,
        fetch: {
            requestInit: {
                mode: 'cors',
            },
            bypassingCache: true,
        },
    }).then((dataUrl) => {
        const link = document.createElement('a')
        const date = new Date()
        link.download = `ad_placement_${date.toLocaleString()}.png`
        link.href = dataUrl
        link.click()
        link.remove()
    })
}

`

Please help me if you can (: Thanks in advance!