微信小程序可移动缩放图片裁剪框
本文共 14820 字，大约阅读时间需要 49 分钟。
效果预览
提示：模拟器下由于微信自己的原因，裁剪按钮会被canvas覆盖，真机测试正常。
前言
图片裁剪框应用很普遍，也有很多成熟的组件，但是很多组件都是固定裁剪框的位置，通过移动图片来完成图片指定区域的裁剪。这种方法比较容易实现，但是同时存在灵活性不高，裁剪区域选择不精确，图片尺寸不能灵活改变的局限性。下面介绍一种通过使用微信小程序canvas来实现一个可移动缩放的图片裁剪框的方法。
技术要点分析
使用canvas组件实现图片裁剪框涉及以下技术内容：
（1）使用canvas绘制图片 （2）绘制图片裁剪框 （3）裁剪框四个缩放点位置计算 （4）裁剪框的移动和缩放 （5）防止裁剪框超出屏幕 （6）在裁剪框发生变化时重绘图片和裁剪框 （7）生成指定图片区域的裁剪图片 以上这些技术的实现需要进行一定的几何计算，在这里，裁剪框的原点坐标是左上角缩放点的坐标，另外三个缩放点可以根据裁剪框的宽度和高度进行坐标偏移得到。具体实现
（0）页面数据结构
data:{ // 是否打开相机拍照 open_camera: true, // 剪切图片的canvas上下文 cut_image_canvas: { }, // canvas实例 mycanvas: { }, // 图片对象 image_obj: { }, // 屏幕宽度和高度 window_width: 0, window_heigt: 0, // 画布宽高 cut_img_canvas_w: 0, cut_img_canvas_h: 0, // 裁剪区域 cut_area: { // 裁剪区域左上角离屏幕原点坐标 x: 0, y: 0, // 裁剪宽高 cut_width: 0, cut_height: 60, // 裁剪区域边框颜色 cut_area_color: 'red', }, // 屏幕像素比 pixelRatio: 1, // 裁剪区域移动和缩放时上一个触摸点坐标 // 用来计算移动距离和移动方向 last_touches_x: 0, last_touches_y: 0, // 裁剪框变换类型，可选值有： // move,left_up_scale,left_down_scale, // right_up_scale,right_down_scale cut_area_change_status: 'move', // 裁剪好的图片临时文件链接 cut_image: ''} （1）wxml，wxss和页面数据初始化
图片裁剪主要涉及的系统参数有三个：屏幕窗口宽度(windowWidth)，窗口高度（windowHeight，除去状态栏和小程序导航栏剩下的高度）和像素比例（pixelRatio,定义参考微信官方文档：）
注意事项： 推荐在page的onReady或者自定义组件的ready生命周期中进行初始化。 wxml：裁剪 拍照 
wxss
/* 拍照按钮 和图片裁剪按钮*/.take_photo { width: 240rpx; height: 96rpx; background: white; z-index: 1000; display: flex; flex-direction: row; align-content: center; align-items: center; justify-content: space-around; justify-items: center; border-radius: 10rpx; background: rgba(0, 0, 0, 0.4); color: white; position: fixed; bottom: 8%; left: 35%; text-align: center; font-size: 30rpx;}/* 拍照和图片裁剪按钮点击态 */.take_photo_hover{ transform: scale(0.9);} js数据初始化
//在page中用时放到onReady方法中ready: function() { const that = this // 获取屏幕宽高和像素比 wx.getSystemInfo({ success: function(res) { that.data.window_heigt = res.windowHeight that.data.window_width = res.windowWidth that.data.pixelRatio = res.pixelRatio }, }) } （2）待裁剪图片生成
微信小程序上的图片来源基本就两种，一种是从相册选取或者相机拍摄，另一种是网络图片，一般情况下图片裁剪主要在用户拍摄并上传图片的时候出现，因此这里使用的待裁剪图片由相机拍摄生成，代码如下：
/** * 拍照 */ take_photo: function() { const that = this //相机上下文对象 const ctx = wx.createCameraContext() ctx.takePhoto({ quality: 'high', success: (res) => { //loading，防止闪屏 wx.showLoading({ title: '', }) // 隐藏相机 that.setData({ open_camera: false }) //创建图片裁剪画布并绘制图片 that.create_cut_image_canvas(res.tempImagePath) } }) }, 微信官方文档：
（3）创建canvas绘制图片和裁剪框
绘制图片到canvas使用的API是drawImage，绘制图片分为两步：
1.根据相机生成的临时图片链接生成要绘制的图片对象。 2.绘制图片 具体实现如下：/** * 创建图片裁剪画布和图片裁剪框 * image_url:要绘制的图片，只接受微信小程序临时文件链接 * 网络图片需要先下载到本地 * */create_cut_image_canvas:function(image_url) { const that=this // 在page中使用时应改为wx.createSelectorQuery() const query = that.createSelectorQuery() query.select('#cut_image_canvas') .fields({ node: true, size: true }) .exec((res) => { //获取画布实例 const canvas = res[0].node that.data.mycanvas = canvas //获取画布上下文 that.data.cut_image_canvas = canvas.getContext('2d') let w = 0 let h = 0 // 根据要绘制的图片调整画布宽高 wx.getImageInfo({ src: image_url, success: function(res) { // 画布宽度 canvas.width = that.data.window_width; w = that.data.window_width // 画布高度 canvas.height = that.data.window_width / res.width * res.height h = canvas.height // 预先设置裁剪区域宽度为屏幕宽度的80% that.data.cut_area.cut_width = 0.8 * w // 预先设定的裁剪区域左上角顶点位置 that.data.cut_area.x = (w - that.data.cut_area.cut_width) / 2 that.data.cut_area.y = (h - that.data.cut_area.cut_height) / 2 // 设置画布宽高 that.setData({ cut_img_canvas_h: h, cut_img_canvas_w: w }) // 绘制图片 that.data.image_obj = canvas.createImage(); that.data.image_obj.src = image_url that.data.image_obj.onload = () => { that.data.cut_image_canvas.drawImage(that.data.image_obj, 0, 0, w, h) // 创建图片裁剪区域 that.create_cut_area() } } }) })} 绘制裁剪框
/** * 绘制裁剪区域 * that:自定义组件实例或page实例，即this */create_cut_area:function() { const that=this // 创建预先选中的图片裁剪区域 that.data.cut_image_canvas.strokeStyle = that.data.cut_area.cut_area_color // 裁剪区域边界线 that.data.cut_image_canvas.strokeRect(that.data.cut_area.x, that.data.cut_area.y, that.data.cut_area.cut_width, that.data.cut_area.cut_height) // 裁剪区域边界的缩放圆点 // 左上角外圆点 that.data.cut_image_canvas.beginPath() that.data.cut_image_canvas.arc(that.data.cut_area.x, that.data.cut_area.y, 5 * that.data.pixelRatio, 0, 2 * Math.PI) that.data.cut_image_canvas.fillStyle = 'white' that.data.cut_image_canvas.fill() // 左上角内圆点 that.data.cut_image_canvas.beginPath() that.data.cut_image_canvas.arc(that.data.cut_area.x, that.data.cut_area.y, 2.5 * that.data.pixelRatio, 0, 2 * Math.PI) that.data.cut_image_canvas.fillStyle = '#1296db' that.data.cut_image_canvas.fill() // 左下角外圆点 that.data.cut_image_canvas.beginPath() that.data.cut_image_canvas.arc(that.data.cut_area.x, that.data.cut_area.y + that.data.cut_area.cut_height, 5 * that.data.pixelRatio, 0, 2 * Math.PI) that.data.cut_image_canvas.fillStyle = 'white' that.data.cut_image_canvas.fill() // 左下角内圆点 that.data.cut_image_canvas.beginPath() that.data.cut_image_canvas.arc(that.data.cut_area.x, that.data.cut_area.y + that.data.cut_area.cut_height, 2.5 * that.data.pixelRatio, 0, 2 * Math.PI) that.data.cut_image_canvas.fillStyle = '#1296db' that.data.cut_image_canvas.fill() // 右下角外圆点 that.data.cut_image_canvas.beginPath() //绘制圆点，半径乘以pixelRatio的目的是在不同屏幕下保持圆点大小一致 that.data.cut_image_canvas.arc(that.data.cut_area.x + that.data.cut_area.cut_width, that.data.cut_area.y + that.data.cut_area.cut_height, 5 * that.data.pixelRatio, 0, 2 * Math.PI) that.data.cut_image_canvas.fillStyle = 'white' that.data.cut_image_canvas.fill() // 右下角内圆点 that.data.cut_image_canvas.beginPath() that.data.cut_image_canvas.arc(that.data.cut_area.x + that.data.cut_area.cut_width, that.data.cut_area.y + that.data.cut_area.cut_height, 2.5 * that.data.pixelRatio, 0, 2 * Math.PI) that.data.cut_image_canvas.fillStyle = '#1296db' that.data.cut_image_canvas.fill() // 右上角外圆点 that.data.cut_image_canvas.beginPath() that.data.cut_image_canvas.arc(that.data.cut_area.x + that.data.cut_area.cut_width, that.data.cut_area.y, 5 * that.data.pixelRatio, 0, 2 * Math.PI) that.data.cut_image_canvas.fillStyle = 'white' that.data.cut_image_canvas.fill() // 右上角内圆点 that.data.cut_image_canvas.beginPath() that.data.cut_image_canvas.arc(that.data.cut_area.x + that.data.cut_area.cut_width, that.data.cut_area.y, 2.5 * that.data.pixelRatio, 0, 2 * Math.PI) that.data.cut_image_canvas.fillStyle = '#1296db' that.data.cut_image_canvas.fill()} （4）计算四个缩放点位置
裁剪框缩放和移动时需要进行重绘，因此需要不断计算新的缩放点位置，计算实现如下：
/** * 获取裁剪框四个缩放点位置 */ get_scale_point_location: function() { const that = this return { // 裁剪框左上角缩放点位置 left_up_point_x: that.data.cut_area.x, left_up_point_y: that.data.cut_area.y, // 左下角缩放点位置 left_down_point_x: that.data.cut_area.x, left_down_point_y: that.data.cut_area.y + that.data.cut_area.cut_height, // 右下角缩放点位置 right_down_point_x: that.data.cut_area.x + that.data.cut_area.cut_width, right_down_point_y: that.data.cut_area.y + that.data.cut_area.cut_height, // 右上角缩放点位置 right_up_point_x: that.data.cut_area.x + that.data.cut_area.cut_width, right_up_point_y: that.data.cut_area.y } }, （5）辨别裁剪框移动和缩放手势
创建完裁剪框之后，接下来需要给裁剪框添加缩放和移动响应，裁剪框缩放和移动的原理是首先根据canvas 使用bindtouchstart绑定的get_cut_area_change_status方法，计算第一次触摸屏幕的位置，根据触点位置判断接下来裁剪框是要进行缩放（触点离缩放点很近）还是移动（触点离缩放点远但是落在裁剪框内），然后根据使用bindtouchmove绑定的cut_area_move_and_scale方法计算触摸移动距离，然后根据之前的判断结果进行响应的缩放和移动。get_cut_area_change_status方法如下：
/** * 根据触点位置辨别是移动还是缩放图片裁剪框 * e:点击事件 */get_cut_area_change_status:function (e) { const that=this // 触摸点位置 let x = e.touches[0].x let y = e.touches[0].y // 复位裁剪框变化状态 that.data.cut_area_change_status = '' // 缩放感应区域半径，触点落入该区域响应缩放 //目的是防止缩放点太小，缩放反应迟钝 let scale_reponse_radius = 30 // 记录当前坐标,用来计算触摸移动距离 that.data.last_touches_x = x that.data.last_touches_y = y // 获取四个缩放点位置 const scale_point_location = that.get_scale_point_location() // 裁剪框左上角缩放点位置 let left_up_point_x = scale_point_location.left_up_point_x let left_up_point_y = scale_point_location.left_up_point_y // 左下角缩放点位置 let left_down_point_x = scale_point_location.left_down_point_x let left_down_point_y = scale_point_location.left_down_point_y // 右下角缩放点位置 let right_down_point_x = scale_point_location.right_down_point_x let right_down_point_y = scale_point_location.right_down_point_y // 右上角缩放点位置 let right_up_point_x = scale_point_location.right_up_point_x let right_up_point_y = scale_point_location.right_up_point_y // 判断是否是在移动裁剪框 if ((left_up_point_x + scale_reponse_radius) < x && x < (right_down_point_x - scale_reponse_radius) && left_up_point_y < y && y < right_down_point_y) { that.data.cut_area_change_status = 'move' } // 按住左上角缩放 if (Math.sqrt(Math.pow(x - left_up_point_x, 2) + Math.pow(y - left_up_point_y, 2)) < scale_reponse_radius) { that.data.cut_area_change_status = 'left_up_scale' } // 按住左下角缩放 if (Math.sqrt(Math.pow(x - left_down_point_x, 2) + Math.pow(y - left_down_point_y, 2)) < scale_reponse_radius) { that.data.cut_area_change_status = 'left_down_scale' } // 按住右上角缩放 if (Math.sqrt(Math.pow(x - right_up_point_x, 2) + Math.pow(y - right_up_point_y, 2)) < scale_reponse_radius) { that.data.cut_area_change_status = 'right_up_scale' } // 按住右下角缩放 if (Math.sqrt(Math.pow(x - right_down_point_x, 2) + Math.pow(y - right_down_point_y, 2)) < scale_reponse_radius) { that.data.cut_area_change_status = 'right_down_scale' }} 缩放感应区域和移动感应区域划分如下：
红圈中就是缩放感应区域，矩形中除去红圈剩下的区域就是移动感应区域。 （6）canvas重绘
canvas重绘的目的是在裁剪框发生变化时，更新canvas，防止裁剪框绘制发生重叠。实现如下：
/** * 画布重绘 */ redraw: function(mode = 0) { const that = this // 清空画布 that.data.cut_image_canvas.clearRect(0, 0, that.data.cut_img_canvas_w, that.data.cut_img_canvas_h) // 重绘图片 that.data.cut_image_canvas.drawImage(that.data.image_obj, 0, 0, that.data.cut_img_canvas_w, that.data.cut_img_canvas_h) // 重绘裁剪框 // mode=0时重绘裁剪框 // mode=1时不绘制裁剪框，防止切图时裁剪框被切入 if (mode == 0) { that.create_cut_area() } }, （7）防止裁剪框超出屏幕边界
裁剪框进行移动和缩放时，可能会超出屏幕，因此需要根据四个缩放点的位置判断是否超出屏幕，在超出屏幕时阻止裁剪框缩放和移动，实现如下：
/** * 防止裁剪框超出屏幕 * that:自定义组件或者页面实例，即this */watch_cut_area_overflow:function () { const that=this // 距离屏幕边界裕度 let margin = 5 * that.data.pixelRatio // 获取四个缩放点位置 const scale_point_location = that.get_scale_point_location() // 裁剪框左上角缩放点位置 let left_up_point_x = scale_point_location.left_up_point_x let left_up_point_y = scale_point_location.left_up_point_y // 左下角缩放点位置 let left_down_point_x = scale_point_location.left_down_point_x let left_down_point_y = scale_point_location.left_down_point_y // 右下角缩放点位置 let right_down_point_x = scale_point_location.right_down_point_x let right_down_point_y = scale_point_location.right_down_point_y // 右上角缩放点位置 let right_up_point_x = scale_point_location.right_up_point_x let right_up_point_y = scale_point_location.right_up_point_y // 裁剪框左边超出屏幕 if (left_up_point_x < margin) { return 1 } //裁剪框右边超出屏幕 if (right_down_point_x > (that.data.window_width - margin)) { return 1 } // 裁剪框上边超出屏幕 if (left_up_point_y < margin) { return 1 } //裁剪框下边超出屏幕 if (right_down_point_y > (that.data.window_heigt - margin)) { return 1 } return 0} （8）裁剪框移动和缩放
做完（4)——(7)所述的工作，接下来可以实现裁剪框的移动和缩放和响应了。具体实现如下：
/** * 裁剪框移动和缩放 * e:微信小程序点击事件 */cut_area_move_and_scale:function(e) { const that=this // 当前触点x和y坐标 let touch_x = e.touches[0].x let touch_y = e.touches[0].y // 坐标变化量 let dx = touch_x - that.data.last_touches_x let dy = touch_y - that.data.last_touches_y // 按住左上角缩放点缩放 if (that.data.cut_area_change_status == "left_up_scale" || that.data.cut_area_change_status == "left_down_scale") { // 更新裁剪框高度 that.data.cut_area.cut_height += -dy that.data.cut_area.cut_width += -dx // 更新左上角坐标 that.data.cut_area.x += dx that.data.cut_area.y += dy // 裁剪框超出屏幕 if (that.watch_cut_area_overflow()) { // 超出屏幕，撤销变化 that.data.cut_area.cut_height -= -dy that.data.cut_area.cut_width -= -dx that.data.cut_area.x -= dx that.data.cut_area.y -= dy return; } // 重绘画布 that.redraw() } // 按住其他缩放点缩放 if (that.data.cut_area_change_status == "right_up_scale" || that.data.cut_area_change_status == "right_down_scale") { // 更新裁剪框高度 that.data.cut_area.cut_height += dy that.data.cut_area.cut_width += dx // 裁剪框超出屏幕 if (that.watch_cut_area_overflow()) { // 超出屏幕，撤销坐标变化 that.data.cut_area.cut_width -= dx that.data.cut_area.cut_height -= dy return; } // 重绘画布 that.redraw() } // 整体移动裁剪框 if (that.data.cut_area_change_status == "move") { // 更新裁剪框左上角坐标量 that.data.cut_area.x += dx that.data.cut_area.y += dy // 裁剪框超出屏幕 if (that.watch_cut_area_overflow()) { // 超出屏幕，撤销坐标增量 that.data.cut_area.x -= dx that.data.cut_area.y -= dy return; } // 重绘画布 that.redraw() } // 更新点坐标 that.data.last_touches_x = touch_x that.data.last_touches_y = touch_y} （9）生成裁剪后的图片及图片预览
最后，还需要把裁剪的图片区域导出成图片，代码实现如下：
/** * 图片裁剪 */ cut_image: function() { const that = this //此处重绘的目的是隐藏裁剪框， //防止裁剪框被切入图片 that.redraw(1) wx.canvasToTempFilePath({ // 除以像素比例，因为切图时使用的是相对像素 x: that.data.cut_area.x / that.data.pixelRatio, y: that.data.cut_area.y / that.data.pixelRatio, //必须取整，否则安卓下回切图失败 width: Math.round(that.data.cut_area.cut_width / that.data.pixelRatio), height: Math.round(that.data.cut_area.cut_height / that.data.pixelRatio), canvas: that.data.mycanvas, filetype: 'png', success: function(res) { console.log("裁剪的图片", res.tempFilePath) // 预览剪切好的图片 that.setData({ cut_image: res.tempFilePath }) }, fail: function(err) { console.log("裁剪图片失败", err) wx.showModal({ title: '错误', content: '剪切图片失败', }) } }, this) } 集成到项目
上述代码已经封装成一个自定义组件，方便集成到项目，如果想要直接在page中使用，直接复制以上代码到相应的page中即可，自定义组件下载地址：
链接：https://pan.baidu.com/s/1p3o1AM5ZOE6y_hnkHNFShw 提取码：wbau转载地址：http://uhet.baihongyu.com/
你可能感兴趣的文章
MySQL in 太多过慢的 3 种解决方案
查看>>
MySQL InnoDB 三大文件日志，看完秒懂
查看>>
Mysql InnoDB 数据更新导致锁表
查看>>
Mysql Innodb 锁机制
查看>>
MySQL InnoDB中意向锁的作用及原理探
查看>>
MySQL InnoDB事务隔离级别与锁机制深入解析
查看>>
Mysql InnoDB存储引擎 —— 数据页
查看>>
Mysql InnoDB存储引擎中的checkpoint技术
查看>>
Mysql InnoDB存储引擎中缓冲池Buffer Pool、Redo Log、Bin Log、Undo Log、Channge Buffer
查看>>
MySQL InnoDB引擎的锁机制详解
查看>>
Mysql INNODB引擎行锁的3种算法 Record Lock Next-Key Lock Grap Lock
查看>>
mysql InnoDB数据存储引擎 的B+树索引原理
查看>>
mysql innodb通过使用mvcc来实现可重复读
查看>>
mysql insert update 同时执行_MySQL进阶三板斧（三）看清“触发器 (Trigger)”的真实面目...
查看>>
mysql interval显示条件值_MySQL INTERVAL关键字可以使用哪些不同的单位值？
查看>>
Mysql join原理
查看>>
MySQL Join算法与调优白皮书（二）
查看>>
Mysql order by与limit混用陷阱
查看>>
Mysql order by与limit混用陷阱
查看>>
mysql order by多个字段排序
查看>>