前端图片剪切上传功能是常见的功能，在开发过程中，研发一个这样的功能要花的时间也会很多，现在把一个研发好了的图片剪切插件发出来。支持剪切和大小缩放。
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>
View Code
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 }
View Code
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 right104 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 // 图片原始宽度 rpx114 imageW: res.width * pixelRatio,115 imageH: res.height * pixelRatio116 })117 }118 _this.setData({119 isShowImg: true120 })121 wx.hideLoading()122 }123 })124 },125 126 // 拖动时候触发的touchStart事件127 contentStartMove(e) {128 pageX = e.touches[0].pageX129 pageY = e.touches[0].pageY130 },131 132 // 拖动时候触发的touchMove事件133 contentMoveing(e) {134 var _this = this135 // _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) * dragScaleP139 var dragLengthY = (pageY - e.touches[0].pageY) * dragScaleP140 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.cutW143 var maxY = _this.data.cropperH - _this.data.cutH144 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].pageX150 pageY = e.touches[0].pageY151 },152 153 // 获取图片154 getImageInfo() {155 var _this = this156 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.tempFilePath194 })195 } else if (_this.data.imageNum == ‘2‘) {196 _this.setData({197 ewmImg: res.tempFilePath198 })199 }200 201 }202 })203 })204 // }205 206 207 // })208 },209 210 // 设置大小的时候触发的touchStart事件211 dragStart(e) {212 var _this = this213 sizeConfPageX = e.touches[0].pageX214 sizeConfPageY = e.touches[0].pageY215 initDragCutW = _this.data.cutW216 initDragCutL = _this.data.cutL217 initDragCutT = _this.data.cutT218 initDragCutH = _this.data.cutH219 },220 221 // 设置大小的时候触发的touchMove事件222 dragMove(e) {223 var _this = this224 var dragType = e.target.dataset.drag225 switch (dragType) {226 case ‘right‘:227 var dragLength = (sizeConfPageX - e.touches[0].pageX) * dragScaleP228 if (initDragCutW >= dragLength) {229 // 如果 移动小于0 说明是在往下啦 放大裁剪的高度 这样一来 图片的高度 最大 等于 图片的top值加 当前图片的高度 否则就说明超出界限230 if (dragLength < 0 && _this.data.cropperW > initDragCutL + _this.data.cutW) {231 this.setData({232 cutW: initDragCutW - dragLength233 })234 }235 // 如果是移动 大于0 说明在缩小 只需要缩小的距离小于原本裁剪的高度就ok236 if (dragLength > 0) {237 this.setData({238 cutW: initDragCutW - dragLength239 })240 }241 else {242 return243 }244 } else {245 return246 }247 break;248 case ‘left‘:249 var dragLength = (dragLength = sizeConfPageX - e.touches[0].pageX) * dragScaleP250 console.log(dragLength)251 if (initDragCutW >= dragLength && initDragCutL > dragLength) {252 if (dragLength < 0 && Math.abs(dragLength) >= initDragCutW) return253 this.setData({254 cutL: initDragCutL - dragLength,255 cutW: initDragCutW + dragLength256 })257 } else {258 return;259 }260 break;261 case ‘top‘:262 var dragLength = (sizeConfPageY - e.touches[0].pageY) * dragScaleP263 if (initDragCutH >= dragLength && initDragCutT > dragLength) {264 if (dragLength < 0 && Math.abs(dragLength) >= initDragCutH) return265 this.setData({266 cutT: initDragCutT - dragLength,267 cutH: initDragCutH + dragLength268 })269 } else {270 return;271 }272 break;273 case ‘bottom‘:274 var dragLength = (sizeConfPageY - e.touches[0].pageY) * dragScaleP275 // 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 - dragLength285 })286 }287 // 如果是移动 大于0 说明在缩小 只需要缩小的距离小于原本裁剪的高度就ok288 if (dragLength > 0) {289 this.setData({290 cutH: initDragCutH - dragLength291 })292 }293 else {294 return295 }296 } else {297 return298 }299 break;300 case ‘rightBottom‘:301 var dragLengthX = (sizeConfPageX - e.touches[0].pageX) * dragScaleP302 var dragLengthY = (sizeConfPageY - e.touches[0].pageY) * dragScaleP303 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 - dragLengthY308 })309 }310 311 // right 方向的变化312 if ((dragLengthX < 0 && _this.data.cropperW > initDragCutL + _this.data.cutW) || (dragLengthX > 0)) {313 this.setData({314 cutW: initDragCutW - dragLengthX315 })316 }317 else {318 return319 }320 } else {321 return322 }323 break;324 default:325 break;326 }327 },328 // 图片上传329 upLoad: function () {330 331 },332 upEwm: function (e) {333 var _this = this334 wx.chooseImage({335 count: 1, // 默认9336 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.which348 })349 // start350 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 right379 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 // 图片原始宽度 rpx389 imageW: res.width * pixelRatio,390 imageH: res.height * pixelRatio391 })392 } else {393 _this.setData({394 cropperW: windowWRPX * innerAspectRadio,395 cropperH: windowWRPX,396 // 初始化left right397 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 // 图片原始宽度 rpx407 imageW: res.width * pixelRatio,408 imageH: res.height * pixelRatio409 })410 }411 _this.setData({412 isShowImg: true413 })414 wx.hideLoading()415 }416 })417 418 // end419 }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 })
View Code
原文地址
