Skip to content

DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. #114

Open
@dcts

Description

@dcts

I wanted to test merging images inside the browser with this code:

index.html

<h1>Testing MergeImages</h1>
<script src="https://unpkg.com/merge-images"></script>
<script>
  window.addEventListener("DOMContentLoaded", () => {
    console.log("Dom + mergeImages loaded ✅");
    console.log(mergeImages);

    const images = [
      "https://firebasestorage.googleapis.com/v0/b/homeboard-5d28b.appspot.com/o/smiles.wtf.testing%2F0_bg.png?alt=media&token=53eb4b7e-73b7-419b-83c0-32b4d6810e46",
      "https://firebasestorage.googleapis.com/v0/b/homeboard-5d28b.appspot.com/o/smiles.wtf.testing%2F1_body.png?alt=media&token=7c9e7214-fa87-40d5-a4ad-686a66ee3511",
      "https://firebasestorage.googleapis.com/v0/b/homeboard-5d28b.appspot.com/o/smiles.wtf.testing%2F2_face.png?alt=media&token=8c728305-664b-4435-8b41-1c7b01530265",
    ];

    mergeImages(images).then(b64 => console.log(b64));
  })
</script>

But I get this error:

DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

My environment:

Did I use the repo wrong or is this a bug? Thanks for any help! :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions