小程序实现图片裁剪功能
程序员文章站
2022-03-19 14:20:58
...
转载:http://www.tbfl.store/day/mini.html
现在小程序很流行,使用小程序实现的功能也越来越多;很多小程序都有上传头像的功能;而且在上传头像的时候需要对头像进行裁剪
做为程序猿,我们一直保持着:“不能重复造*”的思想态度 ,来使用一款开源的 小程序裁剪API -- we-cropper , Git地址:https://github.com/we-plugin/we-cropper
操作步骤:
1:下载该插件,可使用Git客户端直接clone ,或者直接用浏览器下载压缩包;
2:对压缩包进行解压;
3:将压缩包下的dist文件夹中的文件考到自己的小程序目录下(比如我的目录叫we);
4:使用小程序上传头像:
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
const src = res.tempFilePaths[0];
//将选择的相册照片跳转至cut目录下面的index.wxml
//we-cropper.wxml就是我们直接复制过来的文件
wx.navigateTo({
url: '../cut/index?src=' + src
})
},
})
5:cut/index.wxml 的代码:
<import src="../wx/we-cropper.wxml"/>
<view class="cropper-wrapper">
<template is="we-cropper" data="{{...cropperOpt}}"/>
</view>
<view class="cropper-buttons">
<button class="upload"
bindtap="uploadTap">
重新上传
</button>
<button
class="getCropperImage"
bindtap="mygetCropperImage">
确定
</button>
</view>
6:cut/index.js 代码:
import WeCropper from '../wx/we-cropper.js';
const device = wx.getSystemInfoSync() // 获取设备信息
const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框
const height = device.windowHeight -150
const app = getApp()
Page({
data: {
cropperOpt: {
id: 'cropper', // 用于手势操作的canvas组件标识符
targetId: 'targetCropper', // 用于用于生成截图的canvas组件标识符
pixelRatio: device.pixelRatio, // 传入设备像素比
width, // 画布宽度
height, // 画布高度
src: '',
scale: 2.5, // 最大缩放倍数
zoom: 8, // 缩放系数
cut: {
x: (width - 320) / 2, // 裁剪框x轴起点
y: (width - 320) / 2, // 裁剪框y轴起点
width: 320, // 裁剪框宽度
height: 320 // tore/"裁剪框高度
}
}
},
// 页面onLoad函数中实例化WeCropper
onLoad: function(options) {
const {
cropperOpt
} = this.data;
cropperOpt.src = options.src;
if (cropperOpt.src) {
this.cropper = new WeCropper(cropperOpt)
.on('ready', (ctx) => {
console.log(`wecropper is ready for work!`)
})
.on('beforeImageLoad', (ctx) => {
wx.showToast({
title: '上传中',
icon: 'loading',
duration: 3000
})
})
.on('imageLoad', (ctx) => {
wx.hideToast()
})
}
},
// 插件通过touchStart、touchMove、touchEnd方法来接收事件对象。
touchStart(e) {
this.cropper.touchStart(e)
},
touchMove(e) {
this.cropper.touchMove(e)
},
touchEnd(e) {
this.cropper.touchEnd(e)
},
// 自定义裁剪页面的布局中,可以重新选择图片
uploadTap() {
const self = this
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success(res) {
const src = res.tempFilePaths[0]
self.cropper.pushOrign(src)
}
})
},
// 生成图片
mygetCropperImage(){
var that = this;
this.cropper.getCropperImage((tempFilePath) => {
// tempFilePath 为裁剪后的图片临时路径
if (tempFilePath) {
//TODO 处理逻辑
}else{
console.log('获取图片地址失败,请稍后重试')
}
})
}
})
7:cut/index.wxss代码:
/* pages/cut/index.wxss */
.cropper-wrapper{
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
justify-content: center;
height: 100%;
background-color: #e5e5e5;
}
.cropper-buttons{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
padding: 0 20rpx;
box-sizing: border-box;
line-height: 150px;
}
.cropper-buttons .upload, .cropper-buttons .getCropperImage{
text-align: center;
z-index: 999999;
margin: 10rpx;
background-color: #36ccf9;
}
8:附,小程序一枚: