Question

更新：我有图片下载，但它总是下载空白：

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

--------更新结束

我有一个页面显示Open Seadragon的深度缩放图像。

Here is a fiddle重现此问题。

我有一个下载链接和一个打印链接，虽然现在他们都做同样的事情。我试图得到这个imgurl;一旦我拥有它，我想我知道如何下载它，但$（canvas）.toDataURL（）是不工作的。

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

console.log正在验证我的页面上是否有画布对象。为什么我无法从中获取图片网址？

我也尝试在seadragon函数中检索图像：

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

但是控制台说＆＃34; Uncaught TypeError：无法读取属性＆＃39; canvas＆＃39;为null

Answer 1

您可能希望直接从查看器获取画布，以确保您拥有正确的画布，但是您必须等待开放事件，就像您在Downloading image from a canvas: downloaded image is blank中所做的那样

顺便说一下，这里有更多关于此的讨论：

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

从画布下载图像;无法获取数据

1 个答案: