Thanks to visit codestin.com
Credit goes to github.com

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

+7-2
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

+13
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

+2-1
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

+4-1
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

+165
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

+11-2
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)