收藏
评论

小程序图片裁剪组件

小程序裁剪组件,支持等比例裁剪,使用简单

miniprogram-cropper-component

小程序裁剪组件,支持等比例裁剪,使用简单。

使用方式

1、首先在page.json文件中引入组件 page.json

{
    ...,
    "usingComponents": {
        "cropper":"cropper的路径/index"
    }
}

2、在页面中使用

<cropper imageSrc="{{imgSrc}}" enableScale="{{true}}" ratio="{{2/1}}" bind:cropperDone="cropperDone" bind:cropperCancel="cropperCancel" bind:cropperFail="cropperFail"></cropper>

组件的props

imageScale(String) : 要裁剪的图片地址,基本上市本地图片地址

enablseScale(Boolean): 是否开启等比例裁剪 可选参数

ratio(Number): 裁剪比例 默认为1 可选参数

cropperDone(Function):裁剪成功的回调

cropperCancel(Function): 裁剪取消的回调

cropperFail(Function):裁剪失败回调

回调

    Page({
        cropperDone(e){
            const{src,cropperData} = e.detail;
            //src 最终裁剪图片地址
            // cropperData 裁剪起点、大小信息
        },

        cropperCancel(){
            // do something
        },

        cropperFail(e){
            const err = e.detail;
            console.log(err);
        }

    })

参考:传送门

收藏

11 个评论

  • 北至
    北至
    2019-02-26

    很好用,谢谢!

    另外请问下,能否实现等比例圆形裁剪

    2019-02-26
    赞同
    回复 4
    • zyl
      zyl
      2019-02-26

      利用canvas  clip方法,圆形裁剪应该好实现 多谢提这个需求,我会考虑的

      2019-02-26
      回复
    • 北至
      北至
      2019-02-26回复zyl

      谢谢提示,也感谢你的开源,解决了我的一个问题。

      2019-02-26
      回复
    • zyl
      zyl
      2019-02-27回复北至

      代码已更新,已支持圆形裁剪

      2019-02-27
      1
      回复
    • 一
      2021-03-12回复zyl
      有没有不规则裁切
      2021-03-12
      回复

正在加载...

登录 后发表内容