小程序_图片剪切功能（支持多图片上传）

Posted 2020-12-31 皮皮是只公喵

前端图片剪切上传功能是常见的功能，在开发过程中，研发一个这样的功能要花的时间也会很多，现在把一个研发好了的图片剪切插件发出来。支持剪切和大小缩放。

---

 

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 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\')
以上是关于小程序_图片剪切功能（支持多图片上传）的主要内容，如果未能解决你的问题，请参考以下文章
 
 小程序多图片上传组件封装及使用
 微信小程序之商品发布+编辑功能（多图片上传功能）
 CKEditor粘贴图片上传功能
 KindEditor3.x-自动上传Word图片功能.
 微信小程序excel添加图片
 微信小程序实现图片是上传预览功能