更新记录

1.0.0(2021-10-20)

1.0.0(2021/10/20) 初版


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

组件说明

  • 图片头像剪切缩放返回临时文件地址,选择图片/上传图片自行处理。组件适合小程序,以rpx为单位。移动图片有时候会不顺畅,后续优化,如有小伙伴帮忙解决了这个问题,请不吝帮忙完善;
  • 小程序view不支付双指监控,缩放采用slider组件
  • 希望可以共同完美这个组件;
  • 欢迎各位老板评论、收藏,指教;不定时更新;
  • 长期更新。

参数说明

参数 类型 必填 默认值 说明
boxWidth Number 300 选择框宽(px)
boxHeight Number 300 选择框高(px)
boxLeft Number 225 选择框X坐标(px)
boxTop Number 200 选择框Y坐标(px)
originSrc String '' 源图片地址,需要过小程序的安全验证
originZoom Number 1 源图片缩放比例默认
zoomMin Number 0.01 源图片缩放最小值
zoomMax Number 10 源图片缩放最大值
zoomStep Number 0.01 源图片缩放步长,必须大于0,并且可被(max - min)整除
cutBtnConfirmText String 剪切 确定按钮文案
cutBtnCancelText String 取消 取消按钮文案
callback function ()=>{} 确认剪切回调 有多种回调方式,参看125行

使用方法

导入插件

使用 HBuilderX 导入插件

代码使用

<template>
    <view>
        <cut-component @callback="callback" ref="cut"></cut-component>
    </view>
</template>

<script>
  //  1.引入项目  pages.json文件  easycom.autoscan 配置true时,这步可以省略,有兴趣的小伙伴自行研究
  import cut from '@/uni_modules/components/cut-component/cut-component'
  export default {
        components:{
            //2.使用组件 pages.json文件  easycom.autoscan 配置true时,这步可以省略,有兴趣的小伙伴自行研究
            cut
        },
        methods: {
            // 3.选择图片
            puls(){
                uni.chooseImage({
                    count: 1,
                    success: (res) => {
                        // this.$refs.cut.originSrc = res.tempFilePaths[0];
                        // this.$refs.cut.boxWidth = 300;
                        // this.$refs.cut.boxHeight = 300;
                        this.$refs.cut.show({
                            originSrc: res.tempFilePaths[0],
                            boxWidth: 300,
                            boxHeight: 300,
                        });
                    },
                })
            }
        }
    }
</script>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问