CODEWITHSUNDEEP
canvasdownloadcross-domaincorsseadragon
Erica Stockwell-Alpert
Erica Stockwell-Alpert

Reputation: 4863

Can't download image from tainted canvas; How can I download a Seadragon image that's hosted in an Amazon s3 bucket?

I have a bunch of deep zoom images stored in Amazon s3 buckets, and I have a webpage that displays them with an Open Seadragon dzi viewer. I'm able to display the images, but I can't get them to download; I'm getting the security error that I have a tainted canvas.

I set a CORS configuration in the buckets:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

which allowed me to display the images (previously my OpenSeadragon call failed, as there was no access-control-allow-origin header), but my canvas is still getting tainted.

I tried setting the crossOrigin policy in the seadragon viewer:

var viewer = OpenSeadragon({
        crossOrigin: "Anonymous",
        id: "databaseviewer",
        prefixUrl: "../../Scripts/openseadragon/images/",
        tileSources: url,
        maxZoomLevel: 20
    });

but that didn't change anything. This is my complete script:

var url = '@Model.ImageUrl';

var viewer = OpenSeadragon({
    crossOrigin: "Anonymous",
    id: "databaseviewer",
    prefixUrl: "../../Scripts/openseadragon/images/",
    tileSources: url,
    maxZoomLevel: 20
});

viewer.addHandler('open', function() {                  
    var downloadlink = document.getElementById("download");
    $(downloadlink).on("click", function() {
        var img = viewer.drawer.canvas.toDataURL("image/png");
        downloadlink.href = img;
        downloadlink.download = '@Model.DatabaseName';
    });
});

Upvotes: 1

Views: 752

Answers (1)

Marcin Wolnik
Marcin Wolnik

Reputation: 43

According to the API documentation, you should rename the policy option to crossOriginPolicy.

Upvotes: 0

Related Questions