突发奇想,整理一下用过的插件,少说废话多做事
插件支持拖动,放大缩小等基本操作,用起来感觉还是挺流畅的
.html
<!-- 显示的照片 -->
<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 = this
const {
cropperOpt
} = this.data
new 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文件就是插件一系列的滑动操作,基本没有什么需要修改的地方,直接用,简单,方便,快捷。
备注:完全不是原创,只是记录一下用过的插件,如有侵权,联系必删