前端图片剪切上传功能是常见的功能，在开发过程中，研发一个这样的功能要花的时间也会很多，现在把一个研发好了的图片剪切插件发出来。支持剪切和大小缩放。
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 })
原文地址：https://www.cnblogs.com/wush-1215/p/9510936.html
时间： 2024-10-12 08:28:09