获取对现有 OpenSeadragon 查看器的参考答案

【问题标题】：Get reference to existing OpenSeadragon Viewer获取对现有 OpenSeadragon 查看器的参考
【发布时间】：2021-05-05 07:12:37
【问题描述】：

我需要向现有的 OpenSeadragon 查看器对象添加一个覆盖，该对象不是由我的代码创建的，而是由应用程序的其他地方创建的。

我知道查看器已经创建，因为我可以访问通过 jQuery 创建的各种 html 元素。但是，我无法确定是否有任何方法可以从现有参考中创建查看器。

我尝试在以下位置使用查看器 div 的 id：

var viewer = OpenSeadragon(id: "open-seadragon-viewer-id");

但这似乎不起作用。

有什么方法可以做到这一点，还是只能在初始化它的代码中获取查看器？

【问题讨论】：

我不知道有什么方法可以做到这一点（除非页面上的现有代码以某种方式将查看器存储在全局变量中）。不过，对于 OSD 来说，这是一个有趣的功能请求！如果您想追求这一点，添加它应该不会太难，我很乐意帮助您指出正确的方向。不过，我想这对您的情况没有帮助，因为您必须更新其他代码正在使用的 OSD。

标签： javascript openseadragon

【解决方案1】：

这是一个疯狂的想法...您可以对 OSD 的某些部分进行猴子修补以吸引查看器...

var viewer;
var originalIsOpen = OpenSeadragon.Viewer.prototype.isOpen;

OpenSeadragon.Viewer.prototype.isOpen = function() {
  // Now we know the viewer!
  viewer = this;
  
  // Reinstate the original, since we only need to run our version once
  OpenSeadragon.Viewer.prototype.isOpen = originalIsOpen;
  
  // Call the original
  return originalIsOpen.call(this);
}

这有点俗气，但应该可以。请注意，这是假设页面上只有一个查看器...如果有多个查看器，同样的原理也可以工作，但您需要跟踪一组查看器。

顺便说一句，我使用的是 isOpen，因为它很简单，而且每帧都会调用它。其他功能也可以。

编辑：固定代码，所以我们使用原型。我还没有实际测试过这段代码，所以可能仍然存在错误！

【讨论】：

【解决方案2】：

此解决方案不直接回答问题，因为它依赖于您自己的代码来创建 OpenSeaDragon 对象。这是@iangilman 提到将查看器存储在全局变量中的实现。然而，其他人可能会发现它很有用。（请注意，将全局变量传递给函数需要一种解决方法 - 请参阅 Passing a global variable to a function）

代码演示了如何使用同一个OpenSeaDragon对象来显示不同的图片。

var viewer3=null; //global variable

var newURL1='image/imageToDisplay1.png';
var newURL2='image/imageToDisplay2.png';
var elementID='myID';

//the loadScan function will display the picture using openSeaDragon and can be called as many times as you want.
loadScan("viewer3",newURL1,elementID);
loadScan("viewer3",newURL2,elementID);

//the actual function
function loadScan(theViewer,newURL,theID) {
    //if object has already been created, then just change the image
    if (window[theViewer]!=null) {
            window[theViewer].open({
                type: 'image',
                url: newURL
            });
        } else {
            //create a new OpenSeadragon object
            window[theViewer] = OpenSeadragon({
                prefixUrl: "/myapp/vendor/openseadragon/images/",
                id: theID,
                defaultZoomLevel: 1,
                tileSources: {
                    url: newURL,
                    type: 'image'
                }
            });

        }
        
}

【讨论】：