微信小程序we

程序we"/>

微信小程序we

<!-- 显示的照片 -->
<view class='toux'><image mode='scaleToFill' class='toux1' src="{{img}}" bindtap='chooseimg'></image><image mode='scaleToFill' class='toux2' src='../../images/toux/xiangji.png' bindtap='chooseimg'></image></view><!-- 裁剪  -->
<view class='caijain' wx:if="{{xx}}"><!--start 用户自动截取正方形照片  --><!-- 裁剪区域   重要 --><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='caijananniu'><view class='cxuan' bindtap="chooseimg">重新选择</view><view class='cxuan' bindtap="getCropperImage">确定</view></view></view><!--end 用户自动截取正方形照片  -->
</view>

html页面主要是canvas的使用，没什么需要特别注意的地方

/**
*js中引入插件，很重要，别忘了
*/
import WeCropper from '../../dist/we-cropper.js'
const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 100;
Page({/*** 页面的初始数据*/data: {xx: false,cropperOpt: {  //基础设置 id: 'cropper',width,height,scale: 2.5,zoom: 8,cut: {x: (width - 300) / 2,y: (height - 300) / 2,width: 300,height: 300}},img: '../../images/toux/toux.png',},//选择图片chooseimg: function () {var that = this;wx.chooseImage({// sizeType: ['original', 'compressed'],// sourceType: ['type'],success: function (res) {console.log(res.tempFilePaths[0])that.setData({cutImage: 'show',addtribeConShow: 'hide',xx: true});that.wecropper.pushOrign(res.tempFilePaths[0]);}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = thisconst {cropperOpt} = this.datanew WeCropper(cropperOpt).on('ready', (ctx) => { }).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)},getCropperImage() {var that = this;that.wecropper.getCropperImage((src) => {console.log(src)if (src) {//此处添加用户确定裁剪后执行的操作 src是截取到的图片路径that.setData({xx: false,img: src,})}})}})

js文件就是插件一系列的滑动操作，基本没有什么需要修改的地方，直接用，简单，方便，快捷。

we-cropper.js下载

备注：完全不是原创，只是记录一下用过的插件，如有侵权，联系必删