crize/canvas.html at master · siliconsenthil/crize · 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<html>
<head>
	<script src='./jquery.min.js' type='text/javascript'></script>
	<script src='./jquery.ui.js' type='text/javascript'></script>
	<script src='./jquery.Jcrop.js' type='text/javascript'></script>
	<script type='text/javascript'>
		$(document).ready(function(){
			var modifedImage,
				updatedCoords,
				jcropApi;

			$("#crop").click(function(){
				jcropApi.release();
				jcropApi.disable();
				canvas = $("canvas")[0];
				ctx = canvas.getContext("2d");
				imageData = ctx.getImageData(updatedCoords.x, updatedCoords.y, updatedCoords.w, updatedCoords.h);
				canvas.setAttribute('width', updatedCoords.w);
				canvas.setAttribute('height', updatedCoords.h);
				canvas.style.width = updatedCoords.w + 'px';
				canvas.style.height = updatedCoords.h + 'px';
				ctx.putImageData(imageData, 0, 0);
				jcropApi.enable();
				return false;
			});

			$("#resize").click(function(){
				jcropApi.release();
				jcropApi.disable();
				canvas = $("canvas")[0];
				image = new Image;
				image.onload = function() {
					canvas.setAttribute('width', $("#width").val());
					canvas.setAttribute('height', $("#height").val());
					canvas.style.width = $("#width").val() + 'px';
					canvas.style.height = $("#height").val() + 'px';
					ctx = canvas.getContext("2d");
					ctx.drawImage(image, 0, 0, $("#width").val(), $("#height").val());
					jcropApi.enable();
				}
				image.src = canvas.toDataURL();
				return false;
			});

			$('input[type="file"]').change(function(){
				fileReader = new FileReader;
				fileReader.onload = function() {
					modifedImage = new Image;
					modifedImage.onload = function() {
						canvas = $("canvas")[0];
						canvas.setAttribute('width', modifedImage.width);
						canvas.setAttribute('height', modifedImage.height);
						ctx = canvas.getContext("2d");
						ctx.clearRect(0, 0, canvas.width, canvas.height);
						ctx.drawImage(modifedImage, 0, 0);
						bindJcrop();
					}
					modifedImage.src = this.result;
				}
				fileReader.readAsDataURL(this.files[0]);
			});

			function bindJcrop() {
				$("canvas").Jcrop({
					aspectRatio: 16 / 9,
					bgColor: "white",
					bgOpacity: 0.3,
					onSelect: function(coords){
						updatedCoords = coords;
					}
				}, function() {
					jcropApi = this;
				});
			}

		});

	</script>
	<link rel="stylesheet" href="./jquery.Jcrop.css" type="text/css" />
	<style type='text/css'>
		.jcrop-holder > div { border: 1px solid black;}
	</style>
</head>
<body>
	<input type='file'>
	<label for='width'>Width : </label>
	<input type="text" name='width' id="width" value="100"/>
	<label for='height'>Height : </label>
	<input type="text" name='height' id="height" value="200"/>
	<input type="button" id="resize" value="Resize"/>
	<input type="button" id="crop" value="Crop"/>
	<div>
		<canvas width="1024" height="768"></canvas>
	</div>
</body>
</html>