Skip to content

Commit 75c54da

Browse files
romankaraviaromankaravia
authored
Merge pull request #19 from livingdocsIO/feat-original-size
Add originalSize option
2 parents 7f70fd0 + 24c4d6a commit 75c54da

File tree

11 files changed

+86
-82
lines changed

11 files changed

+86
-82
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ cropper.on('change', function(crop) {
7373
| `actions` | Object | {pan, zoomOnDoubleClick, resize } Allowed user interactions. By default they are all set to `true`. |
7474
| `showSurroundingImage` | String | {always, never, panning } Shows the uncropped part of the image. By default set to `never`. |
7575
| `surroundingImageOpacity` | Number | {0.0 - 1.0} Sets the opacity when showing the uncropped part of the image. By default set to `0.2`. |
76+
| `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}`. |
7677

7778
### HTML
7879

‎examples/srcissors.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/srcissors.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"test:ci": "karma start --single-run --browsers ChromeHeadlessNoSandbox",
1111
"test:watch": "karma start --no-single-run",
1212
"test:browsers": "karma start --browsers Chrome,Firefox,Safari,Electron",
13-
"start": "webpack-dev-server --open --content-base examples",
13+
"start": "webpack-dev-server -d --open --content-base examples",
1414
"build": "webpack && cp -R ./srcissors.* ./examples/"
1515
},
1616
"files": [
@@ -36,6 +36,7 @@
3636
"babel-loader": "^8.0.2",
3737
"chai": "^3.5.0",
3838
"electron": "^1.4.15",
39+
"eslint": "^7.18.0",
3940
"jquery": "^3.1.1",
4041
"karma": "^1.4.1",
4142
"karma-chai": "^0.1.0",

‎src/crop.js

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const Events = require('./events')
55
module.exports = class Crop {
66
constructor ({
77
arena, view, img, outline, url, fixedWidth, fixedHeight,
8-
minViewWidth, minViewHeight, minViewRatio, maxViewRatio, crop,
8+
minViewWidth, minViewHeight, minViewRatio, maxViewRatio, originalSize, crop,
99
zoomStep, maxArea, actions, minResolution, surroundingImageOpacity,
1010
showSurroundingImage
1111
}) {
@@ -21,6 +21,7 @@ module.exports = class Crop {
2121
this.minViewHeight = minViewHeight
2222
this.minViewRatio = minViewRatio
2323
this.maxViewRatio = maxViewRatio
24+
this.originalSize = originalSize
2425
this.actions = actions
2526
this.minResolution = minResolution
2627
this.surroundingImageOpacity = surroundingImageOpacity
@@ -102,7 +103,13 @@ module.exports = class Crop {
102103
this.zoomAllOut()
103104
}
104105

105-
onPreviewReady ({width, height}) {
106+
onPreviewReady (previewImageSize) {
107+
this.checkRatio(previewImageSize)
108+
const {width, height} = this.originalSize || previewImageSize
109+
110+
// console.log(this.originalSize, previewImageSize, {width, height})
111+
this.preview.updateImageDimensions({width, height})
112+
106113
let keepDimension
107114
if (!this.isInitialized) {
108115
this.events = new Events({
@@ -532,6 +539,18 @@ module.exports = class Crop {
532539
return {width, height}
533540
}
534541

542+
checkRatio (previewImageSize) {
543+
if (this.originalSize) {
544+
const expectedRatio = this.originalSize.width / this.originalSize.height
545+
const actualRatio = previewImageSize.width / previewImageSize.height
546+
const percentageChange = ((actualRatio - expectedRatio) / expectedRatio) * 100
547+
if (Math.abs(percentageChange) > 1) {
548+
throw new Error(`srcissors: Displayed image has a different image ratio than the ` +
549+
`one configured in 'originalRatio': ${expectedRatio} vs ${actualRatio}`)
550+
}
551+
}
552+
}
553+
535554
// Calculations
536555
// ------------
537556
//

‎src/preview.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@ module.exports = class Preview {
1515
const height = this.img.height()
1616
this.ratio = width / height
1717

18-
this.updateImageDimensions({width, height})
19-
this.onReady({width: this.width, height: this.height})
18+
this.onReady({width, height})
2019
this.img.show()
2120
})
2221
}

‎src/preview_css_zoom.js

Lines changed: 0 additions & 72 deletions
This file was deleted.

‎src/srcissors.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const Crop = require('./crop')
44
module.exports = {
55
new ({
66
arena, url, fixedWidth, fixedHeight, minWidth, minHeight,
7-
minRatio, maxRatio, maxArea, zoomStep, crop, actions, minResolution,
7+
minRatio, maxRatio, maxArea, originalSize, zoomStep, crop, actions, minResolution,
88
surroundingImageOpacity, showSurroundingImage
99
}) {
1010
arena = $(arena)
@@ -46,6 +46,9 @@ module.exports = {
4646
minViewRatio: minRatio, // {Number} e.g. 1.5/2
4747
maxViewRatio: maxRatio, // {Number} e.g. 2/1
4848
maxArea, // {Number} 0.8 -> max 80% of arena area are covered by the preview
49+
originalSize, // {Object} Original image size, can be used to display a downscaled
50+
// version of the image in the cropping interface, but use the original
51+
// size for crop attributes; e.g. {width: 4000, height: 3000}
4952
zoomStep, // {Number} e.g. 1.25 -> 125%
5053
actions: allowedActions,
5154
minResolution

‎srcissors.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎srcissors.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)