dbmdz / mirador-imagecropper Goto Github PK
View Code? Open in Web Editor NEWImage Cropper plugin for Mirador 3
License: MIT License
Image Cropper plugin for Mirador 3
License: MIT License
Having had occasion to experiment a little with this tool, I'd like to come back with a little more feedback:
The way most users who are interested in certain details of a manuscript (letters, abbreviations, initials, passages of text, drawings, etc.) tend to work is that they zoom in first and when the item of interest is within view, activate the image cropper. However, what I often experienced at that zoom level is that the tool is then difficult or even impossible to use. It may cover the entire canvas or it becomes difficult to drag and resize. What I like about similar tools is that they allow you to zoom in and draw a shape, typically a rectangle, around any item of interest. Could that sort of functionality be implemented here?
In some cases the tool would not appear to become active after clicking the icon in the menu. However, when I flipped back and forth through the pages, it turned out that the cropper region had actually become active, just on the wrong page.
This is what I get when I load this plugin.
Uncaught TypeError: currentCanvas.imageServiceIds is undefined
CroppingDialog CroppingDialog.js:151
...
When the Mirador viewer goes into fullscreen mode, everything else that's not contained below the element with class="fullscreen" will be hidden.
Unfortunately, this means that the popup dialogs of the ImageCropper and CanvasLink plugins, and maybe others, won't be visible when Mirador has been launched fullscreen.
I'm not sure if the dialog can be appended inside the div (easiest solution), or that this should happen only if you're in fullscreen mode.
Many thanks for making this plugin available! If I understand correctly, it is the Mirador 3 successor to https://github.com/dbmdz/mirador-plugins/tree/main/ImageCropper (to judge by the installation instructions requiring webpack) and probably doesn't work with IIIF Presentation API lower than 3.0 (my test cases with 2.0 didn't work).
When I tried it out, I noticed that selected regions are based on percentages (per https://iiif.io/api/image/3.0/#41-region). That is wonderful because it is the only way to retrieve the region irrespective of image size. However, the image size is set at the maximum pct:100
by default and when I copy the URL and want to show an image with a max-width of 100%, the region becomes distorted and what remains gets a dark background, as demonstrated in this image:
The image at the bottom is the actual region, with image size set to 500,
. The one at the top shows what goes wrong when it is set to pct:100
.
I've googled for solutions but couldn't find any (yet). Could anyone a recommend how to deal with this issue?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.