OpenSeadragon local html error: crossOriginPolicy: 'Anonymous' make the demo image unvisible in local html

Question

(The whole package can be downloaded from https://drive.google.com/file/d/1vzAYq909e4H7qwZ-opAehmWIHkcjVM1c/view?usp=sharing)

I want to try the OpenSeaDragon demo:

Source code: https://github.com/usnistgov/OpenSeadragonFiltering The same online demo: https://pages.nist.gov/OpenSeadragonFiltering/

to make html and associated js files etc to demo in my local computer.

To try the demo on local computer, I download openseadragon and this demo, and highsmith tile image folders, and all the js files needed from the demo website. Then I replace the code in index.html by the dynamic code in the browser for the demo website. Then I change all the http path in js and html to local file, and specify the viewer object in demo,js and demo-bundle.js as below:

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'
            }
        }
    }
});

If I remove/comment the line:

crossOriginPolicy: 'Anonymous' 

then I open index.html and could see exactly the loaded image and filter options. But once I click an filter, although the filter was added to the lower part, but the image turns black forever. The console explorer said:

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)

I googled and find an answer that How to fix getImageData() error The canvas has been tainted by cross-origin data?

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

So I bring back the

crossOriginPolicy: 'Anonymous'

in demo,js and demo-bundle.js, but found that when I open index.html, the image was total black.

How can I solve the problem and make the filter work in local computer ? Thanks.