캔버스에서 이미지 다운로드하기; 데이터

Question

UPDATE를 얻을 수 없습니다 : 나 이미지 다운로드를 가지고 있지만, 항상 빈 다운로드하는 것 : 업데이트

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으로 이미지를 확대합니다.

문제를 재현하는 데 사용하십시오.

나는 다운로드 링크와 인쇄 링크가 있지만 지금은 둘 다 똑같습니다. 나는 imgurl을 얻으려고 노력하고있다. 일단 내가 그것을 어떻게 다운로드 해야할지 모르겠지만 $ (캔버스) .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); 
} 

하지만 콘솔 catch되지 않는 형식 오류 "는 말한다 : 널 (null)의 특성 '캔버스'를 읽을 수 없습니다

Answer 1

당신은 아마 캔버스를하고 싶지 않습니다 시청자가 직접 볼 수 있도록 설정 했으므로 올바른 이벤트가 올 때까지 기다려야합니다. 열린 이벤트가 나타날 때까지 기다려야합니다. Downloading image from a canvas: downloaded image is blank

자세히 알아보기 :

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