Skip to content

Commit c1b88ae

Browse files
blueimpblueimp
committed
Added sourceWidth, sourceHeight, top, right, bottom and left options to allow arbitrary cropping. Closes blueimp#31
Moved orientation functionality into a separate file. Added the Jcrop plugin to the demo to visualize the new cropping features.
1 parent 2685792 commit c1b88ae

15 files changed

+2251
-115
lines changed

‎Makefile‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
.PHONY: js
22

3-
MINIFY_LIST=js/load-image.js js/load-image-ios.js js/load-image-meta.js js/load-image-exif.js js/load-image-exif-map.js
3+
MINIFY=js/load-image.js
4+
MINIFY+= js/load-image-ios.js
5+
MINIFY+= js/load-image-orientation.js
6+
MINIFY+= js/load-image-meta.js
7+
MINIFY+= js/load-image-exif.js
8+
MINIFY+= js/load-image-exif-map.js
49

510
js:
6-
node_modules/.bin/uglifyjs ${MINIFY_LIST} -c -m -o js/load-image.min.js
11+
node_modules/.bin/uglifyjs ${MINIFY} -c -m -o js/load-image.min.js

‎README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ Or alternatively, choose which components you want to include:
2020
```html
2121
<script src="js/load-image.js"></script>
2222
<script src="js/load-image-ios.js"></script>
23+
<script src="js/load-image-orientation.js"></script>
2324
<script src="js/load-image-meta.js"></script>
2425
<script src="js/load-image-exif.js"></script>
2526
<script src="js/load-image-exif-map.js"></script>
@@ -117,6 +118,18 @@ The optional third argument to **loadImage()** is a map of options:
117118
* **maxHeight**: Defines the maximum height of the img/canvas element.
118119
* **minWidth**: Defines the minimum width of the img/canvas element.
119120
* **minHeight**: Defines the minimum height of the img/canvas element.
121+
* **sourceWidth**: The width of the sub-rectangle of the source image to draw into the destination canvas.
122+
Defaults to the source image width and requires *canvas: true*.
123+
* **sourceHeight**: The height of the sub-rectangle of the source image to draw into the destination canvas.
124+
Defaults to the source image height and requires *canvas: true*.
125+
* **top**: The top margin of the sub-rectangle of the source image.
126+
Defaults to *0* and requires *canvas: true*.
127+
* **right**: The right margin of the sub-rectangle of the source image.
128+
Defaults to *0* and requires *canvas: true*.
129+
* **bottom**: The bottom margin of the sub-rectangle of the source image.
130+
Defaults to *0* and requires *canvas: true*.
131+
* **left**: The left margin of the sub-rectangle of the source image.
132+
Defaults to *0* and requires *canvas: true*.
120133
* **contain**: Scales the image up/down to contain it in the max dimensions if set to *true*.
121134
This emulates the CSS feature [background-image: contain](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain).
122135
* **cover**: Scales the image up/down to cover the max dimensions with the image dimensions if set to *true*.

‎bower.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "blueimp-load-image",
3-
"version": "1.8.0",
3+
"version": "1.9.0",
44
"title": "JavaScript Load Image",
55
"description": "JavaScript Load Image is a library to load images provided as File or Blob objects or via URL. It returns an optionally scaled and/or cropped HTML img or canvas element. It also provides a method to parse image meta data to extract Exif tags and thumbnails and to restore the complete image header after resizing.",
66
"keywords": [
@@ -48,6 +48,7 @@
4848
"main": [
4949
"./js/load-image.js",
5050
"./js/load-image-ios.js",
51+
"./js/load-image-orientation.js",
5152
"./js/load-image-meta.js",
5253
"./js/load-image-exif.js",
5354
"./js/load-image-exif-map.js"

‎css/demo.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* JavaScript Load Image Demo CSS 1.8.0
2+
* JavaScript Load Image Demo CSS 1.9.0
33
* https://github.com/blueimp/JavaScript-Load-Image
44
*
55
* Copyright 2013, Sebastian Tschan
@@ -56,6 +56,9 @@ td {
5656
color: #222;
5757
text-align: center;
5858
}
59+
.jcrop-holder {
60+
margin: 0 auto;
61+
}
5962

6063
@media (min-width: 481px) {
6164
.navigation {

‎css/vendor/Jcrop.gif‎

329 Bytes
Loading

‎css/vendor/jquery.Jcrop.css‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
/* jquery.Jcrop.css v0.9.12 - MIT License */
2+
/*
3+
The outer-most container in a typical Jcrop instance
4+
If you are having difficulty with formatting related to styles
5+
on a parent element, place any fixes here or in a like selector
6+
7+
You can also style this element if you want to add a border, etc
8+
A better method for styling can be seen below with .jcrop-light
9+
(Add a class to the holder and style elements for that extended class)
10+
*/
11+
.jcrop-holder {
12+
direction: ltr;
13+
text-align: left;
14+
}
15+
/* Selection Border */
16+
.jcrop-vline,
17+
.jcrop-hline {
18+
background: #ffffff url("Jcrop.gif");
19+
font-size: 0;
20+
position: absolute;
21+
}
22+
.jcrop-vline {
23+
height: 100%;
24+
width: 1px !important;
25+
}
26+
.jcrop-vline.right {
27+
right: 0;
28+
}
29+
.jcrop-hline {
30+
height: 1px !important;
31+
width: 100%;
32+
}
33+
.jcrop-hline.bottom {
34+
bottom: 0;
35+
}
36+
/* Invisible click targets */
37+
.jcrop-tracker {
38+
height: 100%;
39+
width: 100%;
40+
/* "turn off" link highlight */
41+
-webkit-tap-highlight-color: transparent;
42+
/* disable callout, image save panel */
43+
-webkit-touch-callout: none;
44+
/* disable cut copy paste */
45+
-webkit-user-select: none;
46+
}
47+
/* Selection Handles */
48+
.jcrop-handle {
49+
background-color: #333333;
50+
border: 1px #eeeeee solid;
51+
width: 7px;
52+
height: 7px;
53+
font-size: 1px;
54+
}
55+
.jcrop-handle.ord-n {
56+
left: 50%;
57+
margin-left: -4px;
58+
margin-top: -4px;
59+
top: 0;
60+
}
61+
.jcrop-handle.ord-s {
62+
bottom: 0;
63+
left: 50%;
64+
margin-bottom: -4px;
65+
margin-left: -4px;
66+
}
67+
.jcrop-handle.ord-e {
68+
margin-right: -4px;
69+
margin-top: -4px;
70+
right: 0;
71+
top: 50%;
72+
}
73+
.jcrop-handle.ord-w {
74+
left: 0;
75+
margin-left: -4px;
76+
margin-top: -4px;
77+
top: 50%;
78+
}
79+
.jcrop-handle.ord-nw {
80+
left: 0;
81+
margin-left: -4px;
82+
margin-top: -4px;
83+
top: 0;
84+
}
85+
.jcrop-handle.ord-ne {
86+
margin-right: -4px;
87+
margin-top: -4px;
88+
right: 0;
89+
top: 0;
90+
}
91+
.jcrop-handle.ord-se {
92+
bottom: 0;
93+
margin-bottom: -4px;
94+
margin-right: -4px;
95+
right: 0;
96+
}
97+
.jcrop-handle.ord-sw {
98+
bottom: 0;
99+
left: 0;
100+
margin-bottom: -4px;
101+
margin-left: -4px;
102+
}
103+
/* Dragbars */
104+
.jcrop-dragbar.ord-n,
105+
.jcrop-dragbar.ord-s {
106+
height: 7px;
107+
width: 100%;
108+
}
109+
.jcrop-dragbar.ord-e,
110+
.jcrop-dragbar.ord-w {
111+
height: 100%;
112+
width: 7px;
113+
}
114+
.jcrop-dragbar.ord-n {
115+
margin-top: -4px;
116+
}
117+
.jcrop-dragbar.ord-s {
118+
bottom: 0;
119+
margin-bottom: -4px;
120+
}
121+
.jcrop-dragbar.ord-e {
122+
margin-right: -4px;
123+
right: 0;
124+
}
125+
.jcrop-dragbar.ord-w {
126+
margin-left: -4px;
127+
}
128+
/* The "jcrop-light" class/extension */
129+
.jcrop-light .jcrop-vline,
130+
.jcrop-light .jcrop-hline {
131+
background: #ffffff;
132+
filter: alpha(opacity=70) !important;
133+
opacity: .70!important;
134+
}
135+
.jcrop-light .jcrop-handle {
136+
-moz-border-radius: 3px;
137+
-webkit-border-radius: 3px;
138+
background-color: #000000;
139+
border-color: #ffffff;
140+
border-radius: 3px;
141+
}
142+
/* The "jcrop-dark" class/extension */
143+
.jcrop-dark .jcrop-vline,
144+
.jcrop-dark .jcrop-hline {
145+
background: #000000;
146+
filter: alpha(opacity=70) !important;
147+
opacity: 0.7 !important;
148+
}
149+
.jcrop-dark .jcrop-handle {
150+
-moz-border-radius: 3px;
151+
-webkit-border-radius: 3px;
152+
background-color: #ffffff;
153+
border-color: #000000;
154+
border-radius: 3px;
155+
}
156+
/* Simple macro to turn off the antlines */
157+
.solid-line .jcrop-vline,
158+
.solid-line .jcrop-hline {
159+
background: #ffffff;
160+
}
161+
/* Fix for twitter bootstrap et al. */
162+
.jcrop-holder img,
163+
img.jcrop-preview {
164+
max-width: none;
165+
}

‎index.html‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE HTML>
22
<!--
33
/*
4-
* JavaScript Load Image Demo 1.8.0
4+
* JavaScript Load Image Demo 1.9.0
55
* https://github.com/blueimp/JavaScript-Load-Image
66
*
77
* Copyright 2011, Sebastian Tschan
@@ -20,6 +20,8 @@
2020
<title>JavaScript Load Image</title>
2121
<meta name="description" content="JavaScript Load Image is a library to load images provided as File or Blob objects or via URL. It returns an optionally scaled and/or cropped HTML img or canvas element. It also provides a method to parse image meta data to extract Exif tags and thumbnails and to restore the complete image header after resizing.">
2222
<meta name="viewport" content="width=device-width, initial-scale=1.0">
23+
<!-- Jcrop is not required by JavaScript Load Image, but included for the demo -->
24+
<link rel="stylesheet" href="css/vendor/jquery.Jcrop.css">
2325
<link rel="stylesheet" href="css/demo.css">
2426
</head>
2527
<body>
@@ -34,11 +36,16 @@ <h1>JavaScript Load Image Demo</h1>
3436
<li><a href="test/">Test</a></li>
3537
<li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
3638
</ul>
39+
<br>
3740
<h2>Select an image file</h2>
3841
<p><input type="file" id="file-input"></p>
3942
<p>Or <strong>drag &amp; drop</strong> an image file onto this webpage.</p>
4043
<br>
4144
<h2>Result</h2>
45+
<p id="actions" style="display:none;">
46+
<button type="button" id="edit">Edit</button>
47+
<button type="button" id="crop">Crop</button>
48+
</p>
4249
<div id="result" class="result">
4350
<p>This demo works only in browsers with support for the <a href="https://developer.mozilla.org/en/DOM/window.URL">URL</a> or <a href="https://developer.mozilla.org/en/DOM/FileReader">FileReader</a> API.</p>
4451
</div>
@@ -51,11 +58,13 @@ <h2>Exif meta data</h2>
5158
<br>
5259
<script src="js/load-image.js"></script>
5360
<script src="js/load-image-ios.js"></script>
61+
<script src="js/load-image-orientation.js"></script>
5462
<script src="js/load-image-meta.js"></script>
5563
<script src="js/load-image-exif.js"></script>
5664
<script src="js/load-image-exif-map.js"></script>
57-
<!-- jQuery is not required by JavaScript Load Image, but included for the demo -->
65+
<!-- jQuery and Jcrop are not required by JavaScript Load Image, but included for the demo -->
5866
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
67+
<script src="js/vendor/jquery.Jcrop.js"></script>
5968
<script src="js/demo.js"></script>
6069
</body>
6170
</html>

0 commit comments

Comments
 (0)