@@ -64,15 +64,15 @@ Or alternatively, choose which components you want to include:
64
64
In your application code, use the ** loadImage()** function like this:
65
65
66
66
``` js
67
- document .getElementById (" file-input" ).onchange = function (e ) {
67
+ document .getElementById (' file-input' ).onchange = function (e ) {
68
68
loadImage (
69
69
e .target .files [0 ],
70
- function (img ) {
71
- document .body .appendChild (img);
70
+ function (img ) {
71
+ document .body .appendChild (img)
72
72
},
73
73
{ maxWidth: 600 } // Options
74
- );
75
- };
74
+ )
75
+ }
76
76
```
77
77
78
78
### Image scaling
84
84
var scaledImage = loadImage .scale (
85
85
img, // img or canvas element
86
86
{ maxWidth: 600 }
87
- );
87
+ )
88
88
```
89
89
90
90
## Requirements
@@ -112,18 +112,18 @@ It always returns a HTML
112
112
passing an image URL:
113
113
114
114
``` js
115
- document .getElementById (" file-input" ).onchange = function (e ) {
115
+ document .getElementById (' file-input' ).onchange = function (e ) {
116
116
var loadingImage = loadImage (
117
117
e .target .files [0 ],
118
- function (img ) {
119
- document .body .appendChild (img);
118
+ function (img ) {
119
+ document .body .appendChild (img)
120
120
},
121
121
{ maxWidth: 600 }
122
- );
122
+ )
123
123
if (! loadingImage) {
124
124
// Alternative code ...
125
125
}
126
- };
126
+ }
127
127
```
128
128
129
129
The ** img** element or
@@ -132,16 +132,16 @@ the **loadImage()** function allows to abort the loading process by setting the
132
132
** onload** and ** onerror** event handlers to null:
133
133
134
134
``` js
135
- document .getElementById (" file-input" ).onchange = function (e ) {
135
+ document .getElementById (' file-input' ).onchange = function (e ) {
136
136
var loadingImage = loadImage (
137
137
e .target .files [0 ],
138
- function (img ) {
139
- document .body .appendChild (img);
138
+ function (img ) {
139
+ document .body .appendChild (img)
140
140
},
141
141
{ maxWidth: 600 }
142
- );
143
- loadingImage .onload = loadingImage .onerror = null ;
144
- };
142
+ )
143
+ loadingImage .onload = loadingImage .onerror = null
144
+ }
145
145
```
146
146
147
147
The second argument must be a ** callback** function, which is called when the
@@ -154,20 +154,20 @@ The second is on object with the original image dimensions as properties and
154
154
potentially additional [ meta data] ( #meta-data-parsing ) :
155
155
156
156
``` js
157
- var imageUrl = " https://example.org/image.png" ;
157
+ var imageUrl = ' https://example.org/image.png'
158
158
loadImage (
159
159
imageUrl,
160
- function (img , data ) {
161
- if (img .type === " error" ) {
162
- console .error (" Error loading image " + imageUrl);
160
+ function (img , data ) {
161
+ if (img .type === ' error' ) {
162
+ console .error (' Error loading image ' + imageUrl)
163
163
} else {
164
- document .body .appendChild (img);
165
- console .log (" Original image width: " , data .originalWidth );
166
- console .log (" Original image height: " , data .originalHeight );
164
+ document .body .appendChild (img)
165
+ console .log (' Original image width: ' , data .originalWidth )
166
+ console .log (' Original image height: ' , data .originalHeight )
167
167
}
168
168
},
169
169
{ maxWidth: 600 }
170
- );
170
+ )
171
171
```
172
172
173
173
## Options
@@ -242,8 +242,8 @@ They can be used the following way:
242
242
``` js
243
243
loadImage (
244
244
fileOrBlobOrUrl,
245
- function (img ) {
246
- document .body .appendChild (img);
245
+ function (img ) {
246
+ document .body .appendChild (img)
247
247
},
248
248
{
249
249
maxWidth: 600 ,
@@ -252,7 +252,7 @@ loadImage(
252
252
minHeight: 50 ,
253
253
canvas: true
254
254
}
255
- );
255
+ )
256
256
```
257
257
258
258
All settings are optional. By default, the image is returned as HTML ** img**
@@ -266,13 +266,13 @@ meta data automatically with the `meta` option:
266
266
``` js
267
267
loadImage (
268
268
fileOrBlobOrUrl,
269
- function (img , data ) {
270
- console .log (" Original image head: " , data .imageHead );
271
- console .log (" Exif data: " , data .exif ); // requires exif extension
272
- console .log (" IPTC data: " , data .iptc ); // requires iptc extension
269
+ function (img , data ) {
270
+ console .log (' Original image head: ' , data .imageHead )
271
+ console .log (' Exif data: ' , data .exif ) // requires exif extension
272
+ console .log (' IPTC data: ' , data .iptc ) // requires iptc extension
273
273
},
274
274
{ meta: true }
275
- );
275
+ )
276
276
```
277
277
278
278
The extension also provides the method ** loadImage.parseMetaData** , which can be
@@ -281,9 +281,9 @@ used the following way:
281
281
``` js
282
282
loadImage .parseMetaData (
283
283
fileOrBlob,
284
- function (data ) {
284
+ function (data ) {
285
285
if (! data .imageHead ) {
286
- return ;
286
+ return
287
287
}
288
288
// Combine data.imageHead with the image body of a resized file
289
289
// to create scaled images with the original image meta data, e.g.:
@@ -295,13 +295,13 @@ loadImage.parseMetaData(
295
295
loadImage .blobSlice .call (resizedImageBlob, 20 )
296
296
],
297
297
{ type: resizedImageBlob .type }
298
- );
298
+ )
299
299
},
300
300
{
301
301
maxMetaDataSize: 262144 ,
302
302
disableImageHead: false
303
303
}
304
- );
304
+ )
305
305
```
306
306
307
307
** Note:**
@@ -322,14 +322,14 @@ Exif data could be found in the given image.
322
322
The ** exif** object stores the parsed Exif tags:
323
323
324
324
``` js
325
- var orientation = data .exif [0x0112 ];
325
+ var orientation = data .exif [0x0112 ]
326
326
```
327
327
328
328
It also provides an ** exif.get()** method to retrieve the tag value via the
329
329
tag's mapped name:
330
330
331
331
``` js
332
- var orientation = data .exif .get (" Orientation" );
332
+ var orientation = data .exif .get (' Orientation' )
333
333
```
334
334
335
335
By default, the only available mapped names are ** Orientation** and
@@ -339,10 +339,10 @@ become available, as well as two additional methods, **exif.getText()** and
339
339
** exif.getAll()** :
340
340
341
341
``` js
342
- var flashText = data .exif .getText (" Flash" ); // e.g.: 'Flash fired, auto mode',
342
+ var flashText = data .exif .getText (' Flash' ) // e.g.: 'Flash fired, auto mode',
343
343
344
344
// A map of all parsed tags with their mapped names/text as keys/values:
345
- var allTags = data .exif .getAll ();
345
+ var allTags = data .exif .getAll ()
346
346
```
347
347
348
348
The Exif parser also adds additional options for the parseMetaData method, to
@@ -361,14 +361,14 @@ IPTC data could be found in the given image.
361
361
The ** iptc** object stores the parsed IPTC tags:
362
362
363
363
``` js
364
- var objectname = data .iptc [0x5 ];
364
+ var objectname = data .iptc [0x5 ]
365
365
```
366
366
367
367
It also provides an ** iptc.get()** method to retrieve the tag value via the
368
368
tag's mapped name:
369
369
370
370
``` js
371
- var objectname = data .iptc .get (" ObjectName" );
371
+ var objectname = data .iptc .get (' ObjectName' )
372
372
```
373
373
374
374
By default, the only available mapped names are ** ObjectName** .
@@ -377,10 +377,10 @@ become available, as well as two additional methods, **iptc.getText()** and
377
377
** iptc.getAll()** :
378
378
379
379
``` js
380
- var keywords = data .iptc .getText (" Keywords" ); // e.g.: ['Weather','Sky']
380
+ var keywords = data .iptc .getText (' Keywords' ) // e.g.: ['Weather','Sky']
381
381
382
382
// A map of all parsed tags with their mapped names/text as keys/values:
383
- var allTags = data .iptc .getAll ();
383
+ var allTags = data .iptc .getAll ()
384
384
```
385
385
386
386
The IPTC parser also adds additional options for the parseMetaData method, to
0 commit comments