使用HTML5中的 Canvas截图？

想了好久不知道怎么做~做一个 类似 PS的 截图的小工具~
使用 JS file 获取本地图片 与 Canvas 进行 截取~
但是 貌似 卡住了~ 代码~ 有兴趣的小伙伴 一起交流 跪舔 大神 QQ 1006775252~~~~
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
.wire{
background: red;
width: 500px;
height:10px;
background:red;margin-bottom:50px;cursor:pointer;position:absolute;top:0px;left:0px;
}
</style>

</head>
<body >
<div style="position:relative;height:50px;" id="body">
<div class="wire" style="width:500px;height:10px;background:red;margin-bottom:50px;cursor:pointer;position:absolute;top:0px;left:0px;">
</div>
</div>

<div style="margin-bottom:80px;margin-top:50px;">
<label>请选择文件</label>
<input type="file" id="file">
<input type="button" value="读取图像" onclick="clic()">
</div>

<canvas id="can" style="width:400px;height:400px"></canvas>
<canvas id="a" style="width:400px;height:400px;display:none";> </canvas>
<button onclick="copy()">复制</button>
<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
if(typeof FileReader == 'undefined'){alert("您的浏览器不支持FileReader")}
var canvas = document.getElementById("can");
var can = document.getElementById("a");
var con = can.getContext("2d");
var context = canvas.getContext("2d");
function clic(){

var file = document.getElementById("file").files[0];
var reader = new FileReader();
if(!/image\/\w+/.test(file.type)){
alert("请选择图像");
}
reader.readAsDataURL(file);
function drew(){
var grd=context.createLinearGradient(0,0,170,0);
context.fillStyle=grd;
context.fillRect(0,0,400,300);
imaged = new Image();
reader.onload = function(){

imaged.src = this.result;
drawImg(context,imaged);
}
}
function drawImg(context,image){
// createClip(context);
context.drawImage(imaged,0,0);
}
drew()
}
function copy(){
$("#a").show();
var imgData = context.getImageData(0,0,100,30);
con.putImageData(imgData,0,0);

}
var i=1;
function drag(e,oWir,h){
e = e || window.event();
var clientX = e.clientX;
var clientY = e.clientY;
var DisY = clientY - oWir.offset().top;
$(document).on("mousemove",function(e){
oWir.css({
top: e.clientY - DisY +"px",
})
})
$(document).on("mouseup",function(e){
$(this).off("mousemove");
$(this).off("mouseup");
var objNewDiv = $('<div>',{'class':'wire'+h,});
$("#body").append(objNewDiv);
objNewDiv.css({
'background': 'red',
'width': '500px',
'height':'10px',
'cursor':'pointer',
'position':'absolute',
'top':'0px',
'left':'0px',
'MarginBottom':'50px'
})
})
}
$(".wire").on("mousedown",function(e){
drag(e,$(".wire"),1)
})
$("body").on("mousedown",".wire1",function(e){
drag(e,$(".wire1"),2)
})
$("body").on("mousedown",".wire2",function(e){
drag(e,$(".wire2"),3)
})
</script>
</body>
</html>