Skip to content

Commit 6681bd6

Browse files
cailloucaillou
committed
feat: minResolution
1 parent 39e1b83 commit 6681bd6

File tree

5 files changed

+122
-20
lines changed

5 files changed

+122
-20
lines changed

‎README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,9 @@ cropper.on('change', function(crop) {
6464
| `arena` | jQuery element | |
6565
| `url` | String | Url of the image to load |
6666
| `crop` | Object | {x, y, width, height} Initial crop. The same as calling `setCrop()` |
67+
| `minResolution` | The minimal resolution required from the resulting image. |
6768
| `fixedWidth`, `fixedHeight` | Number | Will fix the preview width and only allow for resizes in the other axis. |
68-
| `minWidth`, `minHeight` | Number | Minimum widht or height the preview can be. |
69+
| `minWidth`, `minHeight` | Number | Minimum width or height the preview can be. |
6970
| `minRatio`, `maxRatio` | Number | Prohibit extreme image ratios with these settings. |
7071
| `maxArea` | Number | e.g. `0.8` means max 80% of the area will be covered by the image. This makes for smoth transitions between wide and tall image formats. |
7172
| `zoomStep` | Number | e.g. `1.25` means every zoom will enlarge the preview by 25%. |
@@ -128,5 +129,5 @@ Copyright (c) 2015 upfront GmbH
128129

129130
This program is free software: you can redistribute it and/or modify
130131
it under the terms of the GNU Lesser General Public License (LGPL) as
131-
published by the Free Software Foundation, either version 3 of the License,
132+
published by the Free Software Foundation, either version 3 of the License,
132133
or (at your option) any later version.

‎examples/images/16x9.png

27.5 KB
Loading

‎examples/min-resolution.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<meta charset="utf-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5+
<title>srcissors.js</title>
6+
<meta name="description" content="">
7+
<meta name="viewport" content="width=device-width">
8+
9+
<!-- css -->
10+
<link rel="stylesheet" href="/css/normalize.css">
11+
<link rel="stylesheet" href="/css/page.css">
12+
<link rel="stylesheet" href="/css/srcissors.css">
13+
</head>
14+
<body>
15+
<div class="clip-content">
16+
<div class="crop-arena no-selection">
17+
<div class="crop-view crop-view--is-loading">
18+
<!-- Outline -->
19+
<div class="crop-outline"></div>
20+
21+
<!-- zoom controls -->
22+
<div class="top-left">
23+
<div class="crop-zoom-controls crop-zoom-controls--outside">
24+
<a class="icon-zoom icon-zoom-in" href="#" title="Zoom in"></a>
25+
<a class="icon-zoom icon-zoom-out" href="#" title="Zoom out"></a>
26+
</div>
27+
</div>
28+
29+
<!-- image -->
30+
<div class="crop-preview clip-content cover-all"></div>
31+
32+
<!-- art direction -->
33+
<!-- todo: display image in different size -->
34+
35+
</div>
36+
</div>
37+
</div>
38+
39+
<!-- jquery -->
40+
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
41+
42+
<!-- srcissors. yeah! -->
43+
<script src="/srcissors.js"></script>
44+
45+
<script>
46+
47+
$(document).ready(function() {
48+
var crop = window.c = srcissors.new({
49+
arena: $('.crop-arena'),
50+
url: "/images/16x9.png",
51+
// The image is 1600 * 900, for demo, we choos 1/4 of the resolution
52+
minResolution: 800 * 450
53+
});
54+
55+
$('.icon-zoom-in').on('click', function(event) {
56+
crop.zoomIn();
57+
event.stopPropagation();
58+
});
59+
60+
$('.icon-zoom-out').on('click', function(event) {
61+
crop.zoomOut();
62+
event.stopPropagation();
63+
});
64+
65+
// Prevent triggering of other events like double click
66+
$('.icon-zoom-in, .icon-zoom-out').on('mousedown', function(event) {
67+
event.stopPropagation();
68+
});
69+
});
70+
71+
</script>
72+
73+
</body>
74+
</html>

‎src/crop.coffee

Lines changed: 43 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ module.exports = class Crop
66
constructor: ({
77
@arena, @view, @img, @outline, url, @fixedWidth, @fixedHeight,
88
@minViewWidth, @minViewHeight, @minViewRatio, @maxViewRatio, crop
9-
zoomStep, maxArea, @actions
9+
zoomStep, maxArea, @actions, @minResolution
1010
}) ->
1111

1212
# CSS classes
@@ -52,7 +52,7 @@ module.exports = class Crop
5252

5353

5454
setImage: (url) ->
55-
return unless url != @preview.url
55+
return if url == @preview.url
5656

5757
@preview.reset() if @isInitialized
5858
@initializeReadyState()
@@ -77,6 +77,22 @@ module.exports = class Crop
7777
@imageWidth = width
7878
@imageHeight = height
7979
@imageRatio = @imageWidth / @imageHeight
80+
imageResolution = @imageWidth * @imageHeight
81+
82+
if @minResolution && @minResolution > imageResolution
83+
# If the minimal required resolution is bigger than the actual image
84+
# resolution, we ignore the configuration
85+
delete @minResolution
86+
87+
if @minResolution
88+
# For any given image resolution with a minimal required resolution
89+
# we can calculate both, a minimal resolution and a maximal resolution
90+
minRatioForResolution = @minResolution / (@imageHeight * @imageHeight)
91+
if !@minViewRatio || @minViewRatio < minRatioForResolution
92+
@minViewRatio = minRatioForResolution
93+
maxRatioForResolution = (@imageWidth * @imageWidth) / @minResolution
94+
if !@maxViewRatio || @maxViewRatio > maxRatioForResolution
95+
@maxViewRatio = maxRatioForResolution
8096

8197
@calcMaxMinDimensions()
8298

@@ -234,6 +250,13 @@ module.exports = class Crop
234250
@viewWidth = width
235251
@viewHeight = height
236252
@viewRatio = width / height
253+
254+
if @minResolution
255+
minZoomPixelWidth = Math.sqrt(@minResolution * @viewRatio)
256+
minZoomPixelHeight = Math.sqrt(@minResolution / @viewRatio)
257+
@maxImageWidth = (@viewWidth / minZoomPixelWidth) * @imageWidth
258+
@maxImageHeight = (@viewHeight / minZoomPixelHeight) * @imageHeight
259+
237260
@fireChange()
238261

239262

@@ -332,18 +355,22 @@ module.exports = class Crop
332355

333356

334357
enforceZoom: ({ width, height }) ->
335-
if width?
336-
if width > @imageWidth
337-
# prevent zooming in past native image resolution
338-
return { width: @imageWidth }
339-
else if width < @viewWidth
340-
# prevent zooming out past covering the view completely
341-
return { width: @viewWidth }
342-
if height?
343-
if height > @imageHeight
344-
return { height: @imageHeight }
345-
else if height < @viewHeight
346-
return { height: @viewHeight }
358+
359+
if width? && @maxImageWidth && width > @maxImageWidth
360+
# prevent zooming in past the required resolution defined by minResolution
361+
return { width: @maxImageWidth}
362+
363+
if width? && width < @viewWidth
364+
# prevent zooming out past covering the view completely
365+
return { width: @viewWidth }
366+
367+
if height? && @maxImageHeight && height > @maxImageHeight
368+
# prevent zooming in past the required resolution defined by minResolution
369+
return { height: @maxImageHeight}
370+
371+
if height? && height < @viewHeight
372+
# prevent zooming out past covering the view completely
373+
return { height: @viewHeight }
347374

348375
{ width, height }
349376

@@ -397,7 +424,8 @@ module.exports = class Crop
397424
if not @isValidRatio(ratio)
398425
ratio = @enforceValidRatio(ratio)
399426
{ width, height } = @getRatioBox({ ratio: ratio, width, height, keepDimension })
400-
{ width, height } = @centerAlign(@maxWidth, @maxHeight, ratio)
427+
if width > @arenaWidth || height > @arenaHeight
428+
{ width, height } = @centerAlign(@maxWidth, @maxHeight, ratio)
401429

402430
else if newWidth || newHeight
403431
ratio = @enforceValidRatio(width / height)
@@ -511,4 +539,3 @@ module.exports = class Crop
511539

512540
console.log(obj)
513541
return obj
514-

‎src/srcissors.coffee

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ module.exports = window.srcissors =
44

55
new: ({
66
arena, url, fixedWidth, fixedHeight, minWidth, minHeight,
7-
minRatio, maxRatio, maxArea, zoomStep, crop, actions
7+
minRatio, maxRatio, maxArea, zoomStep, crop, actions, minResolution
88
}) ->
99
arena = $(arena)
1010
view = arena.find('.crop-view')
@@ -44,4 +44,4 @@ module.exports = window.srcissors =
4444
maxArea: maxArea # {Number} 0.8 -> max 80% of arena area are covered by the preview
4545
zoomStep: zoomStep # {Number} e.g. 1.25 -> 125%
4646
actions: allowedActions
47-
47+
minResolution: minResolution

0 commit comments

Comments
 (0)