uni-app相片裁剪插件（简易版）

目录

一、裁剪插件效果图

二、插件使用

1.引用插件

2.完整代码 

插件地址：bt-cropper图片裁剪插件 - DCloud 插件市场

---

一、裁剪插件效果图

注：该插件是结合自定义相机使用的，也可单独使用选择照片进行裁剪功能，则不需要拍照 

二、插件使用

1.插件引用

注：引用该插件前请先前往插件市场将该插件导入项目中 

<bt-cropper ref="cropper" :fileType="'jpg'" :ratio="16/20" :imageSrc="imageSrc" />

2.插件属性Props

|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|ratio|number|0|裁切图像的宽高比，0表示自由比例|
|dWidth|number|0|生成的图片的宽度,单位：px,如果传入0的话就是按原像素的比例裁剪，也就是说，输出图片的清晰度和输入图片的清晰度一样|
|imageSrc|String|''|原图的路径，支持本地路径和网络路径，如果是网络路径，小程序要注意配置下载域名，H5要注意跨域问题|
|mask|String|''| 裁剪的蒙版url，配合蒙版可以裁剪出任何形状的图形 (示例见全屏裁剪demo) |
|fileType|String|'jpg'|目标文件的类型，只支持 'jpg' 或 'png'。默认为 'jpg'|
|quality|Number|1|图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理|
|showGrid|Boolean|false|是否显示中心网格线，默认不显示|
|initPosition|object|null|图片自定义的初始的位置，内容格式见change事件|
|autoZoom|Boolean|true|是否开启操作结束后自动放大到窗口大小|
|containerSize|object|null|手动指定容器大小，如果裁剪器放在大小会移动或缩放的dom中，则必须手动指定大小，可以带上单位，如果不带单位默认px，支持的单位有：rpx，px，vw，vm,示例：{width:100,height:1100}或者：{width:'100rpx',height:'100rpx'}|
|canvas2d|Boolean|false| 是开启 2d canvas |

3.插件方法Methods

|方法名称|说明|参数|
|:-:|:-:|:-:|
|crop|裁剪图片|开始绘制并开始裁剪图片，返回Promise对象|
|init|初始化,图片路径变化的时候自动调用此方法，如果包裹的dom大小变化了，你需要手动调用此方法|-|
|initCropper|重置裁剪框和图片的位置和大小到初始的位置和大小|-|
|undo|撤销，最多可以回退10步|-|
|resume|重做|-|

 4.插件事件Events 

|方法名称|说明|返回值|
|:-:|:-:|:-:|
|change|当裁剪框和图片的相对位置发生变化的时候触发，返回裁剪框与图片的相对位置|ev={left:number,top:number,width:number,height:number}|
|loadFail|当图片加载失败时触发| - |
|cropStart|当裁开始时触发| - |

5.完整代码 

<template>
	<view class="container">
		<bt-cropper ref="cropper" :fileType="'jpg'" :ratio="16/20" :imageSrc="imageSrc" />
		<view class="footer">
			<view class="btn-1">
				<u-button shape="circle" type="warning" text="重新拍照" @click="close" />
			</view>
			<view class="btn-2">
				<u-button shape="circle" type="primary" text="确定选择" @click="crop" />
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				imageSrc: "",
			}
		},
		onLoad(option) {
			// 选择照片信息
			let data = JSON.parse(option.data);
			this.imageSrc = decodeURIComponent(data.tempImagePath)
		},
		methods: {
			// 裁剪回调函数方法
			crop() {
				// 通过组件定义的ref调用cropper方法，返回一个promise对象
				this.$refs.cropper.crop().then((res) => {
					let pages = getCurrentPages() //获取当前页面栈实例
					let prevPage = pages[pages.length - 3] //获取上一页面栈实例，-3 == 上上一个页面栈实例
					//返回上一页并传递所需当前页面栈参数
					prevPage.$vm.getValue(JSON.stringify({
						tempFilePath: res
					}))
					// 返回页面栈
					uni.navigateBack({
						delta: 2
					})
				})
			},
			// 重新拍照，关闭裁剪
			close() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		/** 外层一定要指定大小 */
		height: 100vh;

		.footer {
			width: 100%;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 20;
			background: #000;
			display: flex;
			align-items: center;
			padding-top: 25rpx;
			padding-bottom: 50rpx;

			.btn-1,
			.btn-2 {
				width: 40%;
				margin: auto;
			}
		}
	}
</style>