CODEWITHSUNDEEP
imageurlcanvasdownloadseadragon
Erica Stockwell-Alpert
Erica Stockwell-Alpert

Reputation: 4863

Downloading image from a canvas; can't get data

UPDATE: I have the image downloading, but it's always downloading blank:

function seadragon(){
var url = "http://26.img.americanancestors.org/8e09e1f1-e1e9-4414-a0f5-86a6f09454a2.xml";

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

viewer.addHandler('open', function() {
                var img = viewer.drawer.canvas.toDataURL("image/png");
                console.log(img);
                var downloadlink = document.getElementById("download");
                downloadlink.href = img;
                downloadlink.download = 'SeadragonImage';

            });
}

seadragon();

--------end of update

I have a page that displays deep zoom images with Open Seadragon.

Here is a fiddle to reproduce the issue.

I have a download link and a print link, though right now they both do the same thing. I'm trying to get the imgurl; once I have that I think I know how to download it, but $(canvas).toDataURL() isn't working.

function seadragon(){
    var url = "http://26.img.americanancestors.org/8e09e1f1-e1e9-4414-a0f5-86a6f09454a2.xml";

    var viewer = OpenSeadragon({
        id: "databaseviewer",
        tileSources: url,
        maxZoomLevel: 20
    });
}

$("a").on("click", function() {
        var canvas = $("canvas");
        console.log(canvas);
        imgurl = $(canvas).toDataURL();
        console.log(imgurl);
        });

seadragon();

The console.log is verifying that I do have a canvas object on my page. Why can't I get the image url from it?

I also tried retrieving the image within the seadragon function: 

function seadragon(){
    var url = "http://26.img.americanancestors.org/8e09e1f1-e1e9-4414-a0f5-86a6f09454a2.xml";

    var viewer = OpenSeadragon({
        id: "databaseviewer",
        tileSources: url,
        maxZoomLevel: 20
    });

    var img = viewer.drawer.canvas.toDataURL("image/png");
    console.log(img);
}

but the console says "Uncaught TypeError: Cannot read property 'canvas' of null

Upvotes: 0

Views: 2860

Answers (1)

iangilman
iangilman

Reputation: 2174

You probably do want to get the canvas directly from the viewer so you make sure you have the right one, but you have to wait for the open event, as you've done in Downloading image from a canvas: downloaded image is blank

BTW, there's more discussion of this here:

https://github.com/openseadragon/openseadragon/issues/477

Upvotes: 0

Related Questions