从画布下载图像：下载的图像为空 [英] Downloading image from a canvas: downloaded image is blank

问题描述

我使用Open Seadragon在页面上显示深度缩放图像。我想包括一个链接来下载图像。我主要工作，除了下载的图像是空白的。

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.

这是我的小提琴

这是我使用的代码

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

推荐答案

你需要等到所有的瓦片都加载完毕。对于常规使用，这不会是一个问题，因为用户可能不会按下按钮，直到他们可以看到某些东西。

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.

这篇关于从画布下载图像：下载的图像为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！