收藏
评论

小程序图片裁剪组件

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

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 个评论

  • Skina
    Skina
    2020-06-21

    有个bug,从上面中间那个点放大,框会超过图片

    2020-06-21
    赞同 2
    回复
  • Daite🇨🇳
    Daite🇨🇳
    2021-11-02

    有没有遇到过,实际裁剪出来的图片和缩放框圈定的范围不一致的情况?

    2021-11-02
    赞同
    回复
  • 郭竞贤
    郭竞贤
    2021-07-23

    按确认打印cancel,demo

    2021-07-23
    赞同
    回复 1
    • 郭竞贤
      郭竞贤
      2021-07-23
      这个如何解决
      2021-07-23
      回复
  • 品月🌻
    品月🌻
    2021-05-18

    感谢分享很优秀,已经使用上。

    2021-05-18
    赞同
    回复
  • H
    H
    2021-02-24

    谁有一个页面调用多次出现的问题



    2021-02-24
    赞同
    回复 1
    • 迷死特祁
      迷死特祁
      2021-07-29
      我碰到了,解决了。
      2021-07-29
      回复
  • 带给世界好运的H6
    带给世界好运的H6
    2021-02-02

    太感谢了!找了很久,你这个是最干净的一个!

    2021-02-02
    赞同
    回复
  • 你是暖光i
    你是暖光i
    2021-01-18

    还不错

    2021-01-18
    赞同
    回复
  • .
    .
    2021-01-06

    我裁剪出来的图片怎么是白色的没有图像

    2021-01-06
    赞同
    回复
  • 钢子
    钢子
    2020-12-02

    图片拆剪后的地址可以直接渲染在页面上吗 还是需要下载

    2020-12-02
    赞同
    回复
  • 菠萝吹雪
    菠萝吹雪
    2020-12-01

    好人一生单身,感谢大佬

    2020-12-01
    赞同
    回复

正在加载...

登录 后发表内容