微信小程序图片裁剪功能的实现 |
您所在的位置：网站首页 › 小方领怎么裁剪 › 微信小程序图片裁剪功能的实现 |
微信小程序图片裁剪功能的实现
|
文章目录
图片上传与处理图片尺寸适配图片显示与裁剪框裁剪框的拖动与缩放增加canvas并裁剪图片保存图片到相册总结
在之前的博文中，已经介绍了如何使用在前端开发中，实现较方便自由的图片裁剪功能，可见博文：
如何一步步实现图片裁剪功能。
本文将进一步讲述在微信小程序中，我们实现图片裁剪功能需要如何处理，文章末尾将附上小程序端图片裁剪完整源码的下载链接。
在小程序中进行图片裁剪的效果如下图所示：
要做图片裁剪，首先要解决的是图片上传的事情，这块在微信环境下，比较好处理，微信小程序提供了多个文件或图片的操作接口，让我们可以很方便的完成这个步骤。 本博之前关于小程序的图片审核的文章：小程序图片上传与内容安全审核，已介绍了使用 wx.chooseMedia 接口来选择图片文件。 除此外，还可以有其他方式，如 wx.chooseMessageFile 接口可以从聊天记录里选择图片，我们可以综合处理如下： function selectPhoto (callBack) { let itemList = [ '拍照', '从手机相册选择', '从聊天记录选择' ] wx.showActionSheet({ itemList, success: (action) => { if (action.tapIndex === 0) { // 从拍照选择图片，使用 chooseMedia wx.chooseMedia({ sourceType: [ 'camera' ] }) } else if (action.tapIndex === 1) { // 从手机相册选择图片，使用 chooseMedia wx.chooseMedia({ sourceType: [ 'album' ] }) } else if (action.tapIndex === 2) { // 从聊天记录选择图片，使用 chooseMessageFile wx.chooseMessageFile({}) } } }) }其中，showActionSheet 可以显示操作菜单，这个功能也比较常见，可以从拍照、相册、聊天记录里选择文件进行加载：
由于要在前端对图片进行裁剪，使用canvas绘制图片也是不可少的，在绘制之前，我们需要根据图片尺寸进行适配处理。 首先需要做的就是读取图片的尺寸大小，使用小程序的 wx.getImageInfo 接口即可，它能够返回图片原始的宽高属性。 接着，根据图片的宽高属性、系统屏幕的宽高，一起在小程序页面可见区域内设置图片的缩放显示： // 根据窗口大小和图片大小，设置图片显示尺寸以及缩放 // imgHeight 和 imgWidth 表示当前图片的宽高 // 设置图片显示面板的宽高 let panelW = sys.windowWidth - 20 let panelH = sys.windowHeight - 100 if (panelH / panelW >= imgHeight / imgWidth) { panelH = parseInt(panelW * imgHeight / imgWidth) } else { panelW = parseInt(panelH * imgWidth / imgHeight) } // 图片在宽高上的缩放比，用于裁剪图片时计算图片实际尺寸 xScale = panelW / imgWidth yScale = panelH / imgHeight this.setData({ imagePath, // 图片显示面板宽高 panelWidth: panelW, panelHeight: panelH, // 裁剪框的宽高，初始时与图片面板一样 clipWidth: panelW, clipHeight: panelH, // 裁剪的实际宽高 croppingImageWidth: imgWidth, croppingImageHeight: imgHeight })通过以上代码和注释，我们知道了图片加载时，需要计算的几个宽高尺寸值，都是比较重要的。 图片显示与裁剪框下面就可以在页面上显示图片，直接展示图片显示区域的 wxml 代码： |
当前，我们获取到的是图片文件的临时路径，得到图片路径以后，接下来要做的事情，就是如何正确适配的显示出来。【本文地址】
今日新闻 |
推荐新闻 |