<html lang="en">

<meta charset="utf-8">

<title>JavaScript Load Image</title>

<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.">

<meta name="viewport" content="width=device-width">

<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">

<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">

<div class="navbar navbar-fixed-top">

<div class="navbar-inner">

<div class="container">

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</a>

<a class="brand" href="https://github.com/blueimp/JavaScript-Load-Image">JavaScript Load Image</a>

<div class="nav-collapse">

<ul class="nav">

<li class="active"><a href="#">Demo</a></li>

<li><a href="https://github.com/blueimp/JavaScript-Load-Image/downloads">Downloads</a></li>

<li><a href="https://github.com/blueimp/JavaScript-Load-Image">Source Code</a></li>

<li><a href="https://github.com/blueimp/JavaScript-Load-Image">Documentation</a></li>

<li><a href="https://github.com/blueimp/JavaScript-Load-Image/issues">Issues</a></li>

<li><a href="test/">Test</a></li>

<li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>

</ul>

</div>

</div>

</div>

<div class="container">

<div class="page-header">

<h1>JavaScript Load Image Demo</h1>

</div>

<blockquote>

<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>

It returns an optionally scaled HTML <strong>img</strong> or <strong>canvas</strong> element.</p>

</blockquote>

<br>

<div class="row">

<div class="span5">

<h2>Select an image file</h2>

<p><input type="file" id="file-input"></p>

<p><span class="label label-info">Notice</span> Or <strong>drag &amp; drop</strong> an image file onto this webpage.</p>

</div>

<div class="span7">

<h2>Result</h2>

<div class="well" id="result"><p><span class="label label-warning">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.</p></div>

</div>

</div>

<script src="load-image.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

(function ($) {

'use strict';

var result = $('#result'),

load = function (e) {

e = e.originalEvent;

e.preventDefault();

if (!window.loadImage(

(e.dataTransfer || e.target).files[0],

function (img) {

if (!(img.src || img instanceof HTMLCanvasElement)) {

img = $(

'<span class="label label-important">Error</span>' +

' <span>Loading image file failed</span>'

);

}

result.children().replaceWith(img);

},

{

maxWidth: result.children().outerWidth(),

canvas: true

}

)) {

result.children().replaceWith(

$(

'<span class="label label-important">Error</span>' +

' <span>Your browser does not support the URL or FileReader API.</span>'

)

);

}

};

$(document)

.on('dragover', function (e) {

e = e.originalEvent;

e.preventDefault();

e.dataTransfer.dropEffect = 'copy';

})

.on('drop', load);

$('#file-input').on('change', load);

</body>