PhotoClip剪切图片。

可以去我的资源下载完整的代码http://download.csdn.net/download/qq_33769914/9875716

<!doctype html>

<html lang="zh-CN" id="index">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="keywords" content="">
<meta name="description" content="">
<title>PhotoClip</title>
<style>
body {
   margin: 0;
   text-align: center;
}
#clipArea {
   height: 300px;
}
#file,
#clipBtn {
   margin: 20px;
}
#view {
   margin: 0 auto;
   width: 200px;
   height: 200px;
   background-color: #666;
}

.p{width:102px; height:34px;overflow:hidden;position:relative;background-size:cover;background:url("img/upFileBtn.png") no-repeat;}
.upfile{position:absolute;top:-1000px;}
.upFileBtn{width:102px;height:34px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}
</style>
</head>
<body ontouchstart="">

<div id="clipArea"></div>

<div class="p">
   <input type="file" class="upfile" accept="image/*" >
   <input class="upFileBtn" type="button" οnclick="$(this).siblings('input').click()" />
</div>

<button id="clipBtn">截取</button>
<div id="view"></div>

<script src="js/iscroll-zoom.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/PhotoClip.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script>

   $("#clipArea").hide();
   $("#clipBtn").hide();
   $("#view").hide();

$("#clipBtn").click(function(){ //点击截取，上面的截取框隐藏，截取按钮隐藏
      $("#clipArea").hide();
      $(this).hide();
      $("#view").show();
})

var pc = new PhotoClip('#clipArea', {

width：截取区域的宽度,

height：截取区域的高度,

       size: 260,
       outputSize: 640,
       //adaptive: ['60%', '80%'],
       file: '#file', // 上传图片的< input type = "file" >控件的选择器或者DOM对象

view: '#view', //显示截取后图像的容器的选择器或者DOM对象

       ok: '#clipBtn', // 确认截图按钮的选择器或者DOM对象
       //img: 'img/mm.jpg',
       loadStart: function() {
           console.log('开始读取照片');
       },
       loadComplete: function() { // 加载完成的回调函数
           $("#clipArea").show();
              $("#clipBtn").show();

           console.log('照片读取完成');
       },
       done: function(dataURL) {   //dataURL图片的地址
           console.log(dataURL);
       },
       fail: function(msg) {
           alert(msg);
       }
   });

   // 加载的图片必须要与本程序同源，否则无法截图
   //pc.load('img/mm.jpg');

</script>

</body>
</html>

原文链接：https://blog.csdn.net/qq_33769914/article/details/65636074