SecurityError: The operation is insecure

[wscott20]

I made a makeGif function that takes in an array of <img>s (code for it is below) but when I try to call it using an array I made of <img>s with base64 urls from a small canvas but it kept saying SecurityError: The operation is insecure. I tried debugging and found out the line that's causing the error is gif.render()

//I had an array of base64 url strings
let imageFrames = base64urls.map(e=>{
    let img = new Image()
    img.src = e
    return img
})
function makeGif(images) {
    let gif = new GIF({
        workers: 2,
        quality: 10,
        workerScript: 'dist/gif.worker.js' //made sure the file path was correct
    })
    images.forEach(img=>gif.addFrame(img))
    gif.on('finished',blob=>open(URL.createObjectURL(blob)))
    gif.render()
}
makeGif(imageFrames)

[wcroachie]

That's not an issue with gifJS, it's with the browser. The canvas is tainted because an image may be being drawn cross-origin. Please check to make sure the worker is in the same domain as the script and the rest of your code. What is strange is that properly formatted data URLs should not cause a tainted canvas. You may want to use blob: urls instead.

I would first check to make sure your data URLs are in the proper format and if the issue persists list your browser vendor and version, it could be a bug.