Downloading image from a canvas; can't get data

Question

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

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

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

edited May 23 '17 at 11:49

Community

1
1

answered Sep 15 '14 at 16:30

iangilman

2,144
1
13
16

Downloading image from a canvas; can't get data

1 Answers1