本示例使用HTML5 canvas，简单的编写了上传头像的裁剪效果，移动端支持拖拽后裁剪， 虽然样式不好看，但是功能还算全：
下图为裁剪后的效果：
html部分：
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传头像</title>
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="imgCrop" style="width:200px;height:200px;border:1px solid #ccc;overflow:hidden;">
<img src="img/test.jpg" alt="">
</div>
<input type="file" accept="image/*" />
<button id="save">保存</button>
<p>下面为剪切的图片:</p>
<div id="imgShow"></div>
</body>
</html>
JavaScript部分：
JavaScript Code复制内容到剪贴板
var $imgCrop = $("#imgCrop");
var $img = $imgCrop.find("img");
var img = $img[0];
var width = parseInt($imgCrop.css("width"));
var height = parseInt($imgCrop.css("height"));
var startX,startY,scale = 1;
var x = 0,y = 0;
$("input").on("change",function(){
var fr = new FileReader();
var file = this.files[0]
//console.log(file);
if(!/image/w+/.test(file.type)){
alert(file.name + "不是图片文件！");
return;
}
console.log(file);
$img.removeAttr("height width");
fr.readAsDataURL(file);
