mpvue-cropper
wepy 版本 we-cropper
Install
npm install wepy-com-cropper --save
Usage example
<template><view> <cropper :option="cropperOpt" @ready="cropperReady" @beforeDraw="cropperBeforeDraw" @beforeImageLoad="cropperBeforeImageLoad" @beforeLoad="cropperLoad"></cropper> <view class="cropper-buttons"> <view class="upload" @tap="uploadTap"> 上传图片 </view> <view class="getCropperImage" @tap="getCropperImage"> 生成图片 </view> </view></view></template> <script>import wepy from 'wepy'import Cropper from '/wepy-com-cropper'const device = wx.getSystemInfoSync()const width = device.windowWidthconst height = device.windowHeight - 50 export default class Index extends wepy.page { data = { cropperOpt: { width, height, scale: 2.5, zoom: 8, cut: { x: (width - 300) / 2, y: (height - 300) / 2, width: 300, height: 300 } } } components = { cropper: Cropper } events = { cropperReady (...args) { console.log('cropper ready!') }, cropperBeforeImageLoad (...args) { console.log('before image load') }, cropperLoad (...args) { console.log('image loaded') }, cropperBeforeDraw (...args) { // Todo: 绘制水印等等 } } methods = { uploadTap () { wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: (res) => { const src = res.tempFilePaths[0] // 获取裁剪图片资源后,给data添加src属性及其值 this.$invoke('cropper', 'pushOrigin', src) } }) }, getCropperImage () { this.$invoke('cropper', 'getCropperImage').then((src) => { if (src) { wepy.previewImage({ current: '', // 当前显示图片的http链接 urls: [src] // 需要预览的图片http链接列表 }) } else { console.log('获取图片地址失败,请稍后重试') } }) } }}</script> <style>.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; justify-content: center; position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; line-height: 50px;} .cropper-buttons .upload, .cropper-buttons .getCropperImage{ width: 50%; text-align: center;} .cropper{ position: absolute; top: 0; left: 0;} .cropper-buttons{ background-color: rgba(0, 0, 0, 0.95); color: #04b00f;}</style>