Skip to content

Commit 9a62f4c

Browse files
blueimpblueimp
committed
Return the img element or FileReader object to allow aborting the image load.
1 parent dbe0cb3 commit 9a62f4c

5 files changed

Lines changed: 36 additions & 16 deletions

File tree

‎README.md‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,24 +30,39 @@ The JavaScript Load Image function has zero dependencies.
3030
## API
3131
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. "http://example.org/image.png") as first argument.
3232

33-
It returns *true* if the browser supports the required APIs for loading the image file.
34-
This is true for all browsers when passing an image URL, else it is true if the browser supports the [URL](https://developer.mozilla.org/en/DOM/window.URL) or [FileReader](https://developer.mozilla.org/en/DOM/FileReader) API:
33+
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**.
34+
It always returns a HTML **img** element when passing an image URL:
3535

3636
```js
3737
document.getElementById('file-input').onchange = function (e) {
38-
var isSupported = window.loadImage(
38+
var loadingImage = window.loadImage(
3939
e.target.files[0],
4040
function (img) {
4141
document.body.appendChild(img);
4242
},
4343
{maxWidth: 600}
4444
);
45-
if (!isSupported) {
45+
if (!loadingImage) {
4646
// Alternative code ...
4747
}
4848
};
4949
```
5050

51+
The **img** element or [FileReader](https://developer.mozilla.org/en/DOM/FileReader) object returned by the **loadImage()** function allows to abort the loading process by setting the **onload** and **onerror** event handlers to null:
52+
53+
```js
54+
document.getElementById('file-input').onchange = function (e) {
55+
var loadingImage = window.loadImage(
56+
e.target.files[0],
57+
function (img) {
58+
document.body.appendChild(img);
59+
},
60+
{maxWidth: 600}
61+
);
62+
loadingImage.onload = loadingImage.onerror = null;
63+
};
64+
```
65+
5166
The second argument must be a **callback** function, which is called when the image has been loaded or an error occurred while loading the image. The callback function is passed one argument, which is either a HTML **img** element, a [canvas](https://developer.mozilla.org/en/HTML/Canvas) element, or an [Event](https://developer.mozilla.org/en/DOM/event) object of type "**error**":
5267

5368
```js

‎load-image.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* JavaScript Load Image 1.0
2+
* JavaScript Load Image 1.1
33
* https://github.com/blueimp/JavaScript-Load-Image
44
*
55
* Copyright 2011, Sebastian Tschan
@@ -37,7 +37,7 @@
3737
};
3838
if (url) {
3939
img.src = url;
40-
return true;
40+
return img;
4141
} else {
4242
return loadImage.readFile(file, function (url) {
4343
img.src = url;
@@ -99,7 +99,7 @@
9999
callback(e.target.result);
100100
};
101101
fileReader.readAsDataURL(file);
102-
return true;
102+
return fileReader;
103103
}
104104
return false;
105105
};

‎load-image.min.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,5 @@
1212
},
1313
"bugs": "https://github.com/blueimp/JavaScript-Load-Image/issues",
1414
"main": "load-image",
15-
"version": "1.0.0"
15+
"version": "1.1.0"
1616
}

‎test/test.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* JavaScript Load Image Test 1.0
2+
* JavaScript Load Image Test 1.1
33
* https://github.com/blueimp/JavaScript-Load-Image
44
*
55
* Copyright 2011, Sebastian Tschan
@@ -25,6 +25,11 @@
2525

2626
$.module('Loading');
2727

28+
$.test('Return the img element or FileReader object to allow aborting the image load', function () {
29+
var img = $.loadImage(blob, function () {});
30+
$.strictEqual(img && typeof img.onload, 'function');
31+
});
32+
2833
$.asyncTest('Load image url', function () {
2934
$.ok($.loadImage(imageUrl, function (img) {
3035
$.start();
@@ -41,7 +46,7 @@
4146
}));
4247
});
4348

44-
$.asyncTest('Return image loading error', function () {
49+
$.asyncTest('Return image loading error to callback', function () {
4550
$.ok($.loadImage('404', function (img) {
4651
$.start();
4752
$.ok(img instanceof $.Event);
@@ -85,23 +90,23 @@
8590

8691
$.module('Canvas');
8792

88-
$.asyncTest('Return img element if options.canvas is not true', function () {
93+
$.asyncTest('Return img element to callback if options.canvas is not true', function () {
8994
$.ok($.loadImage(blob, function (img) {
9095
$.start();
9196
$.ok(!img.getContext);
9297
$.strictEqual(img.nodeName.toLowerCase(), 'img');
9398
}));
9499
});
95100

96-
$.asyncTest('Return canvas element if options.canvas is true', function () {
101+
$.asyncTest('Return canvas element to callback if options.canvas is true', function () {
97102
$.ok($.loadImage(blob, function (img) {
98103
$.start();
99104
$.ok(img.getContext);
100105
$.strictEqual(img.nodeName.toLowerCase(), 'canvas');
101106
}, {canvas: true}));
102107
});
103108

104-
$.asyncTest('Return scaled canvas element', function () {
109+
$.asyncTest('Return scaled canvas element to callback', function () {
105110
$.ok($.loadImage(blob, function (img) {
106111
$.start();
107112
$.ok(img.getContext);

0 commit comments

Comments
 (0)