dbmdz / mirador-imagecropper

Image Cropper plugin for Mirador 3

mirador-imagecropper

A Mirador 3 plugin to retrieve the image url for the selected area.

Installation

Currently the plugin can only be used if you build your own Mirador JavaScript bundle. To include the plugin in your Mirador installation, you need to install it from npm with npm install mirador-imagecropper, import it into your project and pass it to Mirador when you instantiate the viewer:

import Mirador from 'mirador/dist/es/src/index';
import imageCropperPlugin from 'mirador-imagecropper/es';

const miradorConfig = {
  // Your Mirador configuration
}
Mirador.viewer(config, [...imageCropperPlugin]);

Configuration

You can configure the plugin globally for all windows and/or individually for every window.

For global configuration add the imageCropper entry to the top-level window configuration (globally for all windows) or to the individual window object:

const miradorConfig = {
  window: {
    // ....
    imageCropper: {
      // Global config for all windows, see available settings below
    },
  },
  windows: [{
    // ....
    imageCropper: {
      // config for an individual window, see available settings below
    },
  }, // ...
}

You can view an example configuration in demo/src/index.js.

The available settings are:

• active: If the cropping overlay is active. Boolean, defaults to false.
• dialogOpen: If the settings dialog is open. Boolean, defaults to false.
• enabled: If the plugin is enabled. Boolean, defaults to true.
• roundingPrecision: Set the number of decimal places. Number, defaults to 5.
• showRightsInformation: If rights information defined in the manifest should be shown. Boolean, defaults to true.

Contributing

Found a bug? The plugin is not working with your manifest? Want a new feature? Create an issue, or if you want to take a shot at fixing it yourself, make a fork, create a pull request, we're always open to contributions :-)

For larger changes/features, it's usually wise to open an issue before starting the work, so we can discuss if it's a fit.

Note: The package requires Node.js 16 and npm in major version 8.

mirador-imagecropper's Issues

Dialogs not visible in fullscreen mode

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.

Some difficulties trying to operate the tool

• Browser: Firefox 89.0.2
• Use case: https://www.vanhamel.nl/codecs/Show:IIIF/September2021

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.

Apply URL encoding to social media links

See dbmdz/mirador-canvaslink#65

How to show a default crop with max-width:100%?

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?

Uncaught TypeError: currentCanvas.imageServiceIds is undefined

This is what I get when I load this plugin.

Uncaught TypeError: currentCanvas.imageServiceIds is undefined
    CroppingDialog CroppingDialog.js:151
    ...