评论

小程序图片裁剪插件 image-cropper

一款高性能的小程序图片裁剪插件,支持旋转。

之前的插件类目没有了导致搜不到了,重新发个文章。

image-cropper

一款高性能的小程序图片裁剪插件,支持旋转。

优势

1.功能强大。

2.性能超高超流畅,大图毫无卡顿感。

3.组件化,使用简单。

4.点击中间窗口实时查看裁剪结果。

初始准备

1.json文件中添加image-cropper

    "usingComponents": {
       "image-cropper": "../image-cropper/image-cropper"
    },
    "navigationBarTitleText": "裁剪图片",
    "disableScroll": true

2.wxml文件

<image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper>

3.简单示例

    Page({
        data: {
            src:'',
            width:250,//宽度
            height: 250,//高度
        },
        onLoad: function (options) {
	    //获取到image-cropper实例
            this.cropper = this.selectComponent("#image-cropper");
            //开始裁剪
            this.setData({
                src:"https://raw.githubusercontent.com/1977474741/image-cropper/dev/image/code.jpg",
            });
            wx.showLoading({
                title: '加载中'
            })
        },
        cropperload(e){
            console.log("cropper初始化完成");
        },
        loadimage(e){
            console.log("图片加载完成",e.detail);
            wx.hideLoading();
            //重置图片角度、缩放、位置
            this.cropper.imgReset();
        },
        clickcut(e) {
            console.log(e.detail);
            //点击裁剪框阅览图片
            wx.previewImage({
                current: e.detail.url, // 当前显示图片的http链接
                urls: [e.detail.url] // 需要预览的图片http链接列表
            })
        },
    })

参数说明

属性 类型 缺省值 取值 描述 必填
imgSrc String 无限制 图片地址(如果是网络图片需配置安全域名)
disable_rotate Boolean false true/false 禁止用户旋转(为false时建议同时设置limit_move为false)
limit_move Boolean false true/false 限制图片移动范围(裁剪框始终在图片内)(为true时建议同时设置disable_rotate为true)
width Number 200 超过屏幕宽度自动转为屏幕宽度 裁剪框宽度
height Number 200 超过屏幕高度自动转为屏幕高度 裁剪框高度
max_width Number 300 裁剪框最大宽度 裁剪框最大宽度
max_height Number 300 裁剪框最大高度 裁剪框最大高度
min_width Number 100 裁剪框最小宽度 裁剪框最小宽度
min_height Number 100 裁剪框最小高度 裁剪框最小高度
disable_width Boolean false true/false 锁定裁剪框宽度
disable_height Boolean false true/false 锁定裁剪框高度
disable_ratio Boolean false true/false 锁定裁剪框比例
export_scale Number 3 无限制 输出图片的比例(相对于裁剪框尺寸)
quality Number 1 0-1 生成的图片质量
cut_top Number 居中 始终在屏幕内 裁剪框上边距
cut_left Number 居中 始终在屏幕内 裁剪框左边距
img_width Number 宽高都不设置,最小边填满裁剪框 支持%(不加单位为px)(只设置宽度,高度自适应) 图片宽度
img_height Number 宽高都不设置,最小边填满裁剪框 支持%(不加单位为px)(只设置高度,宽度自适应) 图片高度
scale Number 1 无限制 图片的缩放比
angle Number 0 (limit_move=true时angle=n*90) 图片的旋转角度
min_scale Number 0.5 无限制 图片的最小缩放比
max_scale Number 2 无限制 图片的最大缩放比
bindload Function null 函数名称 cropper初始化完成
bindimageload Function null 函数名称 图片加载完成,返回值Object{width,height,path,type等}
bindtapcut Function null 函数名称 点击中间裁剪框,返回值Object{src,width,height}

函数说明

函数名 参数 返回值 描述 参数必填
upload 调起wx上传图片接口并开始剪裁
pushImg src 放入图片开始裁剪
getImg Function(回调函数) Object{url,width,height} 裁剪并获取图片(图片尺寸 = 图片宽高 * export_scale)
setCutXY X、Y 设置裁剪框位置
setCutSize width、height 设置裁剪框大小
setCutCenter 设置裁剪框居中
setScale scale 设置图片缩放比例(不受min_scale、max_scale影响)
setAngle deg 设置图片旋转角度(带过渡效果)
setTransform {x,y,angle,scale,cutX,cutY} 图片在原有基础上的变化(scale受min_scale、max_scale影响) 根据需要传参
imgReset 重置图片的角度、缩放、位置(可以在onloadImage回调里使用)

GitHub

https://github.com/wx-plugin/image-cropper

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

最后一次编辑于  2020-05-17  
点赞 20
收藏
评论

36 个评论

  • Y_Lin
    Y_Lin
    2020-09-14

    请问下这个插件有uniAPP的版本吗?

    2020-09-14
    赞同 2
    回复 4
    • Api调用师
      Api调用师
      2020-10-14
      可以写一个原生语法的页面承载组件,放在静态static文件夹下,要裁剪时跳转到这个页面就好
      2020-10-14
      回复
    • 舟
      09-01回复Api调用师
      大佬,你说的这种承载的方法劳烦给个代码样例吧
      09-01
      回复
    • 舟
      09-01
      大佬解决了吗?
      09-01
      回复
    • Api调用师
      Api调用师
      09-03
      09-03
      回复
  • 郑旭东
    郑旭东
    2020-05-18

    不错

    2020-05-18
    赞同 2
    回复 6
    • 张恒
      张恒
      04-15
      大佬,这个插件很好用,但是插件体积已经60多KB,太大了。可以出一个简化版吗? 裁剪页面只需要4个按钮:旋转、选图、取消、确定。在做插件时,就把锁定宽、锁定高、锁定比例、禁用移动和旋转、这些功能写死,取消上、下、左、右、放大、缩小10个像素这些功能。微信的头像裁剪功能也只有4个按钮:取消、左旋转、右旋转、确定。 操作上,只允许用户触摸放大、缩小图片、裁剪框限制在图里面。 如果您能出一个简化版的,把插件体积控制在20K左右,就完美了。我看您的插件有1000多行代码,其中一些功能真的不需要(让开发者选择是否锁定宽、高、比例,锁旋转锁移动),我们这些小白开发者又不敢去改的你代码,怕改了跑不通。 插件体积小了的话可以运行得更流畅,对于低配手机的用户更友好。大家觉得我的建议提得对的话,请给个赞吧。
      04-15
      1
      回复
    • Api调用师
      Api调用师
      04-19回复张恒
      你是说想把不要的按钮拿掉吗?还是只是插件体积问题
      04-19
      回复
    • 胡欣
      胡欣
      星期二 17:29
      这个DEMO不卡顿是不是用到了wxs 脚本来处理图片的拖动的
      星期二 17:29
      回复
    • 胡欣
      胡欣
      星期二 17:29回复Api调用师
      这个DEMO不卡顿是不是用到了wxs 脚本来处理图片的拖动的
      星期二 17:29
      回复
    • 胡欣
      胡欣
      星期三 09:23
      我实际测试发现拖动有些卡顿的
      星期三 09:23
      回复
    查看更多(1)
  • Y_Lin
    Y_Lin
    2020-09-15

    最好用的裁切组件,没有之一,赞!

    2020-09-15
    赞同 1
    回复 1
    • Api调用师
      Api调用师
      2020-10-14
      谢谢
      2020-10-14
      回复
  • Admin²⁰²¹
    Admin²⁰²¹
    2020-05-16

    体验了一般,这个不错哦。那个小程序的源码git上有吗?我看了demo都是不全的,不是一个完整的项目。

    2020-05-16
    赞同 1
    回复 5
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-05-16
      打错了,是体验了一把,不是体验了一般,这个效果很好,不是一般哈~~
      2020-05-16
      回复
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-05-16回复Admin²⁰²¹
      继续补充,体验很好。各种效果都有,能加上双指触摸旋转图片就完美了。
      2020-05-16
      回复
    • Api调用师
      Api调用师
      2020-05-17回复Admin²⁰²¹
      现在就是双指触摸旋转图片的
      2020-05-17
      回复
    • Api调用师
      Api调用师
      2020-05-17回复Admin²⁰²¹
      完整demo在github最底部有
      2020-05-17
      回复
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-05-19回复Api调用师
      我的锅,我锁定旋转了。默认是锁定的。很好用!
      2020-05-19
      1
      回复
  • Admin²⁰²¹
    Admin²⁰²¹
    2020-05-16

    图片链接失效了。看不到效果呢。

    能补上吗?

    貌似官方有个we-cropper组件,我现在用这个裁剪图片的,image-cropper

    有啥更好的优势吗

    2020-05-16
    赞同 1
    回复 2
    • Api调用师
      Api调用师
      2020-05-16
      优势补上去了,看下
      2020-05-16
      回复
    • Api调用师
      Api调用师
      2020-05-16
      图片是git上的图,在国内可能不太稳定,不行翻墙试下?
      2020-05-16
      回复
  • 草帽男孩
    草帽男孩
    07-19

    大佬,请教一个问题,这个裁剪长图的时候图片会变型的问题怎么解决呢?裁剪出来的图片不是框框里面的,有偏移这个图片很明显宽度被压缩了,然后裁剪出来的图片是这样的:位置也不对

    07-19
    赞同 1
    回复 3
    • 草帽男孩
      草帽男孩
      07-21
      这个问题已经解决了,想问一下,选择图片后,再次点击选择图片,上传的时候哪个加载中一直再转不消失
      07-21
      回复
    • Api调用师
      Api调用师
      07-22
      图片加载完把loading隐藏掉
      07-22
      回复
    • lil
      lil
      09-10
      这个怎么解决的?
      09-10
      回复
  • 山有扶苏
    山有扶苏
    04-23

    我这样写的怎么才能点button拿到裁剪后的图片路径呢

    04-23
    赞同 1
    回复 1
  • 等闲之辈
    等闲之辈
    04-19

    单指可以移动剪裁框吗?

    04-19
    赞同 1
    回复 3
    • Api调用师
      Api调用师
      04-19
      移动不了裁剪框,跟pc端移动裁剪框的裁剪方式不同,这是移动图片
      04-19
      回复
    • 等闲之辈
      等闲之辈
      04-23回复Api调用师
      我想做成,进剪裁页,剪裁框就框住整个图片,请问怎么才能做到?谢谢,
      04-23
      回复
    • Api调用师
      Api调用师
      04-25回复等闲之辈
      哪有这样做的,裁剪框是约束图片的,是要裁剪图片的,不可能被图片约束
      04-25
      回复
  • 张恒
    张恒
    04-15

    大佬,这个插件很好用,但是插件体积已经60多KB,太大了。可以出一个简化版吗? 裁剪页面只需要4个按钮:旋转、选图、取消、确定。在做插件时,就把锁定宽、锁定高、锁定比例、禁用移动和旋转、这些功能写死,取消上、下、左、右、放大、缩小10个像素这些功能。微信的头像裁剪功能也只有4个按钮:取消、左旋转、右旋转、确定。 操作上,只允许用户触摸放大、缩小图片、裁剪框限制在图里面。 如果您能出一个简化版的,把插件体积控制在20K左右,就完美了。我看您的插件有1000多行代码,其中一些功能真的不需要(让开发者选择是否锁定宽、高、比例,锁旋转锁移动),我们这些小白开发者又不敢去改的你代码,怕改了跑不通。 插件体积小了的话可以运行得更流畅,对于低配手机的用户更友好。大家觉得我的建议提得对的话,请给个赞吧。

    04-15
    赞同 1
    回复 3
    • 张恒
      张恒
      04-15
      自己顶自己上去,让大家看到这条建议。
      04-15
      1
      回复
    • Api调用师
      Api调用师
      04-15
      你是说想把不要的按钮拿掉吗?还是只是插件体积问题
      04-15
      回复
    • 草帽男孩
      草帽男孩
      07-19回复张恒
      不需要的方法按钮全部删除不就好了,难道让人家专门给你定制一个版本吗,源码都给你了还不会改吗
      07-19
      回复
  • 安逸
    安逸
    04-15

    体验了一下,此开源项目很不错,很赞!

    反馈一个问题:字段【quality】仅对 jpg 有效,而楼主开源的代码里面导出是 png 格式,导致此参数无效。


    04-15
    赞同 1
    回复 1
    • Api调用师
      Api调用师
      04-25
      是有这个问题
      04-25
      回复

正在加载...

登录 后发表内容