An open-source, web-based viewer for zoomable images, implemented in pure JavaScript.
viewer.addHandler('canvas-click', (event) => {
let overlayElement = OpenSeadragon.makeNeutralElement('div');
overlayElement.className = 'my-overlay-class';
(function (style) {
style.fontSize = '20px';
style.color = '#000';
style.background = 'rgba(0,255,255,0.5)';
style.padding = '20px';
style.pointerEvents = 'auto';
style.cursor = 'grab';
})(overlayElement.style);
let clickPoint = viewer.viewport.pointFromPixel(event.position);
viewer.addOverlay({
element: overlayElement,
location: new OpenSeadragon.Rect(clickPoint.x, clickPoint.y, 0.1, 0.1)
});
// Prevent default click-to-zoom behavior
event.preventDefaultAction = true;
});
viewer.addHandler('canvas-click', (event) => {
if (event.quick) {
let overlayElement = OpenSeadragon.makeNeutralElement('div');
overlayElement.className = 'my-overlay-class';
(function (style) {
style.fontSize = '20px';
style.color = '#000';
style.background = 'rgba(0,255,255,0.5)';
style.padding = '20px';
style.pointerEvents = 'auto';
style.cursor = 'grab';
})(overlayElement.style);
let clickPoint = viewer.viewport.pointFromPixel(event.position);
viewer.addOverlay({
element: overlayElement,
location: new OpenSeadragon.Rect(clickPoint.x, clickPoint.y, 0.1, 0.1)
});
// Prevent default click-to-zoom behavior
event.preventDefaultAction = true;
}
});
I'm using OSD for showing an image, where users can be able to apply filters such as brightness and contrast. But after applying that. I need to save that image from the canvas. But i haven't got the correct size image after applying the filter. Plz tell me whats wrong with my code.
let tiledImage = viewer.world.getItemAt(0);
const imageViewportBounds = tiledImage.getBounds();
const imageWebBounds = viewer.viewport.viewportToViewerElementRectangle(imageViewportBounds);
let dataURL = viewer.drawer.canvas.toDataURL({
format: 'png',
left: imageWebBounds.x,
top: imageWebBounds.y,
width: imageWebBounds.width,
height: imageWebBounds.height
});
Hi, I have a bit of a unique use case and I'm wondering what the best way to solve this would be... I have a server that has all of my images and it requires a different JWT for each image request and changing the structure of how this server works is not an option. I need to display multiple images like in this example: https://demos.biblissima.fr/chateauroux/osd-demo/ how can I dynamically change this:
ajaxHeaders: {
Authorization: myJwtForImage1,
}
to be dynamic to pass a different myJwtForImage1
for each image in a multi-image set?