快活林资源网 Design By www.csstdc.com
最近在帮工作室做一个小程序,在换背景图的时候需要预览图片,并且需要裁剪成固定的尺寸。因为小程序并不支持原生的dom操作,导致很多现有的插件都无法使用,所以花了半天专门做了一个小程序的预览裁剪插件。下面贴上代码和效果图。
wxml:
<canvas hidden='{{hide_canvas}}' id='cover-preview' bindtouchstart='canvas_start' bindtouchmove='canvas_move' bindtouchend='canvas_end' disable-scroll='true' canvas-id='cover-preview'> <cover-view catchtap='upload_bg' id='croper-sure'>确定</cover-view> <cover-view catchtap='cancel_croper' id='croper-cancel'>取消</cover-view> <cover-view id='croper'></cover-view> </canvas>
注意:canvas里面一定要用cover-view,否则无法覆盖canvas
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 }) }, })
wxss:
#cover-preview{ width: 100%; height: 100%; background-color: black; } #croper{ width: 750rpx; height: 526rpx; position: absolute; top: 400rpx; left: 0; background-color: rgba(135,206,250,0.5); } #croper-sure{ width: 120rpx; height: 50rpx; border-radius: 10rpx; color: black; background-color: rgba(135,206,250,0.8); font-size: 40rpx; position: absolute; top: 946rpx; right: 10rpx; text-align: center } #croper-cancel{ width: 120rpx; height: 50rpx; border-radius: 10rpx; color: black; background-color: rgba(135,206,250,0.8); font-size: 40rpx; position: absolute; top: 946rpx; right: 150rpx; text-align: center }
效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]