小程序图片裁剪

前几天写的项目涉及到图片裁剪：到相册选完图片需要裁剪固定的宽高，看了博客园里面的博客，基本上都是有问题的，要么就是地址失效的，但是有很着急使用，所以今天项目做完，我赶紧来写一个完整版本的；

结尾处有代码包链接：无效的时候提醒我，我立马上传

结尾处有代码包链接：无效的时候提醒我，我立马上传

1. 第一步：
   app.js中添加全局变量imgs:'../../img/defaultImg.png'
   代码如下：

	App({
	  onLaunch: function() {
	  },
	  globalData: {
	    userInfo: null,
	    imgs:'../../img/defaultImg.png',//这个是我的默认图片
	  }
	})

2. 第二步：
   需要展示的界面添加image标签：
   并且defaultImg要在对应的JS文件中的data声明

3. 第三步：
   点击触发的函数名bindtap="bindChooseType" 你可以自定义函数名，函数代码如下：
   成功后有个带参跳转，url: "/pages/center/upload?src=" + tempFilePaths

     bindChooseType(e) {//选择相机还是相册
       var demo=this;
       wx.chooseImage({
         count: 1,
         sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
         sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机，默认二者都有
         success: function (res) {
           // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
           var tempFilePaths = res.tempFilePaths;
           var imgs = app.globalData.imgs;//这里获取到全局变量，没啥用，只是增强你的感觉，毕竟啥都没干呢
           console.log(imgs)
           wx.navigateTo({
             url: "/pages/center/upload?src=" + tempFilePaths
           });
           demo.setData({
             imgs: imgs
           });
         }
       });
     },
   

4. 第四步：
   首先获取上个界面带入的参数，就是选择图片后的临时路径，你可以对照着我的代码包里面的代码查看，裁剪的界面就是upload界面，weCropper是canvas，然后融合到unpload界面
   需要注意的一点就是你的显示范围，或者说是你的截取宽高，裁剪宽高；
   我的是要求750*400的尺寸，你除2就行，x,y,width,height都要改

     data: {
       cropperOpt: {
         id: "cropper",
         width: t,
         height: r,
         scale: 2.5,
         zoom: 8,
         cut: {
           x: (t - 375) / 2,
           y: (r - 200) / 2,
           width: 375,
           height: 200
         }
       }
   

5. 第五步
   点击确定获取到新的图片临时路径tmp，代码如下：
   我写的o就是新的临时路径，然后把这个新的路径放入到全局里面

     getCropperImage: function() {
       this.wecropper.getCropperImage(function(o) {
         console.log("这个是什么鬼" + o);//这里的o就是新的临时路径tmp，
         app.globalData.imgs = o; //这个是上传图片的关键，剪裁后的图片，添加到全局图片中
         // wx.switchTab({
         //   url: "/pages/center/center"
         // })
         wx.navigateBack({})
       });
     },
   

   这里有个注意点，有的人可以用wx.switchTab去关闭当前界面栈返回到上个界面（不懂的去看看界面栈），也可以用wx.navigateBack({})，这个是肯定不会有问题，wx.switchTab我的没反应

6. 第六步
   返回到上个界面怎么局部刷新呢，很简单，调用onShow(){},代码如下：

     onShow(){
       console.log(app.globalData.imgs)
       this.setData({
         defaultImg: app.globalData.imgs
       });
       this.upLoad(app.globalData.imgs)
     },
   

7. 第七部（图片转化为https格式）
   onShow中调用this.upLoad(app.globalData.imgs)方法，代码如下：

     upLoad(e) {
       wx.showLoading({
         title: '上传中...',
       })
       var demo = this;
       return;//自己使用的时候放开
       wx.uploadFile({
         url: 'https://xxxxxxxxxx',//找后端要
         filePath: e,
         name: 'uploadImg',//和后端约定一个明早
         formData: {
           // 'userId': app.globalData.iuserId
         },
         success: function (res1) {
           wx.hideLoading();
         },
       })
     },
   

   解释下，wx.uploadFile就是把微信临时路径传到url对应的服务器，name值你和后端自己约定，然后filePath就是传的参数（临时路径，全局变量的那个），最后返回的就是一个https链接的正常路径，你也可以重新setData，这个时候的图片就可以供你保存图片或者表单提交都可以

你们有任何问题都可以留言区回复，谢谢

代码包地址：https://download.csdn.net/download/shaleilei/10808608
github地址: https://github.com/biubiuvue/imgClips
插件地址： https://github.com/we-plugin/we-cropper