@dbmdz/mirador-imagecropper

Adds an overlay to the canvas for retrieving the image url for the selected area.

Stats

StarsIssuesVersionUpdatedCreatedSize
@dbmdz/mirador-imagecropper
2432.4.63 years ago4 years agoMinified + gzip package size for @dbmdz/mirador-imagecropper in KB

Readme

Image cropper

NPM Maven Central

Adds an overlay to the canvas for retrieving the image url for the selected area.

Installation

You can find production-ready build artifacts in the releases section.

Alternatively, you can use npm to install the artifacts:

$ npm install @dbmdz/mirador-imagecropper

If you have a Java Web-Application managed with mvn, there is also a WebJar, which can be included as follows:

<dependency>
  <groupId>org.webjars.npm</groupId>
  <artifactId>dbmdz__mirador-imagecropper</artifactId>
  <version>{set to current version}</version>
</dependency>

Usage

  • enable the plugin by including the CSS and the JavaScript (after loading Mirador):
<link rel="stylesheet" type="text/css" href="<url to the plugin>/imageCropper.min.css" />
...
<script src="<url to the plugin>/imageCropper.min.js"></script>
  • include the ShareButtons extension - the usage is explained in the corresponding README - if you want to have some share buttons displayed in the modal dialog

  • configure the behaviour of the plugin with the imageCropper configuration key:

var mirador = Mirador({
  ...
  imageCropper: {
     // Activate the cropping selection frame for every window in Mirador, default is false
    activeOnStart: true,
    // Define the number of decimals in the relative region coordinates, default is 5
    roundingPrecision: 3,
    // Show a license link defined in the containing manifest, default is false
    showLicense: true,
    // Display an info that the website containing the Mirador instance is left by clicking on the share buttons, default is false
    showShareButtonsInfo: true
  }
  ...
});

NOTE: The configuration key showShareButtonsInfo is only evaluated, if you have also included the ShareButtons extension.

Demo

Demo

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.