小程序圖片裁剪

前幾天寫的項目涉及到圖片裁剪：到相冊選完圖片需要裁剪固定的寬高，看了博客園裏面的博客，基本上都是有問題的，要麼就是地址失效的，但是有很着急使用，所以今天項目做完，我趕緊來寫一個完整版本的；

結尾處有代碼包鏈接：無效的時候提醒我，我立馬上傳

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

	App({
	  onLaunch: function() {
	  },
	  globalData: {
	    userInfo: null,
	    imgs:'../../img/defaultImg.png',//這個是我的默認圖片
	  }
	})

2. 第二步：
   需要展示的界面添加image標籤：<image src='{{defaultImg}}'></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地址稍後更新