更新记录

1.1.1（2020-11-09）

更新demo

1.1.0（2020-11-03）

• 新增圆形裁剪预览（circleView）
• 遮罩层增加阴影或者外边框模式（maskType）
• 图片增加居中设置（imageCenter）
• 图片增加初始化支持展示原尺寸（fit）
• 增加裁剪框自动重置（resetCut）
• 增加裁剪框API（resetCutReact）
• bugfix

1.0.5（2020-10-20）

1. 修复单位传rpx计算错误的bug
2. 修复部分安卓手机下裁剪没有裁剪遮罩背景的bug
3. 新增裁剪框是否展示边框的配置

平台兼容性

uniapp-nice-cropper

一款转门为uniapp定制的图片裁剪组件

1. 支持多种手势操作

2. 纯CSS实现操作预览，性能高，流畅不卡顿

3. 兼容多个小程序平台

4. 使用简单，高度可配置，并提供丰富的API

各平台支持情况：

由于条件限制，在原生app的表现暂未测试，欢迎测试并提issues

效果预览：

若无法预览图片，将添加DNS解析：151.101.0.133 raw.githubusercontent.com

安装

1. 下载组件目录，并放置至项目的组件目录

2. uniapp插件市场导入

使用方法

1.引入组件

下载仓库中的代码，将src目录下的cropper.js和cropper.vue文件拷贝至项目的组件目录(如components/nice-cropper),然后在页面引入组件

import ImageCropper from '@/components/nice-cropper/cropper.vue'

2. 在Vue实例中声明组件

export default {
  components: {
    ImageCropper
  },
  data() {
    return {
      src: ''
    }
  },
  methods: {
    selectImg() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original'],
        sourceType: ['album', 'camera'],
        success: res => {
          var tempFilePaths = res.tempFilePaths
          this.src = tempFilePaths[0]
        }
      })
    },
    beforeDraw(context, transform) {
      context.setFillStyle('yellow')
      transform.zoom = 2
    },
    afterDraw(ctx, info) {
      ctx.fillText('我是一行文字水印', 20, 20)
      console.log(`当前画布大小：${info.width}*${info.height}`)
    },
    cropped(imagePath, imageInfo) {
      console.log(imagePath, imageInfo)
    }
  }
}

3. 在template模板中使用组件

<template>
  <view class="container">
    <view class="cropper-wrap">
      <image-cropper
        id="image-cropper"
        :zoom="1"
        :angle="0"
        :src="src"
        canvasBackground="red"
        @cropped="cropped"
        @afterDraw="afterDraw"
        @beforeDraw="beforeDraw"
      />
    </view>
    <button @tap="selectImg">上传图片</button>
  </view>
</template>

4. CSS

page {
  /* #ifdef MP-ALIPAY */
  position: absolute;
  width: 100%;
    /* #endif */
  height: 100%;
  border: 1px solid red;
  box-sizing: border-box;
}
.container {
  height: 100%;
}
.cropper-wrap {
  height: calc(100% - 96rpx);
}

组件属性

事件

组件提供了一组事件，用于在各个操作阶段做自定义的操作处理

API（实例方法）

除了事件与基本的组件属性，还可以通过以下实例方法对组件进行相应的操作。获取实例可以通过this.$refs获取

其它

如果你觉得这个组件对你有帮助，感谢加个star。

如果有什么好的建议，欢迎提issues或者提pr