anonymous - OpenSeadragon 本地 html 错误：crossOriginPolicy: 'Anonymous' 使演示图像在本地 html 中不可见

Question

（整个包可以从 https://drive.google.com/file/d/1vzAYq909e4H7qwZ-opAehmWIHkcjVM1c/view?usp=sharing下载）

我想试试 OpenSeaDragon 演示：

源码： https ://github.com/usnistgov/OpenSeadragonFiltering 同在线demo： https ://pages.nist.gov/OpenSeadragonFiltering/

在我的本地计算机上制作 html 和相关的 js 文件等进行演示。

为了在本地计算机上试用演示，我下载了 openseadragon 和这个演示，以及 highsmith 平铺图像文件夹，以及演示网站所需的所有 js 文件。然后我将 index.html 中的代码替换为演示网站的浏览器中的动态代码。然后我将js和html中的所有http路径改成本地文件，并在demo、js和demo-bundle.js中指定viewer对象，如下：

var viewer = new OpenSeadragon({
    id: 'openseadragon',
    prefixUrl: './images/',
    //crossOriginPolicy: 'Anonymous' 
    tileSources: {
        Image: {
            xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
            Url: './highsmith_files/',
            Overlap: '2',
            TileSize: '256',
            Format: 'jpg',
            Size: {
                Height: '9221',
                Width: '7026'
            }
        }
    }
});

如果我删除/评论该行：

crossOriginPolicy: 'Anonymous' 

然后我打开 index.html 并可以准确地看到加载的图像和过滤器选项。但是一旦我点击一个过滤器，虽然过滤器被添加到了下部，但图像永远变黑了。控制台浏览器说：

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    at Object.tileDrawingHandler [as handler] (file:///D:/QMDownload/9/test3/OpenseadragonDemo/_plugins/demo-bundle.js:45407:57)
    at file:///D:/QMDownload/9/test3/OpenseadragonDemo/_plugins/demo-bundle.js:28662:34
    at $.Viewer.raiseEvent (file:///D:/QMDownload/9/test3/OpenseadragonDemo/_plugins/demo-bundle.js:28684:14)
    at _drawingHandler (file:///D:/QMDownload/9/test3/OpenseadragonDemo/_plugins/demo-bundle.js:43338:23)
    at $.Tile.drawCanvas (file:///D:/QMDownload/9/test3/OpenseadragonDemo/_plugins/demo-bundle.js:40996:10)
    at $.Drawer.drawTile (file:///D:/QMDownload/9/test3/OpenseadragonDemo/_plugins/demo-bundle.js:41659:23)
    at drawTiles (file:///D:/QMDownload/9/test3/OpenseadragonDemo/_plugins/demo-bundle.js:44495:29)
    at updateViewport (file:///D:/QMDownload/9/test3/OpenseadragonDemo/_plugins/demo-bundle.js:43944:6)
    at $.TiledImage.draw (file:///D:/QMDownload/9/test3/OpenseadragonDemo/_plugins/demo-bundle.js:43390:10)
    at $.World.draw (file:///D:/QMDownload/9/test3/OpenseadragonDemo/_plugins/demo-bundle.js:45070:29)

我用谷歌搜索并找到了一个答案，即 如何修复 getImageData() 错误画布已被跨域数据污染？

As others have said you are "tainting" the canvas by loading from a cross origins domain.

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

    However, you may be able to prevent this by simply setting:
    
    img.crossOrigin = "Anonymous";
    This only works if the remote server sets the following header appropriately:
    
    Access-Control-Allow-Origin "*"
    The Dropbox file chooser when using the "direct link" option is a great example of this. I use it on oddprints.com to hoover up images from the remote dropbox image url, into my canvas, and then submit the image data back into my server. All in javascript

所以我带回

crossOriginPolicy: 'Anonymous'

在 demo,js 和 demo-bundle.js 中，但发现当我打开 index.html 时，图像是全黑的。

如何解决问题并使过滤器在本地计算机上工作？谢谢。

标签： anonymousopenseadragon