uniapp：一个多边形图片裁剪插件

插件地址

插件功能

支持多边形图片裁剪，试一试，你会发现可以把图片裁成奇奇怪怪的形状，三角形，菱形，五角星，五边形…
图片来源：目前从相册选择

平台支持：

APP	H5	微信小程序	支付宝小程序	百度小程序	字节跳动小程序	QQ小程序
√	√	√	未测	未测	未测	未测

属性

名称	类型	默认值	说明	版本
side	Number \String	5	边数，圆形使边数多即可，4为菱形，若使用正矩形（长方形，正方形）请rect=true	1.0.0
radius	Number \String	150	半径：边点至中心点距离	1.0.0
rect	Boolean	false	正矩形，为true时，side失效	1.0.0
rectW	Number \String	0	正矩形宽，没有或为0，默认取radius	1.0.0
rectH	Number \String	0	正矩形高，没有或为0，默认取radius	1.0.0
globalAlpha	Number \String	0.6	裁剪蒙层透明度	1.0.0
inner	Boolean	false	启用内多边形	1.0.0
innerTimes	Number\String	2.5	内多边形，靠内的点半径为radius的innerTimes分之一	1.0.0

slots

名称	说明

事件

名称	回调参数	说明
clipImageAfter	src	裁剪之后的图片

示例

<mosowe-clip-image
 :side="side"
 :radius="radius"
 :rect="rect"
 :rectW="rectW"
 :rectH="rectH"
 :globalAlpha="globalAlpha"
 :inner="inner"
 :innerTimes="innerTimes"
 @clipImageAfter="prevImage"/>

<script>
export default {
  name: 'canvas-clip-image',
  components: {},
  data () {
    return {
			showComponent: false,
			side: 3,
			radius: 150,
			rect: false,
			rectW: 300,
			rectH: 300,
			globalAlpha: 0.6,
			inner: false,
			innerTimes: 2.5
    };
  },
  // 页面方法
  methods: {
		// 预览
		prevImage (res) {
			this.showComponent = false;
			uni.previewImage({
				current: 0,
				urls: [res]
			});
		},
		show () {
			this.showComponent = true;
		}
	}
};
</script>