You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
JavaScript Load Image is a library to load images provided as File or Blob objects or via URL.
27
-
It returns an optionally scaled and/or cropped HTML img or canvas element via an asynchronous callback.
26
+
JavaScript Load Image is a library to load images provided as File or Blob objects or via URL.
27
+
It returns an optionally scaled and/or cropped HTML img or canvas element via an asynchronous callback.
28
28
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.
29
29
30
30
## Setup
@@ -80,7 +80,7 @@ However, JavaScript Load Image is a very suitable complement to the [Canvas to B
80
80
## API
81
81
The **loadImage()** function accepts a [File](https://developer.mozilla.org/en/DOM/File) or [Blob](https://developer.mozilla.org/en/DOM/Blob) object or a simple image URL (e.g. `'https://example.org/image.png'`) as first argument.
82
82
83
-
If a [File](https://developer.mozilla.org/en/DOM/File) or [Blob](https://developer.mozilla.org/en/DOM/Blob) is passed as parameter, it returns a HTML **img** element if the browser supports the [URL](https://developer.mozilla.org/en/DOM/window.URL) API or a [FileReader](https://developer.mozilla.org/en/DOM/FileReader) object if supported, or **false**.
83
+
If a [File](https://developer.mozilla.org/en/DOM/File) or [Blob](https://developer.mozilla.org/en/DOM/Blob) is passed as parameter, it returns a HTML **img** element if the browser supports the [URL](https://developer.mozilla.org/en/DOM/window.URL) API or a [FileReader](https://developer.mozilla.org/en/DOM/FileReader) object if supported, or **false**.
84
84
It always returns a HTML [img](https://developer.mozilla.org/en/docs/HTML/Element/Img) element when passing an image URL:
85
85
86
86
```js
@@ -137,27 +137,27 @@ The optional third argument to **loadImage()** is a map of options:
137
137
***maxHeight**: Defines the maximum height of the img/canvas element.
138
138
***minWidth**: Defines the minimum width of the img/canvas element.
139
139
***minHeight**: Defines the minimum height of the img/canvas element.
140
-
***sourceWidth**: The width of the sub-rectangle of the source image to draw into the destination canvas.
140
+
***sourceWidth**: The width of the sub-rectangle of the source image to draw into the destination canvas.
141
141
Defaults to the source image width and requires *canvas: true*.
142
-
***sourceHeight**: The height of the sub-rectangle of the source image to draw into the destination canvas.
142
+
***sourceHeight**: The height of the sub-rectangle of the source image to draw into the destination canvas.
143
143
Defaults to the source image height and requires *canvas: true*.
144
-
***top**: The top margin of the sub-rectangle of the source image.
144
+
***top**: The top margin of the sub-rectangle of the source image.
145
145
Defaults to *0* and requires *canvas: true*.
146
-
***right**: The right margin of the sub-rectangle of the source image.
146
+
***right**: The right margin of the sub-rectangle of the source image.
147
147
Defaults to *0* and requires *canvas: true*.
148
-
***bottom**: The bottom margin of the sub-rectangle of the source image.
148
+
***bottom**: The bottom margin of the sub-rectangle of the source image.
149
149
Defaults to *0* and requires *canvas: true*.
150
-
***left**: The left margin of the sub-rectangle of the source image.
150
+
***left**: The left margin of the sub-rectangle of the source image.
151
151
Defaults to *0* and requires *canvas: true*.
152
-
***contain**: Scales the image up/down to contain it in the max dimensions if set to *true*.
152
+
***contain**: Scales the image up/down to contain it in the max dimensions if set to *true*.
153
153
This emulates the CSS feature [background-image: contain](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain).
154
-
***cover**: Scales the image up/down to cover the max dimensions with the image dimensions if set to *true*.
154
+
***cover**: Scales the image up/down to cover the max dimensions with the image dimensions if set to *true*.
155
155
This emulates the CSS feature [background-image: cover](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#cover).
156
-
***aspectRatio**: Crops the image to the given aspect ratio (e.g. `16/9`).
156
+
***aspectRatio**: Crops the image to the given aspect ratio (e.g. `16/9`).
157
157
This feature assumes *crop: true*.
158
-
***crop**: Crops the image to the maxWidth/maxHeight constraints if set to *true*.
158
+
***crop**: Crops the image to the maxWidth/maxHeight constraints if set to *true*.
159
159
This feature assumes *canvas: true*.
160
-
***orientation**: Allows to transform the canvas coordinates according to the EXIF orientation specification.
160
+
***orientation**: Allows to transform the canvas coordinates according to the EXIF orientation specification.
161
161
This feature assumes *canvas: true*.
162
162
***canvas**: Returns the image as [canvas](https://developer.mozilla.org/en/HTML/Canvas) element if set to *true*.
163
163
***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).
@@ -184,7 +184,7 @@ loadImage(
184
184
All settings are optional. By default, the image is returned as HTML **img** element without any image size restrictions.
185
185
186
186
## Meta data parsing
187
-
If the Load Image Meta extension is included, it is also possible to parse image meta data.
187
+
If the Load Image Meta extension is included, it is also possible to parse image meta data.
188
188
The extension provides the method **loadImage.parseMetaData**, which can be used the following way:
189
189
190
190
```js
@@ -212,11 +212,11 @@ loadImage.parseMetaData(
212
212
213
213
The third argument is an options object which defines the maximum number of bytes to parse for the image meta data, allows to disable the imageHead creation and is also passed along to segment parsers registered via loadImage extensions, e.g. the Exif parser.
214
214
215
-
**Note:**
215
+
**Note:**
216
216
Blob objects of resized images can be created via [canvas.toBlob()](https://github.com/blueimp/JavaScript-Canvas-to-Blob).
217
217
218
218
### Exif parser
219
-
If you include the Load Image Exif Parser extension, the **parseMetaData** callback **data** contains the additional property **exif** if Exif data could be found in the given image.
219
+
If you include the Load Image Exif Parser extension, the **parseMetaData** callback **data** contains the additional property **exif** if Exif data could be found in the given image.
220
220
The **exif** object stores the parsed Exif tags:
221
221
222
222
```js
@@ -229,7 +229,7 @@ It also provides an **exif.get()** method to retrieve the tag value via the tag'
229
229
var orientation =data.exif.get('Orientation');
230
230
```
231
231
232
-
By default, the only available mapped names are **Orientation** and **Thumbnail**.
232
+
By default, the only available mapped names are **Orientation** and **Thumbnail**.
233
233
If you also include the Load Image Exif Map library, additional tag mappings become available, as well as two additional methods, **exif.getText()** and **exif.getAll()**:
234
234
235
235
```js
@@ -247,7 +247,7 @@ The Exif parser also adds additional options for the parseMetaData method, to di
247
247
***disableExifGps**: Disables parsing of the Exif GPS Info IFD.
248
248
249
249
## iOS scaling fixes
250
-
Scaling megapixel images in iOS (iPhone, iPad, iPod) can result in distorted (squashed) images.
250
+
Scaling megapixel images in iOS (iPhone, iPad, iPod) can result in distorted (squashed) images.
251
251
The Load Image iOS scaling fixes extension resolves these issues.
0 commit comments