I use OpenSeaDragon for viewing images. In my HTML page I have got a checkbox. When it is it checked, a SVG filter is applied to the image. This works just fine, except when switching to full screen mode.
My question What should I do to have the filter also applied in full screen mode?
Run the snippet, check the checkbox, click on the ‘full page button’ and see what I mean.
(Bummer: switching to full screen mode does not seem to work here on Stackoverflow.
On Codepen the same code works: https://codepen.io/r-w-c/pen/bGQZMJb:
var filter_gs_mid_Checkbox1 = document.getElementById('openseadragon1-filter-gs-mid');
filter_gs_mid_Checkbox1.addEventListener('change', e => {
var viewer = document.getElementById("openseadragon1");
if (e.target.checked) {
viewer.classList.add('filter-gs-mid'); // <----- The issue. This works, but it is not enough
} else {
viewer.classList.remove('filter-gs-mid');
}
});
var viewer1 = OpenSeadragon({
id: 'openseadragon1',
prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
tileSources: 'https://openseadragon.github.io/example-images/highsmith/highsmith.dzi',
showNavigator: true,
});
.filter-gs-mid {
filter: url(#grayscale-mid-filter);
}
#openseadragon1 {
border: 1px solid #000;
height:250px;
}
<script src="https://openseadragon.github.io/openseadragon/openseadragon.min.js"></script>
<!-- SVG used for image filter -->
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale-mid-filter"><feColorMatrix type="matrix" values="0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 1 0"></feColorMatrix></filter>
</svg>
<div>
<div id="openseadragon-tools1" class="openseadragon-tools">
<input type="checkbox" id="openseadragon1-filter-gs-mid" name="openseadragon1-filter-gs-mid" />
<label for="openseadragon1-filter-gs-mid">Grayscale middle</label>
</div>
<div id="openseadragon-viewer1">
<!--<div id="openseadragon1-bar" class="openseadragon-bar"></div>-->
<div id="openseadragon1" class="openseadragon"></div>
</div>
</div>