Skip to content

Commit dbe0cb3

Browse files
blueimpblueimp
committed
Initial commit.
0 parents  commit dbe0cb3

File tree

8 files changed

+586
-0
lines changed

8 files changed

+586
-0
lines changed

‎README.md

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
# JavaScript Load Image
2+
3+
## Demo
4+
[JavaScript Load Image Demo](http://blueimp.github.com/JavaScript-Load-Image/)
5+
6+
## Usage
7+
Include the (minified) JavaScript Load Image script in your HTML markup:
8+
9+
```html
10+
<script src="load-image.min.js"></script>
11+
```
12+
13+
In your application code, use the **loadImage()** function like this:
14+
15+
```js
16+
document.getElementById('file-input').onchange = function (e) {
17+
window.loadImage(
18+
e.target.files[0],
19+
function (img) {
20+
document.body.appendChild(img);
21+
},
22+
{maxWidth: 600}
23+
);
24+
};
25+
```
26+
27+
## Requirements
28+
The JavaScript Load Image function has zero dependencies.
29+
30+
## API
31+
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.
32+
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:
35+
36+
```js
37+
document.getElementById('file-input').onchange = function (e) {
38+
var isSupported = window.loadImage(
39+
e.target.files[0],
40+
function (img) {
41+
document.body.appendChild(img);
42+
},
43+
{maxWidth: 600}
44+
);
45+
if (!isSupported) {
46+
// Alternative code ...
47+
}
48+
};
49+
```
50+
51+
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**":
52+
53+
```js
54+
var imageUrl = "http://example.org/image.png";
55+
window.loadImage(
56+
imageUrl,
57+
function (img) {
58+
if(img.type === "error") {
59+
console.log("Error loading image " + imageUrl);
60+
} else {
61+
document.body.appendChild(img);
62+
}
63+
},
64+
{maxWidth: 600}
65+
);
66+
```
67+
68+
The optional third argument is a map of options:
69+
70+
* **maxWidth**: Defines the maximum width of the img/canvas element.
71+
* **maxHeight**: Defines the maximum height of the img/canvas element.
72+
* **minWidth**: Defines the minimum width of the img/canvas element.
73+
* **minHeight**: Defines the minimum height of the img/canvas element.
74+
* **canvas**: Defines if the returned element should be a [canvas](https://developer.mozilla.org/en/HTML/Canvas) element.
75+
76+
They can be used the following way:
77+
78+
```js
79+
window.loadImage(
80+
fileOrBlobOrUrl,
81+
function (img) {
82+
document.body.appendChild(img);
83+
},
84+
{
85+
maxWidth: 600,
86+
maxHeight: 300,
87+
minWidth: 100,
88+
minHeight: 50,
89+
canvas: true
90+
}
91+
);
92+
```
93+
94+
All options are optional. By default, the image is returned as HTML **img** element without any image size restrictions.
95+
96+
## License
97+
The JavaScript Load Image script is released under the [MIT license](http://creativecommons.org/licenses/MIT/).

‎index.html

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE HTML>
2+
<!--
3+
/*
4+
* JavaScript Load Image Demo 1.0
5+
* https://github.com/blueimp/JavaScript-Load-Image
6+
*
7+
* Copyright 2011, Sebastian Tschan
8+
* https://blueimp.net
9+
*
10+
* Licensed under the MIT license:
11+
* http://creativecommons.org/licenses/MIT/
12+
*/
13+
-->
14+
<html lang="en">
15+
<head>
16+
<meta charset="utf-8">
17+
<title>JavaScript Load Image</title>
18+
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
19+
<style type="text/css">
20+
.page-header {
21+
background-color: #f5f5f5;
22+
padding: 80px 20px 10px;
23+
margin: 0 -20px 20px;
24+
border: 1px solid #DDD;
25+
-webkit-border-radius: 0 0 6px 6px;
26+
-moz-border-radius: 0 0 6px 6px;
27+
border-radius: 0 0 6px 6px;
28+
}
29+
</style>
30+
<!--[if lt IE 7]>
31+
<style type="text/css">
32+
.span6, .span10 {
33+
display: inline;
34+
float: left;
35+
margin-left: 20px;
36+
}
37+
.topbar {
38+
position: absolute;
39+
}
40+
.topbar ul, .topbar .container {
41+
padding-top: 10px;
42+
}
43+
.topbar li {
44+
display: inline;
45+
margin-right: 10px;
46+
}
47+
.topbar a:hover {
48+
color: #fff;
49+
}
50+
</style>
51+
<![endif]-->
52+
<meta name="description" content="JavaScript Load Image is a function to load images provided as File or Blob objects or via URL. It returns an optionally scaled HTML img or canvas element.">
53+
</head>
54+
<body>
55+
<div class="topbar">
56+
<div class="fill">
57+
<div class="container">
58+
<a class="brand" href="https://github.com/blueimp/JavaScript-Load-Image">JavaScript Load Image</a>
59+
<ul class="nav">
60+
<li class="active"><a href="#">Demo</a></li>
61+
<li><a href="https://github.com/blueimp/JavaScript-Load-Image/downloads">Downloads</a></li>
62+
<li><a href="https://github.com/blueimp/JavaScript-Load-Image">Source Code</a></li>
63+
<li><a href="https://github.com/blueimp/JavaScript-Load-Image">Documentation</a></li>
64+
<li><a href="https://github.com/blueimp/JavaScript-Load-Image/issues">Issues</a></li>
65+
<li><a href="test/">Test</a></li>
66+
<li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
67+
</ul>
68+
</div>
69+
</div>
70+
</div>
71+
<div class="container">
72+
<div class="page-header">
73+
<h1>JavaScript Load Image Demo</h1>
74+
<p><a href="https://developer.mozilla.org/en/JavaScript/">JavaScript</a> Load Image is a function to load images provided as <a href="https://developer.mozilla.org/en/DOM/File">File</a> or <a href="https://developer.mozilla.org/en/DOM/Blob">Blob</a> objects or via URL.<br>
75+
It returns an optionally scaled HTML <strong>img</strong> or <strong>canvas</strong> element.</p>
76+
</div>
77+
<div class="row">
78+
<div class="span6">
79+
<h2>Select an image file</h2>
80+
<p><input type="file" id="file-input"></p>
81+
<p>Or <strong>drag &amp; drop</strong> an image file onto this webpage.</p>
82+
</div>
83+
<div class="span10">
84+
<h2>Result</h2>
85+
<div class="well" id="result"><span><span class="label notice">Notice</span> 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.</span></div>
86+
</div>
87+
</div>
88+
</div>
89+
<script src="load-image.min.js"></script>
90+
<script>
91+
/*global window, document */
92+
(function () {
93+
'use strict';
94+
var result = document.getElementById('result'),
95+
load = function (e) {
96+
e.preventDefault();
97+
window.loadImage(
98+
(e.dataTransfer || e.target).files[0],
99+
function (img) {
100+
result.replaceChild(img, result.firstChild);
101+
},
102+
{
103+
maxWidth: 540,
104+
canvas: true
105+
}
106+
);
107+
};
108+
document.ondragover = function (e) {
109+
e.preventDefault();
110+
e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed = 'copy';
111+
};
112+
document.ondrop = load;
113+
document.getElementById('file-input').onchange = load;
114+
}());
115+
</script>
116+
</body>
117+
</html>

‎load-image.js

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
/*
2+
* JavaScript Load Image 1.0
3+
* https://github.com/blueimp/JavaScript-Load-Image
4+
*
5+
* Copyright 2011, Sebastian Tschan
6+
* https://blueimp.net
7+
*
8+
* Licensed under the MIT license:
9+
* http://creativecommons.org/licenses/MIT/
10+
*/
11+
12+
/*jslint nomen: true */
13+
/*global window, document, Blob, URL, webkitURL, FileReader, define */
14+
15+
(function ($) {
16+
'use strict';
17+
18+
// Loads an image for a given File object.
19+
// Invokes the callback with an img or optional canvas
20+
// element (if supported by the browser) as parameter:
21+
var loadImage = function (file, callback, options) {
22+
var img = document.createElement('img'),
23+
url,
24+
isFile;
25+
if (file instanceof Blob) {
26+
url = loadImage.createObjectURL(file);
27+
isFile = true;
28+
} else {
29+
url = file;
30+
}
31+
img.onerror = callback;
32+
img.onload = function () {
33+
if (isFile) {
34+
loadImage.revokeObjectURL(url);
35+
}
36+
callback(loadImage.scale(img, options));
37+
};
38+
if (url) {
39+
img.src = url;
40+
return true;
41+
} else {
42+
return loadImage.readFile(file, function (url) {
43+
img.src = url;
44+
});
45+
}
46+
},
47+
undef = 'undefined';
48+
49+
// Scales the given image (img HTML element)
50+
// using the given options.
51+
// Returns a canvas object if the canvas option is true
52+
// and the browser supports canvas, else the scaled image:
53+
loadImage.scale = function (img, options) {
54+
options = options || {};
55+
var canvas = document.createElement('canvas'),
56+
scale = Math.min(
57+
(options.maxWidth || img.width) / img.width,
58+
(options.maxHeight || img.height) / img.height
59+
);
60+
if (scale >= 1) {
61+
scale = Math.max(
62+
(options.minWidth || img.width) / img.width,
63+
(options.minHeight || img.height) / img.height
64+
);
65+
}
66+
img.width = parseInt(img.width * scale, 10);
67+
img.height = parseInt(img.height * scale, 10);
68+
if (!options.canvas || !canvas.getContext) {
69+
return img;
70+
}
71+
canvas.width = img.width;
72+
canvas.height = img.height;
73+
canvas.getContext('2d')
74+
.drawImage(img, 0, 0, img.width, img.height);
75+
return canvas;
76+
};
77+
78+
loadImage.createObjectURL = function (file) {
79+
var urlAPI = (typeof window.createObjectURL !== undef && window) ||
80+
(typeof URL !== undef && URL) ||
81+
(typeof webkitURL !== undef && webkitURL);
82+
return urlAPI ? urlAPI.createObjectURL(file) : false;
83+
};
84+
85+
loadImage.revokeObjectURL = function (url) {
86+
var urlAPI = (typeof window.revokeObjectURL !== undef && window) ||
87+
(typeof URL !== undef && URL) ||
88+
(typeof webkitURL !== undef && webkitURL);
89+
return urlAPI ? urlAPI.revokeObjectURL(url) : false;
90+
};
91+
92+
// Loads a given File object via FileReader interface,
93+
// invokes the callback with a data url:
94+
loadImage.readFile = function (file, callback) {
95+
if (typeof FileReader !== undef &&
96+
FileReader.prototype.readAsDataURL) {
97+
var fileReader = new FileReader();
98+
fileReader.onload = function (e) {
99+
callback(e.target.result);
100+
};
101+
fileReader.readAsDataURL(file);
102+
return true;
103+
}
104+
return false;
105+
};
106+
107+
if (typeof define !== undef && define.amd) {
108+
// Register as an AMD module:
109+
define('loadImage', function () {
110+
return loadImage;
111+
});
112+
} else {
113+
// Bind to the global (window) object:
114+
$.loadImage = loadImage;
115+
}
116+
}(this));

‎load-image.min.js

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

‎package.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "blueimp-load-image",
3+
"description": "JavaScript Load Image is a function to load images provided as File or Blob objects or via URL. It returns an optionally scaled HTML img or canvas element.",
4+
"homepage": "https://github.com/blueimp/JavaScript-Load-Image",
5+
"author": {
6+
"name": "Sebastian Tschan",
7+
"url": "https://blueimp.net"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git://github.com/blueimp/JavaScript-Load-Image.git"
12+
},
13+
"bugs": "https://github.com/blueimp/JavaScript-Load-Image/issues",
14+
"main": "load-image",
15+
"version": "1.0.0"
16+
}

0 commit comments

Comments
 (0)