Merge pull request #19 from livingdocsIO/feat-original-size

Add originalSize option

README.md

@@ -73,6 +73,7 @@ cropper.on('change', function(crop) {
 | `actions` | Object | {pan, zoomOnDoubleClick, resize } Allowed user interactions. By default they are all set to `true`. |
 | `showSurroundingImage` | String | {always, never, panning } Shows the uncropped part of the image. By default set to `never`. |
 | `surroundingImageOpacity` | Number | {0.0 - 1.0} Sets the opacity when showing the uncropped part of the image. By default set to `0.2`. |
+| `originalSize` | Object | Original image size, can be used to display a downscaled version of the image in the cropping interface, but use the original size for crop attributes; e.g. `{width: 4000, height: 3000}`. |
 
 ### HTML
 

package.json

@@ -10,7 +10,7 @@
     "test:ci": "karma start --single-run --browsers ChromeHeadlessNoSandbox",
     "test:watch": "karma start --no-single-run",
     "test:browsers": "karma start --browsers Chrome,Firefox,Safari,Electron",
-    "start": "webpack-dev-server --open --content-base examples",
+    "start": "webpack-dev-server -d --open --content-base examples",
     "build": "webpack && cp -R ./srcissors.* ./examples/"
   },
   "files": [
@@ -36,6 +36,7 @@
     "babel-loader": "^8.0.2",
     "chai": "^3.5.0",
     "electron": "^1.4.15",
+    "eslint": "^7.18.0",
     "jquery": "^3.1.1",
     "karma": "^1.4.1",
     "karma-chai": "^0.1.0",

src/crop.js

@@ -5,7 +5,7 @@ const Events = require('./events')
 module.exports = class Crop {
   constructor ({
     arena, view, img, outline, url, fixedWidth, fixedHeight,
-    minViewWidth, minViewHeight, minViewRatio, maxViewRatio, crop,
+    minViewWidth, minViewHeight, minViewRatio, maxViewRatio, originalSize, crop,
     zoomStep, maxArea, actions, minResolution, surroundingImageOpacity,
     showSurroundingImage
   }) {
@@ -21,6 +21,7 @@ module.exports = class Crop {
     this.minViewHeight = minViewHeight
     this.minViewRatio = minViewRatio
     this.maxViewRatio = maxViewRatio
+    this.originalSize = originalSize
     this.actions = actions
     this.minResolution = minResolution
     this.surroundingImageOpacity = surroundingImageOpacity
@@ -102,7 +103,13 @@ module.exports = class Crop {
     this.zoomAllOut()
   }
 
-  onPreviewReady ({width, height}) {
+  onPreviewReady (previewImageSize) {
+    this.checkRatio(previewImageSize)
+    const {width, height} = this.originalSize || previewImageSize
+
+    // console.log(this.originalSize, previewImageSize, {width, height})
+    this.preview.updateImageDimensions({width, height})
+
     let keepDimension
     if (!this.isInitialized) {
       this.events = new Events({
@@ -532,6 +539,18 @@ module.exports = class Crop {
     return {width, height}
   }
 
+  checkRatio (previewImageSize) {
+    if (this.originalSize) {
+      const expectedRatio = this.originalSize.width / this.originalSize.height
+      const actualRatio = previewImageSize.width / previewImageSize.height
+      const percentageChange = ((actualRatio - expectedRatio) / expectedRatio) * 100
+      if (Math.abs(percentageChange) > 1) {
+        throw new Error(`srcissors: Displayed image has a different image ratio than the ` +
+                        `one configured in 'originalRatio': ${expectedRatio} vs ${actualRatio}`)
+      }
+    }
+  }
+
   // Calculations
   // ------------
   //

src/preview.js

@@ -15,8 +15,7 @@ module.exports = class Preview {
       const height = this.img.height()
       this.ratio = width / height
 
-      this.updateImageDimensions({width, height})
-      this.onReady({width: this.width, height: this.height})
+      this.onReady({width, height})
       this.img.show()
     })
   }

src/srcissors.js

@@ -4,7 +4,7 @@ const Crop = require('./crop')
 module.exports = {
   new ({
     arena, url, fixedWidth, fixedHeight, minWidth, minHeight,
-    minRatio, maxRatio, maxArea, zoomStep, crop, actions, minResolution,
+    minRatio, maxRatio, maxArea, originalSize, zoomStep, crop, actions, minResolution,
     surroundingImageOpacity, showSurroundingImage
   }) {
     arena = $(arena)
@@ -46,6 +46,9 @@ module.exports = {
       minViewRatio: minRatio, // {Number} e.g. 1.5/2
       maxViewRatio: maxRatio, // {Number} e.g. 2/1
       maxArea, // {Number} 0.8 -> max 80% of arena area are covered by the preview
+      originalSize, // {Object} Original image size, can be used to display a downscaled
+                    // version of the image in the cropping interface, but use the original
+                    // size for crop attributes; e.g. {width: 4000, height: 3000}
       zoomStep, // {Number} e.g. 1.25 -> 125%
       actions: allowedActions,
       minResolution

test/specs/srcissors_spec.js

@@ -320,4 +320,57 @@ describe('srcissors', function () {
       expect(outline.get(0).style.opacity).to.equal('0')
     })
   })
+
+  describe('with 4000x3000 originalSize', function () {
+
+    beforeEach(function (done) {
+      this.arena = $(template)
+      this.arena.css({width: 100, height: 100})
+      $(document.body).append(this.arena)
+
+      // Crop a 400x300 image with 4000x3000 originalSize
+      this.crop = srcissors.new({
+        arena: this.arena,
+        originalSize: {width: 4000, height: 3000},
+        url: '/base/test/images/diagonal.jpg'
+      })
+      this.crop.on('ready', done)
+    })
+
+    afterEach(function () {
+      this.arena.remove()
+    })
+
+    it('has initialized the image correctly', function () {
+      expect(this.crop.imageWidth).to.equal(4000)
+      expect(this.crop.imageHeight).to.equal(3000)
+    })
+
+    it('fires a change event after ready', function (done) {
+      this.crop.on('change', function (crop) {
+        expect(crop).to.deep.equal({
+          x: 0,
+          y: 0,
+          width: 4000,
+          height: 3000
+        })
+
+        done()
+      })
+    })
+
+    it('scales crop coordinates on zoom', function (done) {
+      this.crop.zoomIn()
+      this.crop.on('change', function (crop) {
+        expect(crop).to.deep.equal({
+          x: 400,
+          y: 300,
+          width: 3200,
+          height: 2400
+        })
+
+        done()
+      })
+    })
+  })
 })