前端图片剪切上传功能是常见的功能，在开发过程中，研发一个这样的功能要花的时间也会很多，现在把一个研发好了的图片剪切插件发出来。支持剪切和大小缩放。
wxml
1 <!--图片展示 --> 2 <view bindtap=‘upEwm‘ data-which=‘1‘> 3 <view>第一个图</view> 4 <image style=‘width:200rpx;height:200rpx;background-color:red‘ src=‘{{headImg}}‘></image> 5 </view> 6 <view bindtap=‘upEwm‘ data-which=‘2‘> 7 <view>第二个图</view> 8 <image style=‘width:200rpx;height:200rpx;background-color:red‘ src=‘{{ewmImg}}‘></image> 9 </view> 10 11 12 <!--裁剪图片浮层--> 13 <view class=‘fixed-upimg‘ wx:if="{{imageFixed}}"> 14 <view class="wx-content-info"> 15 <!-- <view class="wx-content-info" wx:if="{{imageSrc}}"> --> 16 <view wx:if="{{isShowImg}}" class="wx-corpper" style="width:{{cropperInitW}}rpx;height:{{cropperInitH}}rpx;background:#000"> 17 <view bindtap=‘upLoad‘ class="wx-corpper-content" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx;left:{{cropperL}}rpx;top:{{cropperT}}rpx"> 18 <image src="{{imageSrc}}" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx"></image> 19 <view class="wx-corpper-crop-box" bindtouchstart="contentStartMove" bindtouchmove="contentMoveing" style="width:{{cutW}}rpx;height:{{cutH}}rpx;left:{{cutL}}rpx;top:{{cutT}}rpx"> 20 <view class="wx-cropper-view-box"> 21 <!-- <view class="wx-cropper-viewer"> 22 <image src="{{imageSrc}}" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx;left:{{cropperL - cutL}}rpx;top:{{cropperT - cutT}}rpx"></image> 23 </view> --> 24 <view class="wx-cropper-dashed-h"></view> 25 <view class="wx-cropper-dashed-v"></view> 26 <view class="wx-cropper-line-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> 27 <view class="wx-cropper-line-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> 28 <view class="wx-cropper-line-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> 29 <view class="wx-cropper-line-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> 30 <view class="wx-cropper-point point-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> 31 <view class="wx-cropper-point point-tr" data-drag="topTight"></view> 32 <view class="wx-cropper-point point-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> 33 <view class="wx-cropper-point point-rb" data-drag="rightBottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> 34 <view class="wx-cropper-point point-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> 35 <view class="wx-cropper-point point-bl" data-drag="bottomLeft"></view> 36 <view class="wx-cropper-point point-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> 37 <view class="wx-cropper-point point-lt" data-drag="leftTop"></view> 38 </view> 39 </view> 40 </view> 41 <!-- <view class="wx-cropper-drag-box"></view> --> 42 </view> 43 <canvas canvas-id="myCanvas" style="position:absolute;border: 1px solid red; width:{{imageW}}rpx;height:{{imageH}}rpx;top:-9999px;left:-9999px;"></canvas> 44 <button type="primary" bindtap="getImageInfo" style="position:fixed;bottom:120rpx;width:90%;left:50%;transform:translate3d(-50%,0,0)"> 确认提交 </button> 45 46 </view> 47 </view>
wxcss
1 /* pages/wx-cropper/index.wxss */ 2 .fixed-upimg{ 3 position: fixed; 4 top: 0; 5 left: 0; 6 right: 0; 7 bottom: 0; 8 background-color: #fff; 9 } 10 .wx-content-info{ 11 position: fixed; 12 top: 130rpx; 13 left: 0; 14 right: 0; 15 bottom: 0; 16 17 } 18 19 .wx-corpper{ 20 position: relative; 21 overflow: hidden; 22 -webkit-user-select: none; 23 -moz-user-select: none; 24 -ms-user-select: none; 25 user-select: none; 26 -webkit-tap-highlight-color: transparent; 27 -webkit-touch-callout: none; 28 box-sizing: border-box; 29 } 30 31 .wx-corpper-content{ 32 position: absolute; 33 top: 0; 34 right: 0; 35 bottom: 0; 36 left: 0; 37 } 38 39 .wx-corpper-content image { 40 display: block; 41 width: 100%; 42 min-width: 0 !important; 43 max-width: none !important; 44 height: 100%; 45 min-height: 0 !important; 46 max-height: none !important; 47 image-orientation: 0deg !important; 48 margin: 0 auto; 49 } 50 51 /* 移动图片效果 */ 52 .wx-cropper-drag-box{ 53 position: absolute; 54 top: 0; 55 right: 0; 56 bottom: 0; 57 left: 0; 58 cursor: move; 59 background: rgba(0,0,0,0.6); 60 z-index: 1; 61 } 62 63 /* 内部的信息 */ 64 .wx-corpper-crop-box{ 65 position: absolute; 66 width: 500rpx; 67 height: 500rpx; 68 background: rgba(255,255,255,0.3); 69 z-index: 2; 70 } 71 72 .wx-corpper-crop-box .wx-cropper-view-box { 73 position: relative; 74 display: block; 75 width: 100%; 76 height: 100%; 77 overflow: visible; 78 outline: 1px solid #69f; 79 outline-color: rgba(102, 153, 255, .75) 80 } 81 82 /* 横向虚线 */ 83 .wx-cropper-dashed-h{ 84 position: absolute; 85 top: 33.33333333%; 86 left: 0; 87 width: 100%; 88 height: 33.33333333%; 89 border-top: 1px dashed rgba(255,255,255,0.5); 90 border-bottom: 1px dashed rgba(255,255,255,0.5); 91 } 92 93 /* 纵向虚线 */ 94 .wx-cropper-dashed-v{ 95 position: absolute; 96 left: 33.33333333%; 97 top: 0; 98 width: 33.33333333%; 99 height: 100%; 100 border-left: 1px dashed rgba(255,255,255,0.5); 101 border-right: 1px dashed rgba(255,255,255,0.5); 102 } 103 104 /* 四个方向的线 为了之后的拖动事件*/ 105 .wx-cropper-line-t{ 106 position: absolute; 107 display: block; 108 width: 100%; 109 background-color: #69f; 110 top: 0; 111 left: 0; 112 height: 1px; 113 opacity: 0.1; 114 cursor: n-resize; 115 } 116 117 .wx-cropper-line-t::before{ 118 content: ‘‘; 119 position: absolute; 120 top: 50%; 121 right: 0rpx; 122 width: 100%; 123 -webkit-transform: translate3d(0,-50%,0); 124 transform: translate3d(0,-50%,0); 125 bottom: 0; 126 height: 41rpx; 127 background: transparent; 128 z-index: 11; 129 } 130 131 .wx-cropper-line-r{ 132 position: absolute; 133 display: block; 134 background-color: #69f; 135 top: 0; 136 right: 0px; 137 width: 1px; 138 opacity: 0.1; 139 height: 100%; 140 cursor: e-resize; 141 } 142 .wx-cropper-line-r::before{ 143 content: ‘‘; 144 position: absolute; 145 top: 0; 146 left: 50%; 147 width: 41rpx; 148 -webkit-transform: translate3d(-50%,0,0); 149 transform: translate3d(-50%,0,0); 150 bottom: 0; 151 height: 100%; 152 background: transparent; 153 z-index: 11; 154 } 155 156 .wx-cropper-line-b{ 157 position: absolute; 158 display: block; 159 width: 100%; 160 background-color: #69f; 161 bottom: 0; 162 left: 0; 163 height: 1px; 164 opacity: 0.1; 165 cursor: s-resize; 166 } 167 168 .wx-cropper-line-b::before{ 169 content: ‘‘; 170 position: absolute; 171 top: 50%; 172 right: 0rpx; 173 width: 100%; 174 -webkit-transform: translate3d(0,-50%,0); 175 transform: translate3d(0,-50%,0); 176 bottom: 0; 177 height: 41rpx; 178 background: transparent; 179 z-index: 11; 180 } 181 182 .wx-cropper-line-l{ 183 position: absolute; 184 display: block; 185 background-color: #69f; 186 top: 0; 187 left: 0; 188 width: 1px; 189 opacity: 0.1; 190 height: 100%; 191 cursor: w-resize; 192 } 193 .wx-cropper-line-l::before{ 194 content: ‘‘; 195 position: absolute; 196 top: 0; 197 left: 50%; 198 width: 41rpx; 199 -webkit-transform: translate3d(-50%,0,0); 200 transform: translate3d(-50%,0,0); 201 bottom: 0; 202 height: 100%; 203 background: transparent; 204 z-index: 11; 205 } 206 207 .wx-cropper-point{ 208 width: 5px; 209 height: 5px; 210 background-color: #69f; 211 opacity: .75; 212 position: absolute; 213 z-index: 3; 214 } 215 216 .point-t{ 217 top: -3px; 218 left: 50%; 219 margin-left: -3px; 220 cursor: n-resize; 221 } 222 223 .point-tr{ 224 top: -3px; 225 left: 100%; 226 margin-left: -3px; 227 cursor: n-resize; 228 } 229 230 .point-r{ 231 top: 50%; 232 left:100%; 233 margin-left: -3px; 234 margin-top: -3px; 235 cursor: n-resize; 236 } 237 238 .point-rb{ 239 left: 100%; 240 top: 100%; 241 -webkit-transform: translate3d(-50%,-50%,0); 242 transform: translate3d(-50%,-50%,0); 243 cursor: n-resize; 244 width: 24rpx; 245 height: 24rpx; 246 background-color: #69f; 247 position: absolute; 248 z-index: 1112; 249 opacity: 1; 250 } 251 252 .point-b{ 253 left:50%; 254 top: 100%; 255 margin-left: -3px; 256 margin-top: -3px; 257 cursor: n-resize; 258 } 259 260 .point-bl{ 261 left:0%; 262 top: 100%; 263 margin-left: -3px; 264 margin-top: -3px; 265 cursor: n-resize; 266 } 267 268 .point-l{ 269 left:0%; 270 top: 50%; 271 margin-left: -3px; 272 margin-top: -3px; 273 cursor: n-resize; 274 } 275 276 .point-lt{ 277 left:0%; 278 top: 0%; 279 margin-left: -3px; 280 margin-top: -3px; 281 cursor: n-resize; 282 } 283 284 /* 裁剪框预览内容 */ 285 .wx-cropper-viewer{ 286 position: relative; 287 width: 100%; 288 height: 100%; 289 overflow: hidden; 290 } 291 292 .wx-cropper-viewer image{ 293 position: absolute; 294 z-index: 2; 295 }
js
1 // pages/wx-cropper/index.js 2 // 手机的宽度 3 var windowWRPX = 750 4 // 拖动时候的 pageX 5 var pageX = 0 6 // 拖动时候的 pageY 7 var pageY = 0 8 9 var pixelRatio = wx.getSystemInfoSync().pixelRatio 10 11 // 调整大小时候的 pageX 12 var sizeConfPageX = 0 13 // 调整大小时候的 pageY 14 var sizeConfPageY = 0 15 16 var initDragCutW = 0 17 var initDragCutL = 0 18 var initDragCutH = 0 19 var initDragCutT = 0 20 21 // 移动时 手势位移与 实际元素位移的比 22 var dragScaleP = 2 23 24 Page({ 25 /** 26 * 页面的初始数据 27 */ 28 data: { 29 imageNum: ‘‘, //上传的图片id 30 headImg: ‘‘, //头像上传 31 ewmImg: ‘‘, //二维码上传 32 imageFixed: false, //裁剪浮层 33 // imageSrc: ‘http://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/images/testimg2.jpeg‘, 34 imageSrc: ‘‘, //要裁剪的图片 35 returnImage: ‘‘, 36 isShowImg: false, 37 // 初始化的宽高 38 cropperInitW: windowWRPX, 39 cropperInitH: windowWRPX, 40 // 动态的宽高 41 cropperW: windowWRPX, 42 cropperH: windowWRPX, 43 // 动态的left top值 44 cropperL: 0, 45 cropperT: 0, 46 47 // 图片缩放值 48 scaleP: 0, 49 imageW: 0, 50 imageH: 0, 51 52 // 裁剪框 宽高 53 cutW: 400, 54 cutH: 400, 55 cutL: 0, 56 cutT: 0, 57 }, 58 59 /** 60 * 生命周期函数--监听页面加载 61 */ 62 onReady: function (options) { 63 }, 64 65 /** 66 * 生命周期函数--监听页面初次渲染完成 67 */ 68 onLoad: function () { 69 var _this = this 70 71 // wx.showLoading({ 72 // title: ‘图片加载中...‘, 73 // }) 74 75 wx.getImageInfo({ 76 src: _this.data.imageSrc, 77 success: function success(res) { 78 var innerAspectRadio = res.width / res.height; 79 console.log(innerAspectRadio) 80 // 根据图片的宽高显示不同的效果 保证图片可以正常显示 81 if (innerAspectRadio >= 1) { 82 _this.setData({ 83 cropperW: windowWRPX, 84 cropperH: windowWRPX / innerAspectRadio, 85 // 初始化left right 86 cropperL: Math.ceil((windowWRPX - windowWRPX) / 2), 87 cropperT: Math.ceil((windowWRPX - windowWRPX / innerAspectRadio) / 2), 88 // 裁剪框 宽高 89 // cutW: windowWRPX - 200, 90 // cutH: windowWRPX / innerAspectRadio - 200, 91 cutL: Math.ceil((windowWRPX - windowWRPX + 340) / 2), 92 cutT: Math.ceil((windowWRPX / innerAspectRadio - (windowWRPX / innerAspectRadio - 20)) / 2), 93 // 图片缩放值 94 scaleP: res.width * pixelRatio / windowWRPX, 95 // 图片原始宽度 rpx 96 imageW: res.width * pixelRatio, 97 imageH: res.height * pixelRatio 98 }) 99 } else { 100 _this.setData({ 101 cropperW: windowWRPX * innerAspectRadio, 102 cropperH: windowWRPX, 103 // 初始化left right 104 cropperL: Math.ceil((windowWRPX - windowWRPX * innerAspectRadio) / 2), 105 cropperT: Math.ceil((windowWRPX - windowWRPX) / 2), 106 // 裁剪框的宽高 107 // cutW: windowWRPX * innerAspectRadio - 66, 108 // cutH: 400, 109 cutL: Math.ceil((windowWRPX * innerAspectRadio - (windowWRPX * innerAspectRadio - 20)) / 2), 110 cutT: Math.ceil((windowWRPX - 340) / 2), 111 // 图片缩放值 112 scaleP: res.width * pixelRatio / windowWRPX, 113 // 图片原始宽度 rpx 114 imageW: res.width * pixelRatio, 115 imageH: res.height * pixelRatio 116 }) 117 } 118 _this.setData({ 119 isShowImg: true 120 }) 121 wx.hideLoading() 122 } 123 }) 124 }, 125 126 // 拖动时候触发的touchStart事件 127 contentStartMove(e) { 128 pageX = e.touches[0].pageX 129 pageY = e.touches[0].pageY 130 }, 131 132 // 拖动时候触发的touchMove事件 133 contentMoveing(e) { 134 var _this = this 135 // _this.data.cutL + (e.touches[0].pageX - pageX) 136 // console.log(e.touches[0].pageX) 137 // console.log(e.touches[0].pageX - pageX) 138 var dragLengthX = (pageX - e.touches[0].pageX) * dragScaleP 139 var dragLengthY = (pageY - e.touches[0].pageY) * dragScaleP 140 var minX = Math.max(_this.data.cutL - (dragLengthX), 0) 141 var minY = Math.max(_this.data.cutT - (dragLengthY), 0) 142 var maxX = _this.data.cropperW - _this.data.cutW 143 var maxY = _this.data.cropperH - _this.data.cutH 144 this.setData({ 145 cutL: Math.min(maxX, minX), 146 cutT: Math.min(maxY, minY), 147 }) 148 console.log(`${maxX} ----- ${minX}`) 149 pageX = e.touches[0].pageX 150 pageY = e.touches[0].pageY 151 }, 152 153 // 获取图片 154 getImageInfo() { 155 var _this = this 156 console.log(‘shengcheng:‘ + _this.data.imageSrc) 157 wx.showLoading({ 158 title: ‘图片生成中...‘, 159 }) 160 // wx.downloadFile({ 161 // url:_this.data.imageSrc, //仅为示例，并非真实的资源 162 // success: function (res) { 163 // 将图片写入画布 164 const ctx = wx.createCanvasContext(‘myCanvas‘) 165 // ctx.drawImage(res.tempFilePath) 166 ctx.drawImage(_this.data.imageSrc) 167 168 ctx.draw(true, () => { 169 // 获取画布要裁剪的位置和宽度 均为百分比 * 画布中图片的宽度 保证了在微信小程序中裁剪的图片模糊 位置不对的问题 170 var canvasW = (_this.data.cutW / _this.data.cropperW) * (_this.data.imageW / pixelRatio) 171 var canvasH = (_this.data.cutH / _this.data.cropperH) * (_this.data.imageH / pixelRatio) 172 var canvasL = (_this.data.cutL / _this.data.cropperW) * (_this.data.imageW / pixelRatio) 173 var canvasT = (_this.data.cutT / _this.data.cropperH) * (_this.data.imageH / pixelRatio) 174 console.log(`canvasW:${canvasW} --- canvasH: ${canvasH} --- canvasL: ${canvasL} --- canvasT: ${canvasT} -------- _this.data.imageW: ${_this.data.imageW} ------- _this.data.imageH: ${_this.data.imageH} ---- pixelRatio ${pixelRatio}`) 175 wx.canvasToTempFilePath({ 176 x: canvasL, 177 y: canvasT, 178 width: canvasW, 179 height: canvasH, 180 destWidth: canvasW, 181 destHeight: canvasH, 182 canvasId: ‘myCanvas‘, 183 success: function (res) { 184 wx.hideLoading() 185 // 成功获得地址的地方 186 console.log(‘end:‘ + res.tempFilePath) 187 // 判断时上传头像还是二维码 188 _this.setData({ 189 imageFixed: false, 190 }) 191 if (_this.data.imageNum == ‘1‘) { 192 _this.setData({ 193 headImg: res.tempFilePath 194 }) 195 } else if (_this.data.imageNum == ‘2‘) { 196 _this.setData({ 197 ewmImg: res.tempFilePath 198 }) 199 } 200 201 } 202 }) 203 }) 204 // } 205 206 207 // }) 208 }, 209 210 // 设置大小的时候触发的touchStart事件 211 dragStart(e) { 212 var _this = this 213 sizeConfPageX = e.touches[0].pageX 214 sizeConfPageY = e.touches[0].pageY 215 initDragCutW = _this.data.cutW 216 initDragCutL = _this.data.cutL 217 initDragCutT = _this.data.cutT 218 initDragCutH = _this.data.cutH 219 }, 220 221 // 设置大小的时候触发的touchMove事件 222 dragMove(e) { 223 var _this = this 224 var dragType = e.target.dataset.drag 225 switch (dragType) { 226 case ‘right‘: 227 var dragLength = (sizeConfPageX - e.touches[0].pageX) * dragScaleP 228 if (initDragCutW >= dragLength) { 229 // 如果 移动小于0 说明是在往下啦 放大裁剪的高度 这样一来 图片的高度 最大 等于 图片的top值加 当前图片的高度 否则就说明超出界限 230 if (dragLength < 0 && _this.data.cropperW > initDragCutL + _this.data.cutW) { 231 this.setData({ 232 cutW: initDragCutW - dragLength 233 }) 234 } 235 // 如果是移动 大于0 说明在缩小 只需要缩小的距离小于原本裁剪的高度就ok 236 if (dragLength > 0) { 237 this.setData({ 238 cutW: initDragCutW - dragLength 239 }) 240 } 241 else { 242 return 243 } 244 } else { 245 return 246 } 247 break; 248 case ‘left‘: 249 var dragLength = (dragLength = sizeConfPageX - e.touches[0].pageX) * dragScaleP 250 console.log(dragLength) 251 if (initDragCutW >= dragLength && initDragCutL > dragLength) { 252 if (dragLength < 0 && Math.abs(dragLength) >= initDragCutW) return 253 this.setData({ 254 cutL: initDragCutL - dragLength, 255 cutW: initDragCutW + dragLength 256 }) 257 } else { 258 return; 259 } 260 break; 261 case ‘top‘: 262 var dragLength = (sizeConfPageY - e.touches[0].pageY) * dragScaleP 263 if (initDragCutH >= dragLength && initDragCutT > dragLength) { 264 if (dragLength < 0 && Math.abs(dragLength) >= initDragCutH) return 265 this.setData({ 266 cutT: initDragCutT - dragLength, 267 cutH: initDragCutH + dragLength 268 }) 269 } else { 270 return; 271 } 272 break; 273 case ‘bottom‘: 274 var dragLength = (sizeConfPageY - e.touches[0].pageY) * dragScaleP 275 // console.log(_this.data.cropperH > _this.data.cutT + _this.data.cutH) 276 console.log(dragLength) 277 console.log(initDragCutH >= dragLength) 278 console.log(_this.data.cropperH > initDragCutT + _this.data.cutH) 279 // 必须是 dragLength 向上缩小的时候必须小于原本的高度 280 if (initDragCutH >= dragLength) { 281 // 如果 移动小于0 说明是在往下啦 放大裁剪的高度 这样一来 图片的高度 最大 等于 图片的top值加 当前图片的高度 否则就说明超出界限 282 if (dragLength < 0 && _this.data.cropperH > initDragCutT + _this.data.cutH) { 283 this.setData({ 284 cutH: initDragCutH - dragLength 285 }) 286 } 287 // 如果是移动 大于0 说明在缩小 只需要缩小的距离小于原本裁剪的高度就ok 288 if (dragLength > 0) { 289 this.setData({ 290 cutH: initDragCutH - dragLength 291 }) 292 } 293 else { 294 return 295 } 296 } else { 297 return 298 } 299 break; 300 case ‘rightBottom‘: 301 var dragLengthX = (sizeConfPageX - e.touches[0].pageX) * dragScaleP 302 var dragLengthY = (sizeConfPageY - e.touches[0].pageY) * dragScaleP 303 if (initDragCutH >= dragLengthY && initDragCutW >= dragLengthX) { 304 // bottom 方向的变化 305 if ((dragLengthY < 0 && _this.data.cropperH > initDragCutT + _this.data.cutH) || (dragLengthY > 0)) { 306 this.setData({ 307 cutH: initDragCutH - dragLengthY 308 }) 309 } 310 311 // right 方向的变化 312 if ((dragLengthX < 0 && _this.data.cropperW > initDragCutL + _this.data.cutW) || (dragLengthX > 0)) { 313 this.setData({ 314 cutW: initDragCutW - dragLengthX 315 }) 316 } 317 else { 318 return 319 } 320 } else { 321 return 322 } 323 break; 324 default: 325 break; 326 } 327 }, 328 // 图片上传 329 upLoad: function () { 330 331 }, 332 upEwm: function (e) { 333 var _this = this 334 wx.chooseImage({ 335 count: 1, // 默认9 336 sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图，默认二者都有 337 sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机，默认二者都有 338 success: function (res) { 339 // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 340 var tempFilePaths = res.tempFilePaths; 341 // var mode = parseFloat(e.currentTarget.dataset.current); 342 console.log(‘shangchuan:‘ + tempFilePaths) 343 console.log(e.currentTarget.dataset.which); 344 _this.setData({ 345 imageFixed: true, 346 imageSrc: tempFilePaths.join(), 347 imageNum: e.currentTarget.dataset.which 348 }) 349 // start 350 wx.getImageInfo({ 351 src: _this.data.imageSrc, 352 success: function success(res) { 353 var innerAspectRadio = res.width / res.height; 354 console.log(‘bili‘ + innerAspectRadio) 355 // 根据图片的宽高显示不同的效果 保证图片可以正常显示 356 357 358 if (innerAspectRadio == ‘1‘) { 359 console.log(‘zhengfangxingtu‘) 360 _this.setData({ 361 imageFixed: false, 362 }) 363 // 判断时上传头像还是二维码 364 if (_this.data.imageNum == ‘1‘) { 365 _this.setData({ 366 headImg: tempFilePaths.join() 367 }) 368 } else if (_this.data.imageNum == ‘2‘) { 369 _this.setData({ 370 ewmImg: tempFilePaths.join() 371 }) 372 } 373 374 } else if (innerAspectRadio > 1) { 375 _this.setData({ 376 cropperW: windowWRPX, 377 cropperH: windowWRPX / innerAspectRadio, 378 // 初始化left right 379 cropperL: Math.ceil((windowWRPX - windowWRPX) / 2), 380 cropperT: Math.ceil((windowWRPX - windowWRPX / innerAspectRadio) / 2), 381 // 裁剪框 宽高 382 // cutW: windowWRPX - 200, 383 // cutH: windowWRPX / innerAspectRadio - 200, 384 cutL: Math.ceil((windowWRPX - windowWRPX + 340) / 2), 385 cutT: Math.ceil((windowWRPX / innerAspectRadio - (windowWRPX / innerAspectRadio - 20)) / 2), 386 // 图片缩放值 387 scaleP: res.width * pixelRatio / windowWRPX, 388 // 图片原始宽度 rpx 389 imageW: res.width * pixelRatio, 390 imageH: res.height * pixelRatio 391 }) 392 } else { 393 _this.setData({ 394 cropperW: windowWRPX * innerAspectRadio, 395 cropperH: windowWRPX, 396 // 初始化left right 397 cropperL: Math.ceil((windowWRPX - windowWRPX * innerAspectRadio) / 2), 398 cropperT: Math.ceil((windowWRPX - windowWRPX) / 2), 399 // 裁剪框的宽高 400 // cutW: windowWRPX * innerAspectRadio - 66, 401 // cutH: 400, 402 cutL: Math.ceil((windowWRPX * innerAspectRadio - (windowWRPX * innerAspectRadio - 20)) / 2), 403 cutT: Math.ceil((windowWRPX - 340) / 2), 404 // 图片缩放值 405 scaleP: res.width * pixelRatio / windowWRPX, 406 // 图片原始宽度 rpx 407 imageW: res.width * pixelRatio, 408 imageH: res.height * pixelRatio 409 }) 410 } 411 _this.setData({ 412 isShowImg: true 413 }) 414 wx.hideLoading() 415 } 416 }) 417 418 // end 419 } 420 }) 421 }, 422 /** 423 * 生命周期函数--监听页面显示 424 */ 425 onShow: function () { 426 427 }, 428 429 /** 430 * 生命周期函数--监听页面隐藏 431 */ 432 onHide: function () { 433 434 }, 435 436 /** 437 * 生命周期函数--监听页面卸载 438 */ 439 onUnload: function () { 440 441 }, 442 443 /** 444 * 页面相关事件处理函数--监听用户下拉动作 445 */ 446 onPullDownRefresh: function () { 447 448 }, 449 450 /** 451 * 页面上拉触底事件的处理函数 452 */ 453 onReachBottom: function () { 454 455 }, 456 457 /** 458 * 用户点击右上角分享 459 */ 460 onShareAppMessage: function () { 461 462 } 463 })