从画布下载图像；无法获取数据答案

【问题标题】：Downloading image from a canvas; can't get data从画布下载图像；无法获取数据
【发布时间】：2014-11-06 19:29:36
【问题描述】：

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

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 正在验证我的页面上确实有一个画布对象。为什么我不能从中获取图片 url？

我还尝试在 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);
}

但控制台显示“未捕获的 TypeError：无法读取属性 'canvas' of null

【问题讨论】：

标签： image url canvas download seadragon

【解决方案1】：

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

【讨论】：