移动端图片按比例裁剪

之前在网上找到一图片裁剪插件photoClip，这个插件在移动端和pc端可以放大缩小的（pc端利用滚轮放大缩小）。整合一下可以放在页面中作为图片上传，先看看效果图：
点击红色的减号，可以删除当前图片；来看看代码
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
  6         <title>图片裁剪</title>
  7         <style>
  8             .container{
  9                 width:100%;
 10                 height:100%;
 11                 background:rgba(0,0,0,.68);
 12                 position:fixed;
 13                 top:0;
 14                 left:0;
 15                 z-index:250;
 16                 display:none;
 17             }
 18             #clipArea {
 19                 height:100%;
 20                 border:1px solid #ddd;
 21             }
 22             #clipBtn{
 23                 position: absolute;
 24                 left: 2rem;
 25                 bottom: 1rem;
 26                 width: 2rem;
 27                 padding: .1rem;
 28                 background: transparent;
 29                 color: #fff;
 30                 border: 1px solid #fff;
 31             }
 32         
 33             .photo,.photo1{
 34                 width:1.8rem;
 35                 height:1.5rem;
 36                 border:1px solid #ddd;
 37                 margin-right:0.2rem;
 38                 position:relative;
 39                 display:inline-block;
 40             }
 41             #file,#file1{
 42                 width:100%;
 43                 height:1.5rem;
 44                 position:absolute;
 45                 top:0;
 46                 left:0;
 47                 opacity:0;
 48                 border:1px solid black;
 49             }
 50             .photo img,.photo1 img{
 51                 width:100%;
 52                 height:100%;
 53             }
 54             .photo1 span{
 55                 display:inline-block;
 56                 width:.5rem;
 57                 height:.5rem;
 58                 border-radius: .25rem;
 59                 position:absolute;
 60                 top:0;
 61                 right:0;
 62                 color:#fff;
 63                 background:#f00;
 64                 text-align: center;
 65                 font-size:.35rem;
 66                 font-weight:bold;
 67             }
 68         </style>
 69     </head>
 70     <body>
 71             <!--<div class="photo1">
 72                 <img id="view" src="img/add.jpg" alt="" />
 73                 <span>—</span>
 74             </div>-->
 75             <div class="photo">
 76                 <input type="file" id="file">
 77                 <img class="add" src="img/tianjia.png" alt="" />
 78             </div>
 79         <div class="container">
 80             <div id="clipArea"></div>
 81             <button id="clipBtn">截取</button>
 82         </div>
 83         
 84     <script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
 85     <script src="js/iscroll-zoom.js"></script>
 86     <script src="js/hammer.js"></script>
 87     <script src="js/jquery.photoClip.js"></script>
 88     <script>
 89            $('#file').change(function(){
 90                $('.container').show();
 91            })
 92            
 93          $("#clipArea").photoClip({//裁剪图片 图片比例4:3
 94             333,
 95             height:250,
 96             file: "#file",
 97             ok: "#clipBtn",
 98             loadStart: function() {
 99                 console.log("照片读取中");
100             },
101             loadComplete: function() {
102                 console.log("照片读取完成");
103             },
104             clipFinish: function(dataURL) {
105                 console.log(dataURL);
106                 $('.container').hide();
107                 $('.photo').before('<div class="photo1">'
108                 +'<img src="'+dataURL+'" alt="" /><span>—</span></div>')
109                 $('.photo1>span').click(function(){
110                     $(this).parent().remove();
111                 })
112             }
113         });    
114         
115         
116         
117     //移动端rem适配    
118         (function (doc, win) {
119             var docEl = doc.documentElement,
120                 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
121                 recalc = function () {
122                     var clientWidth = docEl.clientWidth;//获取当前屏幕大小
123                     if (!clientWidth) return;
124                     if(clientWidth>=640){
125                         docEl.style.fontSize = '100px';
126                     }else{
127                         docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
128                     }
129                 };
130         
131             if (!doc.addEventListener) return;
132             win.addEventListener(resizeEvt, recalc, false);
133             doc.addEventListener('DOMContentLoaded', recalc, false);
134         })(document, window)
135     </script>
136     </body>
137 </html>
插件链接：http://www.jq22.com/jquery-info4894
完整代码链接: https://pan.baidu.com/s/1wqQbWU2aa-DEBJH-a_8FLw 提取码: 468i