CropNow/index.html at master · Sujsun/CropNow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
	<title>CropNow Demo</title>
</head>
<style>
</style>
<body>
	<h2>CropNow.js</h2>
	<div>
		<input id="file" type="file"></input>
	</div>
	<br><br><br>
	<div>
		Selected Image:
		<br><br>
		<img id="img">
	</div>
	<br><br><br>
	<div>
		Cropped Image:
		<br><br>
		<img id="preview-img">
		<br><br><br><br><br><br>
	</div>

	<script src="js/CropNow.js"></script>
	<script src="js/SampleImage.js"></script>

	<script>
		var file = window.document.getElementById('file'),
		    image = window.document.getElementById('img'),
		    previewImage = window.document.getElementById('preview-img');

		/**
		 * Loading the sample image by default
		 */
		image.src = sampleImage;

		/**
		 * Creating options object
		 */
		var options = {};
		options.file = file;
		options.image = image;
		options.previewImage = previewImage;
		options.ratio = {width: 1, height: 1};
		options.resize = {width: 400, height: 400};
		options.onCrop = function(base64String) {
			// console.log('Image Cropped. Base64 String: ', base64String);
		};

		/**
		 * Using CropNow
		 */
		var cropNow = new CropNow(options);
	</script>
</body>
</html>