更新记录

3.0.2（2023-06-06） 下载此版本

更新了文档

3.0.1（2022-11-03） 下载此版本

修复 撤销和重做不生效的问题

3.0.0（2022-11-03） 下载此版本

使用wxs重构代码，性能大提升 新增 支持蒙版裁剪，可以裁剪任何形状的图形（详情见demo示例） 新增 支持在弹窗中使用（详情见demo示例） 移除 由于插槽会导致许多问题，实际上开发者自己封装组件反而更简单，所以3.0版本以后移除插槽，2.0迁移教程见 demo:全屏裁剪

平台兼容性

bt-cropper 图片裁切

组件名：bt-cropper

图片裁切组件，在页面中裁切图片，输出裁切后的图片，支持app，小程序，H5

在线体验

将demo编译为微信小程序的时候，一定要填写appid！！！不然无法使用！！

注意事项 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

• 组件需要依赖 sass 插件 ，请自行手动安装
• 只测试了头条小程序，app-vue 安卓，微信小程序和H5 大部分平台应该都没问题了
• 包裹层或裁剪器需要手动指定高度和宽度，推荐手动指定裁剪器的大小，尤其是头条小程序，js有时候获取不到容器的大小
• 如使用过程中有任何问题，或者您有一些好的建议，欢迎联系作者微信:1097122362

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法

示例

<template>
    <view class="container">
        <bt-cropper ref="cropper" :imageSrc="imageSrc"></bt-cropper>
        <button @click="crop">裁切</button>
    </view>
</template>
<style>
    .container{
        /** 外层一定要指定大小 */
        height:100vh;
    }
</style>

export default {
   methods:{
      crop(){
        // 通过组件定义的ref调用cropper方法，返回一个promise对象
        this.$refs.cropper.crop().then((res)=>{
            console.log(res)
        })
      }
   }
}

限定裁切比例

bt-cropper，指定ratio即可设置裁切框的宽高比，如果你想让用户自由缩放，将ratio设置为0即可

示例

<bt-cropper ref="cropper" :ratio="16/9":imageSrc="imageSrc"></bt-cropper>

API

cropper Props

cropper Methods

cropper Events

帮助

在使用中如遇到无法解决的问题，请提 Issues 或者加我 微信:1097122362。