微信小程序图片上传以及剪切（image-cropper的简单使用）
微信小程序图片上传以及剪切（image-cropper的简单使用）
微信小程序图片上传以及剪切（使用插件image-cropper）
开发到了这个需求，博客鱼龙混杂搜不到合适的，记录一下；
-
首先打开这个地址,并且可以随便看一下,顺便把文件下载下来一份;
https://github.com/we-plugin/we-cropper -
然后打开we-cropper文件夹下的dist,这就是我们所需要的所有东西;
-
给dist文件夹改个名字,拉到我们的项目下;(我改的名字就是we-cropper);
-
下面我们创建一个裁剪图片的新页面(页面中添加也可以便于理解);
-
在我们的新建裁剪页面下的wxml文件下引入:
<!-- 这里引入的是我们刚刚拉进来的那个文件夹下的wxml文件 --><import src="../we-cropper/we-cropper.wxml"/><view class="cropper-wrapper"><template is="we-cropper" data="{{...cropperOpt}}"/><view class="cropper-buttons"><viewclass="upload"bindtap="uploadTap">上传图片</view><viewclass="getCropperImage"bindtap="getCropperImage">生成图片</view></view></view>
- 再在js文件夹下引入:
//注意路径
import WeCropper from '/components/we-cropper/we-cropper'; const device = wx.getSystemInfoSync() // 获取设备信息
const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框
const height = width;
var app = getApp();/*** 页面的初始数据*/data: {//给此插件的相关配置信息cropperOpt: {id: 'cropper', // 用于手势操作的canvas组件标识符targetId: 'targetCropper', // 用于用于生成截图的canvas组件标识符pixelRatio: device.pixelRatio, // 传入设备像素比width, // 画布宽度height, // 画布高度scale: 2.5, // 最大缩放倍数zoom: 8, // 缩放系数cut: {x: (width - 200) / 2, // 裁剪框x轴起点y: (width - 200) / 2, // 裁剪框y轴期起点width: 200, // 裁剪框宽度height: 200 // 裁剪框高度}},//用来储存我们裁剪好的图片;imgPath:'',},onLoad (option) {const { cropperOpt } = this.data// 在页面onLoad函数中实例化WeCropper,并且挂载到page上this.cropper = new WeCropper(cropperOpt).on('ready', (ctx) => {console.log(`wecropper is ready for work!`)}).on('beforeImageLoad', (ctx) => {wx.showToast({title: '上传中',icon: 'loading',duration: 20000})}).on('imageLoad', (ctx) => {wx.hideToast()})}
- 这个时候插件基本配置就可以了,接下来写个选取图片和切割图片的方法;
uploadTap () {const self = this//点击上传图片按钮后获取图片地址，并通过pushOrign方法载入图片wx.chooseImage({count: 1, // 默认9// 可以指定是原图还是压缩图，默认二者都有sizeType: ['original', 'compressed'], // 可以指定来源是相册还是相机，默认二者都有sourceType: ['album', 'camera'], success (res) {const src = res.tempFilePaths[0];self.cropper.pushOrign(src)}})
},//缩放调整画布中的图片直到满意的状态，点击生成图片按钮，导出图片
getCropperImage () {this.wecropper.getCropperImage((tempFilePath) => {// tempFilePath 为裁剪后的图片临时路径if (tempFilePath) {wx.previewImage({current: '',urls: [tempFilePath]});this.setData({imgPath:tempFilePath});//这个地方我们就可以拿到切割后的图片来做相应的操作了} else {console.log('获取图片地址失败，请稍后重试')}})}
- 更多文档说明:
https://we-plugin.github.io/we-cropper/#/