Skip to content

Commit 9803142

Browse files
blueimpblueimp
committed
Added contain and cover options. Closes blueimp#30.
1 parent 75eb5b4 commit 9803142

File tree

12 files changed

+180
-112
lines changed

12 files changed

+180
-112
lines changed

‎README.md‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,15 @@ The optional third argument to **loadImage()** is a map of options:
117117
* **maxHeight**: Defines the maximum height of the img/canvas element.
118118
* **minWidth**: Defines the minimum width of the img/canvas element.
119119
* **minHeight**: Defines the minimum height of the img/canvas element.
120-
* **crop**: Defines if the canvas element should be cropped to the maxWidth/maxHeight constraints.
121-
* **orientation**: Allows to transform the canvas coordinates according to the EXIF orientation specification.
122-
* **canvas**: Defines if the returned element should be a [canvas](https://developer.mozilla.org/en/HTML/Canvas) element.
120+
* **contain**: Scales the image up/down to contain it in the max dimensions if set to *true*.
121+
This emulates the CSS feature [background-image: contain](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain).
122+
* **cover**: Scales the image up/down to cover the max dimensions with the image dimensions if set to *true*.
123+
This emulates the CSS feature [background-image: cover](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#cover).
124+
* **crop**: Crops the image to the maxWidth/maxHeight constraints if set to *true*.
125+
This feature assumes *canvas: true*.
126+
* **orientation**: Allows to transform the canvas coordinates according to the EXIF orientation specification.
127+
This feature assumes *canvas: true*.
128+
* **canvas**: Returns the image as [canvas](https://developer.mozilla.org/en/HTML/Canvas) element if set to *true*.
123129
* **crossOrigin**: Sets the crossOrigin property on the img element for loading [CORS enabled images](https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image).
124130
* **noRevoke**: By default, the [created object URL](https://developer.mozilla.org/en/DOM/window.URL.createObjectURL) is revoked after the image has been loaded, except when this option is set to *true*.
125131

@@ -136,8 +142,7 @@ loadImage(
136142
maxHeight: 300,
137143
minWidth: 100,
138144
minHeight: 50,
139-
canvas: true,
140-
noRevoke: true
145+
canvas: true
141146
}
142147
);
143148
```

‎bower.json‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "blueimp-load-image",
3-
"version": "1.7.3",
3+
"version": "1.8.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": [
@@ -45,5 +45,11 @@
4545
"url": "http://www.opensource.org/licenses/MIT"
4646
}
4747
],
48-
"main": "js/load-image.js"
48+
"main": [
49+
"./js/load-image.js",
50+
"./js/load-image-ios.js",
51+
"./js/load-image-meta.js",
52+
"./js/load-image-exif.js",
53+
"./js/load-image-exif-map.js"
54+
]
4955
}

‎css/demo.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* JavaScript Load Image Demo CSS 1.7.3
2+
* JavaScript Load Image Demo CSS 1.8.0
33
* https://github.com/blueimp/JavaScript-Load-Image
44
*
55
* Copyright 2013, Sebastian Tschan

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE HTML>
22
<!--
33
/*
4-
* JavaScript Load Image Demo 1.7.3
4+
* JavaScript Load Image Demo 1.8.0
55
* https://github.com/blueimp/JavaScript-Load-Image
66
*
77
* Copyright 2011, Sebastian Tschan

‎js/demo.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* JavaScript Load Image Demo JS 1.7.3
2+
* JavaScript Load Image Demo JS 1.8.0
33
* https://github.com/blueimp/JavaScript-Load-Image
44
*
55
* Copyright 2013, Sebastian Tschan

‎js/load-image-exif.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* JavaScript Load Image Exif Parser 1.0
2+
* JavaScript Load Image Exif Parser 1.0.0
33
* https://github.com/blueimp/JavaScript-Load-Image
44
*
55
* Copyright 2013, Sebastian Tschan

‎js/load-image-ios.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* JavaScript Load Image iOS scaling fixes 1.0
2+
* JavaScript Load Image iOS scaling fixes 1.0.0
33
* https://github.com/blueimp/JavaScript-Load-Image
44
*
55
* Copyright 2013, Sebastian Tschan

‎js/load-image.js‎

Lines changed: 31 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* JavaScript Load Image 1.7
2+
* JavaScript Load Image 1.8.0
33
* https://github.com/blueimp/JavaScript-Load-Image
44
*
55
* Copyright 2011, Sebastian Tschan
@@ -174,7 +174,26 @@
174174
minHeight,
175175
destWidth,
176176
destHeight,
177-
scale;
177+
scaleUp = function () {
178+
var scale = Math.max(
179+
(minWidth || destWidth) / destWidth,
180+
(minHeight || destHeight) / destHeight
181+
);
182+
if (scale > 1) {
183+
destWidth = Math.ceil(destWidth * scale);
184+
destHeight = Math.ceil(destHeight * scale);
185+
}
186+
},
187+
scaleDown = function () {
188+
var scale = Math.min(
189+
(maxWidth || destWidth) / destWidth,
190+
(maxHeight || destHeight) / destHeight
191+
);
192+
if (scale < 1) {
193+
destWidth = Math.ceil(destWidth * scale);
194+
destHeight = Math.ceil(destHeight * scale);
195+
}
196+
};
178197
if (useCanvas && options.orientation > 4) {
179198
maxWidth = options.maxHeight;
180199
maxHeight = options.maxWidth;
@@ -197,23 +216,18 @@
197216
sourceX = (width - sourceWidth) / 2;
198217
}
199218
} else {
219+
if (options.contain || options.cover) {
220+
minWidth = maxWidth = maxWidth || minWidth;
221+
minHeight = maxHeight = maxHeight || minHeight;
222+
}
200223
destWidth = width;
201224
destHeight = height;
202-
scale = Math.max(
203-
(minWidth || destWidth) / destWidth,
204-
(minHeight || destHeight) / destHeight
205-
);
206-
if (scale > 1) {
207-
destWidth = Math.ceil(destWidth * scale);
208-
destHeight = Math.ceil(destHeight * scale);
209-
}
210-
scale = Math.min(
211-
(maxWidth || destWidth) / destWidth,
212-
(maxHeight || destHeight) / destHeight
213-
);
214-
if (scale < 1) {
215-
destWidth = Math.ceil(destWidth * scale);
216-
destHeight = Math.ceil(destHeight * scale);
225+
if (options.cover) {
226+
scaleDown();
227+
scaleUp();
228+
} else {
229+
scaleUp();
230+
scaleDown();
217231
}
218232
}
219233
if (useCanvas) {

0 commit comments

Comments
 (0)