# ImgCropper 图片裁剪 v1.2.0

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ 小程序
√	√	√	√	√	√	√

# 示例

# 基础用法

<template>
  <pi-img-cropper :src="xxx" @cropped="handleCrop" />
</template>

<script>
export default {
  handleCrop(res) {
    // res = { img: 'xxx', width, height }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11

# 添加水印

<template>
  <pi-img-cropper :src="xxx" @cropped="handleCrop" @afterDraw="handleDraw" />
</template>

<script>
export default {
  handleCrop(res) {
    // res = { img: 'xxx', width, height }
  }

  handleDraw(res) {
    const ctx = res.ctx;
    const x = res.width / 2.0;
    const y = res.height / 2.0;
    ctx.setFontSize(20)
    ctx.setFillColor('#ff0000')
    ctx.fillText('Sadais', x, y)
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Props

提示

裁剪大小 {width, height}
单位：px、rpx、%
若为百分比则相对于当前组件的宽度来计算的 demo (opens new window)

Name	Description	Type	Required	Default
customStyle	自定义样式	`Object`	`false`	`{}`
customClass	自定义样式类	`String`	`false`	`''`
src	图片 src	`String`	`false`	`''`
fileType	图片类型	`String`	`false`	`png`
quality	压缩质量(0,1]	`Number`	`false`	`1`
cropSize	裁剪窗口大小	见 👆 的提示	`false`	{ width: `'50%'`, height: `'50%'`}
minCropSize	最小的裁剪窗口	见 👆 的提示	`false`	{ width: `'50px'`, height: `'50px'`}
boundaryDetect	true: 开启图片边界检测保证移动图片过程,当图片的边与裁剪框的边重叠时就无法继续移动	`Boolean`	`false`	`true`
keepCropRatio	是否保持裁剪框的高宽比不变	`Boolean`	`false`	`false`
disableRotate	是否禁止旋转	`Boolean`	`false`	`false`
canvasZoom	放大裁剪窗口的倍数	`Number`	`false`	1
maskBackground	遮罩层颜色	`String`	`false`	'rgba(0, 0, 0, .5)'

# Events

事件名	描述	参数
beforeDraw	裁剪之前的回调，可以设置 canvas 的一些基本参数比如背景颜色	{ctx, width, height}
afterDraw	裁剪之后的回调，可以在这里绘制水印	{ ctx, width, height }
cropped	裁剪结果回调	{ img: `图片本地路径`or`base64`, width, height}

← Pagination-分页组件 Steps 步骤条 →