feat: originalSize

romankaravia · romankaravia · commit afd7884d1a53 · 2021-02-09T15:40:41.000+01:00
Add `originalSize` option, which allows to display a downscaled version of the
image in the cropping interface, but use the original size for crop attributes.
diff --git a/README.md b/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
 
diff --git a/src/crop.js b/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
   // ------------
   //
diff --git a/src/preview.js b/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()
     })
   }
diff --git a/src/preview_css_zoom.js b/src/preview_css_zoom.js
diff --git a/src/srcissors.js b/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
diff --git a/test/specs/srcissors_spec.js b/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()
+      })
+    })
+  })
 })

Original file line number	Diff line number	Diff line change
`@@ -15,8 +15,7 @@ module.exports = class Preview {`
`15`	`15`	`const height = this.img.height()`
`16`	`16`	`this.ratio = width / height`
`17`	`17`
`18`		`- this.updateImageDimensions({width, height})`
`19`		`- this.onReady({width: this.width, height: this.height})`
	`18`	`+ this.onReady({width, height})`
`20`	`19`	`this.img.show()`
`21`	`20`	`})`
`22`	`21`	`}`