Downloading image from a canvas: downloaded image is blank

问题

I'm using Open Seadragon to display deep zoom images on a page. I want to include a link to download the image. I have it mostly working, except the image that gets downloaded is blank.

Here is my fiddle

Here is the code I'm using

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();

回答1:

You need to wait until all the tiles have loaded. For regular use, this won't be a problem, as the user presumably won't hit the button until they can see something.

来源：https://stackoverflow.com/questions/25816197/downloading-image-from-a-canvas-downloaded-image-is-blank