小程式圖片預覽裁剪外掛
阿新 • • 發佈:2019-01-09
js:
const ctx = wx.createCanvasContext('cover-preview'); var start_position = {};//移動圖片時手指起始座標 var tempFilePath;//圖片路徑 var tempWidth;//圖片初始寬度 var tempHeight;//圖片初始高度 var old_x = 0;//圖片初始x座標 var old_y = 0;//圖片初始y座標 var _touches = 1;//觸屏的手指數 var old_scale = 1;//原始放大倍數 var new_scale = 1;//新的放大倍數 var is_move = false;//是否移動 var bg_url; Page({ data: { hide_canvas:true,//繪圖層顯示控制變數 }, //選擇並將圖片輸出到canvas change_cover:function(){ var that = this; wx.showModal({ title: '提示', content: '更改我的封面', confirmColor: '#39bae8', success: function (res) { if (res.confirm) { wx.chooseImage({ count: 1, // 預設9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,預設二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機,預設二者都有 success: function (res0) { tempFilePath = res0.tempFilePaths[0]; that.setData({ hide_canvas: false, // edit_url: tempFilePath }) wx.getImageInfo({ src: tempFilePath, success: function (res) { // console.log(res.width) // console.log(res.height) tempWidth = res.width; tempHeight = res.height; ctx.drawImage(tempFilePath,0, 0, 375,res.height/res.width*375); ctx.draw(); } }) } }) } else if (res.cancel) { console.log('使用者點選取消') } } }) }, //監聽手指觸控事件,並判斷是移動還是縮放,並記錄初始狀態 canvas_start:function(e){ // console.log(e); var touches = e.touches.length; if(touches == 1){ _touches = 1; start_position = { x: e.touches[0].x, y: e.touches[0].y, timeStamp:e.timeStamp} }else if(touches == 2){ _touches = 2; start_position = { x: e.touches[0].x, y: e.touches[0].y,x1: e.touches[1].x, y1: e.touches[1].y, timeStamp: e.timeStamp } }else{ _touches = 1; } }, //監聽手指移動事件,並做出相應調整 canvas_move: function (e) { // console.log(e); var touches = e.touches.length; if (_touches == 1 && e.timeStamp - start_position.timeStamp > 150) { ctx.drawImage(tempFilePath, old_x + e.touches[0].x - start_position.x, old_y + e.touches[0].y - start_position.y, 375 * new_scale, tempHeight / tempWidth * 375 * new_scale); ctx.draw(); is_move = true; } else if (_touches == 2 && e.timeStamp - start_position.timeStamp > 150) { var change_x = Math.abs(Math.abs(e.touches[0].x - e.touches[1].x) - Math.abs(start_position.x - start_position.x1)); var change_y = Math.abs(Math.abs(e.touches[0].y - e.touches[1].y) - Math.abs(start_position.y - start_position.y1)); if(change_x - change_y > 10){ old_scale = Math.abs(e.touches[0].x - e.touches[1].x) / Math.abs(start_position.x - start_position.x1); }else{ old_scale = Math.abs(e.touches[0].y - e.touches[1].y) / Math.abs(start_position.y - start_position.y1); } ctx.drawImage(tempFilePath, old_x, old_y, 375 * old_scale * new_scale, tempHeight / tempWidth * 375 * old_scale * new_scale); ctx.draw(); is_move = true; }else{ is_move = false; } }, //監聽手指離開動作,並儲存當前狀態資料 canvas_end: function (e) { // console.log(e); if (_touches == 1 && is_move) { old_x = old_x + e.changedTouches[0].x - start_position.x; old_y = old_y + e.changedTouches[0].y - start_position.y; } else if (_touches == 2 && is_move) { new_scale = old_scale * new_scale; } }, //確定並上傳背景圖 upload_bg:function(){ var that = this; var screenWidth = wx.getSystemInfoSync().screenWidth; // console.log(screenWidth); wx.canvasToTempFilePath({ x: 0, y: screenWidth / 750 * 400, width: screenWidth, height: screenWidth / 750 * 526, destWidth: screenWidth, screenHeight: screenWidth / 750 * 526, quality:1, canvasId: 'cover-preview', success: function (res) { that.setData({ hide_canvas: true, }) //res.tempFilePath即為生成的圖片路徑 console.log(res.tempFilePath) } }) }, //取消圖片預覽編輯 cancel_croper:function(){ ctx.clearActions(); this.setData({ hide_canvas: true, // edit_url: tempFilePath }) }, })