Skip to content

Commit 137377b

Browse files
author
andrew.zhi
committed
created demo2 for crop and resize
1 parent dfadfa3 commit 137377b

File tree

2 files changed

+118
-0
lines changed

2 files changed

+118
-0
lines changed

‎demo/demo2.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en">
3+
<head>
4+
<!--[if IE]>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<![endif]-->
7+
<meta charset="utf-8">
8+
<title>JavaScript Load Image</title>
9+
<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 and/or cropped HTML img or canvas element. It also provides a method to parse image meta data to extract Exif tags and thumbnails and to restore the complete image header after resizing.">
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11+
<!-- Jcrop is not required by JavaScript Load Image, but included for the demo -->
12+
<link rel="stylesheet" href="../css/vendor/jquery.Jcrop.css">
13+
<link rel="stylesheet" href="../css/demo.css">
14+
</head>
15+
<body>
16+
<p><button id="crop">Crop </button><input type="file" id="file-input"></p>
17+
<div id="result" class="result">
18+
<p>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>
19+
</div>
20+
<img src="" id="image1">
21+
<script src="../js/load-image.js"></script>
22+
<script src="../js/load-image-ios.js"></script>
23+
<script src="../js/load-image-orientation.js"></script>
24+
<script src="../js/load-image-meta.js"></script>
25+
<script src="../js/load-image-exif.js"></script>
26+
<script src="../js/load-image-exif-map.js"></script>
27+
<!-- jQuery and Jcrop are not required by JavaScript Load Image, but included for the demo -->
28+
<script src="../js/vendor/jquery.js"></script>
29+
<script src="../js/vendor/jquery.Jcrop.js"></script>
30+
<script src="demo2.js"></script>
31+
</body>
32+
</html>

‎demo/demo2.js

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/*
2+
* JavaScript Load Image Demo JS
3+
* https://github.com/blueimp/JavaScript-Load-Image
4+
*
5+
* Copyright 2013, Sebastian Tschan
6+
* https://blueimp.net
7+
*
8+
* Licensed under the MIT license:
9+
* http://www.opensource.org/licenses/MIT
10+
*/
11+
12+
/*global window, document, loadImage, HTMLCanvasElement, $ */
13+
14+
$(function () {
15+
'use strict';
16+
17+
var result = $('#result'),
18+
currentFile,
19+
replaceResults = function (img) {
20+
if ((img.src || img instanceof HTMLCanvasElement)) {
21+
result.children().replaceWith(img);
22+
}
23+
},
24+
25+
showFirst = function (img) {
26+
if ((img.src || img instanceof HTMLCanvasElement)) {
27+
result.children().replaceWith(img);
28+
}
29+
crop();
30+
},
31+
32+
displayImage = function (file, options) {
33+
currentFile = file;
34+
loadImage(
35+
file,
36+
showFirst,
37+
options
38+
);
39+
},
40+
dropChangeHandler = function (e) {
41+
e.preventDefault();
42+
e = e.originalEvent;
43+
var target = e.dataTransfer || e.target,
44+
file = target && target.files && target.files[0],
45+
options = {
46+
maxWidth: result.width(),
47+
orientation: 2
48+
// canvas: true
49+
};
50+
if (!file) {
51+
return;
52+
}
53+
loadImage.parseMetaData(file, function (data) {
54+
if (data.exif) {
55+
options.orientation = data.exif.get('Orientation');
56+
}
57+
displayImage(file, options);
58+
// crop();
59+
});
60+
};
61+
62+
// Hide URL/FileReader API requirement message in capable browsers:
63+
if (window.createObjectURL || window.URL || window.webkitURL || window.FileReader) {
64+
result.children().hide();
65+
}
66+
$('#file-input').on('change', dropChangeHandler);
67+
function crop() {
68+
var img = result.find('img, canvas')[0];
69+
var coordinates = {
70+
x: 500,
71+
y: 500,
72+
w: 512,
73+
h: 512
74+
};
75+
76+
if (img && coordinates) {
77+
replaceResults(loadImage.scale(img, {
78+
left: coordinates.x,
79+
top: coordinates.y,
80+
sourceWidth: coordinates.w,
81+
sourceHeight: coordinates.h,
82+
minWidth: result.width()
83+
}));
84+
}
85+
}
86+
});

0 commit comments

Comments
 (0)