Add calculation of relative region coordinates

dbmdz · Oct 6, 2017 · dac0f43 · dac0f43
1 parent 078b092
commit dac0f43
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/ImageCropper/imageCropper.js b/ImageCropper/imageCropper.js
@@ -72,7 +72,7 @@ var ImageCropper = {
 
   /* the template for the image url */
   imageUrlTemplate: Mirador.Handlebars.compile(
-    '{{imageBaseUrl}}/{{region.x}},{{region.y}},{{region.w}},{{region.h}}/{{size}}/{{rotation}}/{{quality}}.jpg'
+    '{{imageBaseUrl}}/pct:{{region.x}},{{region.y}},{{region.w}},{{region.h}}/{{size}}/{{rotation}}/{{quality}}.jpg'
   ),
 
   /* the template for the modal containing the image url for the selection */
@@ -179,7 +179,7 @@ var ImageCropper = {
   },
 
   /* converts web to image coordinates */
-  calculateImageCoordinates: function(dimensions, osdViewport, validate, windowId){
+  calculateImageCoordinates: function(dimensions, osdViewport, validate, relative, windowId){
     $.map(dimensions, function(value, key){
       dimensions[key] = parseInt(value);
     });
@@ -212,6 +212,17 @@ var ImageCropper = {
       imageCoordinates.h = Math.min(imageCoordinates.h, this.imageDimensions[windowId].height);
     }
 
+    if(relative){
+      var roundingPrecision = this.options.roundingPrecision;
+      if(typeof roundingPrecision !== 'number' || roundingPrecision < 0 || roundingPrecision > 20){
+        roundingPrecision = 5;
+      }
+      imageCoordinates.x = parseFloat(((imageCoordinates.x / this.imageDimensions[windowId].width) * 100).toFixed(roundingPrecision));
+      imageCoordinates.y = parseFloat(((imageCoordinates.y / this.imageDimensions[windowId].height) * 100).toFixed(roundingPrecision));
+      imageCoordinates.w = parseFloat(((imageCoordinates.w / this.imageDimensions[windowId].width) * 100).toFixed(roundingPrecision));
+      imageCoordinates.h = parseFloat(((imageCoordinates.h / this.imageDimensions[windowId].height) * 100).toFixed(roundingPrecision));
+    }
+
     return imageCoordinates;
   },
 
@@ -261,7 +272,7 @@ var ImageCropper = {
       'left': newElementLeft,
       'height': elementHeight,
       'width': elementWidth
-    }, osdViewport, false);
+    }, osdViewport, false, false);
     var imageBounds = this.calculateImageBounds(osdViewport, windowId);
 
     if(imageCoordinates.y < 0){
@@ -459,7 +470,7 @@ var ImageCropper = {
         this_.imageUrlParams = {
           'imageBaseUrl': Mirador.Iiif.getImageUrl(currentImage),
           'region': this_.calculateImageCoordinates(
-            currentOverlayDimensions, this.osd.viewport, true, this.windowId
+            currentOverlayDimensions, this.osd.viewport, true, true, this.windowId
           ),
           'size': 'full',
           'rotation': 0,

diff --git a/README.md b/README.md
@@ -44,12 +44,16 @@ To enable it, include the CSS and the JavaScript (**after** loading Mirador).
 <script src="<url to the plugin>/imageCropper.js"></script>
 ```
 
-To activate the plugin at startup of Mirador, you can achieve this by adding an option to your Mirador configuration:
+You can configuration the behaviour of the plugin with the `imageCropper` configuration key:
 
 ```js
 var mirador = Mirador({
   ...
-  activateImageCropping: true
+  imageCropper: {
+    activeOnStart: true, // Activate the cropping selection frame for every window in Mirador, default is false
+    roundingPrecision: 3, // Define the number of decimals in the relative region coordinates, default is 5
+    showLicense: true // Show a license link defined in the containing manifest, default is false
+  }
   ...
 });
 ```