微信小程序图片裁剪

最新推荐文章于 2026-07-02 17:34:27 发布

原创最新推荐文章于 2026-07-02 17:34:27 发布 · 3w 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

小程序

本文介绍了如何在微信小程序中实现图片裁剪功能。通过使用WeCropper插件，结合WXML和JS代码，设置裁剪参数并监听事件，实现实时预览和裁剪图片。用户可以选择图片，然后进行裁剪，最终获取裁剪后的图片路径。

插件下载网站https://github.com/dlhandsome/we-cropper

在wxml页面添加

<template name="we-cropper">
<canvas
class="cropper {{cutImage}}"
disable-scroll="true"
bindtouchstart="touchStart"
bindtouchmove="touchMove"
bindtouchend="touchEnd"
style="width:{{width}}px;height:{{height}}px;"
canvas-id="{{id}}">
</canvas>
</template>

<view class="cropper-wrapper {{cutImage}}">
<template is="we-cropper" data="{{...cropperOpt}}"/>
<view class="cropper-buttons ">
<view class="upload boxshaw cropperUpload" bindtap="chooseimage">重新选择</view>
<view class="boxshaw getCropperImage" bindtap="getCropperImage">确定</view>
</view>
</view>

对应的js里添加

import WeCropper from '../../utils/we-cropper/we-cropper.js'
const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 100;

Page({

data: {

cropperOpt: {

id: 'cropper',
width,
height,
scale: 2.5,
zoom: 8,
cut: {
x: (width - 300) / 2,
y: (height - 300) / 2,
width: 300,
height: 300
}
}

onLoad: function () {
this.getdata();
const { cropperOpt } = this.data
new WeCropper(cropperOpt)
.on('ready', (ctx) => {
console.log(`wecropper is ready for work!`)
})
.on('beforeImageLoad', (ctx) => {
console.log(`before picture loaded, i can do something`)
console.log(`current canvas context:`, ctx)
wx.showToast({
title: '上传中',
icon: 'loading',
duration: 20000
})
})
.on('imageLoad', (ctx) => {
console.log(`picture loaded`)
console.log(`current canvas context:`, ctx)
wx.hideToast()
})
.on('beforeDraw', (ctx, instance) => {
console.log(`before canvas draw,i can do something`)
console.log(`current canvas context:`, ctx)
})
.updateCanvas();
},
touchStart(e) {
this.wecropper.touchStart(e)
},
touchMove(e) {
this.wecropper.touchMove(e)
},
touchEnd(e) {
this.wecropper.touchEnd(e)

chooseimage: function () {

var that = this;

wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: [type],
success: function (res) {
that.setData({
cutImage: 'show',
addtribeConShow: 'hide'
});
that.wecropper.pushOrign(res.tempFilePaths[0]);
}

})

getCropperImage() {
var that = this;
that.wecropper.getCropperImage((src) => {

if (src) {

//此处添加用户确定裁剪后执行的操作 src是截取到的图片路径

}

效果如下图：