Use Firebase Image Object in merge

[ctsYvesHuber]

Hello guys,
I am currently working on a project where I need to merge 2 images that are stored in the firebase storage.
I can fetch the images but when I try to merge them I get the following error:

Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    at http://localhost:3000/static/js/bundle.js:64075:21

            { src: firebaseImage.src }, 
            { src: firebaseSignature.src, x: xPosition, y: yPosition }
        ]).then(b64 => {
            document.getElementById('generated').src = b64;
        });

I am using React in the front end and Firebase as my backend.
here the code for fetching the Image:

        getDownloadURL(ref(storage, url)).then((url) => {
            const xhr = new XMLHttpRequest();
            xhr.responseType = 'blob';
            xhr.onload = (event) => {
                const blob = xhr.response;
            };
            xhr.open('GET', url);
            xhr.send();
            // Or inserted into an <img> element
            const img = document.getElementById(id);
            setImage(img)
            img.setAttribute('src', url);
        }).catch((error) => { // Handle any errors
        });
    }

And the output of my Image variable:
<img id="preview" width="300" height="400" src="<Imagesrc>">
The src is correct I just didn't want to use the real src

Thank you for your help

[artsmorgan]

You may have fixed this issue by now, but I have it last days and what I did to fixed was downloading merge-images source code and add modify the defaultOptions object and then pass crossOrigin: "anonymous"