marlondu-imgZipper
/
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>youkuplayer</title>
		<script type="text/javascript" src="js/imgZipper.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				zipper.init({
					inputFileId:"file_input",
					imgId:"image",
					compress:false,
					compressRate:0.7,
					imgAreaId:"image_area",
					manualSlice:true
				});
				document.getElementById("size5").onclick = function(){
					zipper.compressFile(0.5,function(size){
						console.log("---真实size:"+size);
					});
					zipper.check(function(file){
						console.log(file.size);
						console.log(file.type);
					});
				}
				document.getElementById("size1").onclick = function(){
					zipper.compressFile(1.0).slice(120,80,240,360);
				}
				document.getElementById("size2").onclick = function(){
					zipper.slice(120,80,240,360,true,function(size,width,height){
						console.log("裁剪后体积 :"+size);
						console.log("裁剪后长宽 :"+width+"/"+height);
					});
				}
				document.getElementById("submit").onclick = function(){
					zipper.sendFile({
						url:"UploadAction_upload",
						progress:function(loaded,total){
							console.log("---"+loaded+"/"+total+"---")
						},
						error:function(){
							console.log("there must something wrong!")
						}
					});
				}
				zipper.addDragEvent("image_area");
				zipper.mouseup = function(x,y,width,height){
					console.log("起始位置："+x+"/"+y);
					console.log("宽高度："+width+"/"+height);
				}
			}
		</script>
	</head>
	<body>
		<div class="stage">
			<input type="file" id="file_input"/>
			<div id="image_area" style="width:500px;height:700px;background-color:#ccc;margin:10px 10px auto;">
				<img src="" id="image"/>
			</div>
			<div class="btn_area">
				<input type="button" id="size5" value="0.5倍大小">
				<input type="button" id="size1" value="1.0倍大小">
				<input type="button" id="size2" value="剪裁">
				<input type="button" id="submit" value="点击上传">
			</div>
			<div>
				<canvas id="drawing" ></canvas>
			</div>
			<div>
				<img src="" id="descImg"/>
			</div>
		</div>
	</body>
</html>