158 lines
5.7 KiB
HTML
158 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
/*
|
|
* JavaScript Load Image Demo
|
|
* https://github.com/blueimp/JavaScript-Load-Image
|
|
*
|
|
* Copyright 2011, Sebastian Tschan
|
|
* https://blueimp.net
|
|
*
|
|
* Licensed under the MIT license:
|
|
* https://opensource.org/licenses/MIT
|
|
*/
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<!--[if IE]>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<![endif]-->
|
|
<meta charset="utf-8" />
|
|
<title>JavaScript Load Image</title>
|
|
<meta
|
|
name="description"
|
|
content="JavaScript Load Image is a library to load images provided as File or Blob objects or via URL. It returns an optionally scaled, cropped or rotated HTML img or canvas element. It also provides methods to parse image metadata to extract IPTC and Exif tags as well as embedded thumbnail images, to overwrite the Exif Orientation value and to restore the complete image header after resizing."
|
|
/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<!--
|
|
Jcrop is not required by JavaScript Load Image, but included for the demo
|
|
-->
|
|
<link rel="stylesheet" href="css/vendor/jquery.Jcrop.css" />
|
|
<link rel="stylesheet" href="css/demo.css" />
|
|
<!--[if lt IE 9]>
|
|
<script>
|
|
// Basic HTML5 elements support:
|
|
'figure figcaption'.replace(/\w+/g, function (n) {
|
|
document.createElement(n)
|
|
})
|
|
</script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<h1>JavaScript Load Image Demo</h1>
|
|
<p>
|
|
<a href="https://github.com/blueimp/JavaScript-Load-Image"
|
|
>JavaScript Load Image</a
|
|
>
|
|
is a library to load images provided as
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/File">File</a>
|
|
or
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob">Blob</a>
|
|
objects or via URL.<br />
|
|
It returns an optionally <strong>scaled</strong>,
|
|
<strong>cropped</strong> or <strong>rotated</strong> HTML
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img"
|
|
>img</a
|
|
>
|
|
or
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API"
|
|
>canvas</a
|
|
>
|
|
element.
|
|
</p>
|
|
<p>
|
|
It also provides methods to parse image metadata to extract
|
|
<a href="https://iptc.org/standards/photo-metadata/">IPTC</a> and
|
|
<a href="https://en.wikipedia.org/wiki/Exif">Exif</a> tags as well as
|
|
embedded thumbnail images, to overwrite the Exif Orientation value and to
|
|
restore the complete image header after resizing.
|
|
</p>
|
|
<ul id="navigation">
|
|
<li>
|
|
<a href="https://github.com/blueimp/JavaScript-Load-Image/releases"
|
|
>Download</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/blob/master/README.md"
|
|
>Documentation</a
|
|
>
|
|
</li>
|
|
<li><a href="test/">Test</a></li>
|
|
<li><a href="https://blueimp.net">© Sebastian Tschan</a></li>
|
|
</ul>
|
|
<h2>Select an image file</h2>
|
|
<p>
|
|
<input type="file" id="file-input" />
|
|
</p>
|
|
<p>
|
|
<label for="url">Or enter an image URL into the following field:</label>
|
|
<input type="url" id="url" placeholder="Image URL" />
|
|
</p>
|
|
<p>Or <strong>drag & drop</strong> an image file onto this webpage.</p>
|
|
<h3>Options</h3>
|
|
<p>
|
|
<label for="orientation">Orientation:</label>
|
|
<select id="orientation">
|
|
<option value="-1">undefined: Browser default</option>
|
|
<option value="0" selected>true: Automatic</option>
|
|
<option value="1">1: Original</option>
|
|
<option value="2">2: Horizontal flip</option>
|
|
<option value="3">3: Rotate 180° CCW</option>
|
|
<option value="4">4: Vertical flip</option>
|
|
<option value="5">5: Vertical flip + Rotate 90° CW</option>
|
|
<option value="6">6: Rotate 90° CW</option>
|
|
<option value="7">7: Horizontal flip + Rotate 90° CW</option>
|
|
<option value="8">8: Rotate 90° CCW</option>
|
|
</select>
|
|
</p>
|
|
<p>
|
|
<input type="checkbox" id="image-smoothing" checked />
|
|
<label for="image-smoothing">Image smoothing</label>
|
|
</p>
|
|
<h2>Result</h2>
|
|
<p id="actions" style="display: none;">
|
|
<button type="button" id="edit">Edit</button>
|
|
<button type="submit" id="crop">Crop</button>
|
|
<button type="reset" id="cancel">Cancel</button>
|
|
</p>
|
|
<figure id="result">
|
|
<figcaption style="display: none;">
|
|
Loading images from File objects requires support for the
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/URL">URL</a>
|
|
or
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader"
|
|
>FileReader</a
|
|
>
|
|
API.
|
|
</figcaption>
|
|
</figure>
|
|
<div id="meta" style="display: none;">
|
|
<h3>Image metadata</h3>
|
|
<figure id="thumbnail" style="display: none;"></figure>
|
|
</div>
|
|
<script src="js/vendor/canvas-to-blob.js"></script>
|
|
<script src="js/load-image.js"></script>
|
|
<script src="js/load-image-scale.js"></script>
|
|
<script src="js/load-image-meta.js"></script>
|
|
<script src="js/load-image-fetch.js"></script>
|
|
<script src="js/load-image-orientation.js"></script>
|
|
<script src="js/load-image-exif.js"></script>
|
|
<script src="js/load-image-exif-map.js"></script>
|
|
<script src="js/load-image-iptc.js"></script>
|
|
<script src="js/load-image-iptc-map.js"></script>
|
|
<!--
|
|
jQuery and Jcrop are not required by JavaScript Load Image,
|
|
but included for the demo
|
|
-->
|
|
<script src="js/vendor/jquery.js"></script>
|
|
<script src="js/vendor/jquery.Jcrop.js"></script>
|
|
<script src="js/demo/demo.js"></script>
|
|
</body>
|
|
</html>
|