收藏
评论

微信小程序图片裁剪工具we-cropper

扫码查看效果

微信小程序图片裁剪工具we-cropper

travis-ci

一款灵活小巧的canvas图片裁剪器 在线体验

<div style="position:relative;width: 100%"> <img src="https://github.com/we-plugin/we-cropper/blob/master/docs/assets/screenshot.jpg" width="50%" style="position:absolute; left: 50%; transform:translateX(-50%)" /> </div>

Feature

  • 实用的API
  • 灵活的钩子函数
  • 多场景的demo可供参考:
    • 常规裁剪
    • 上传裁剪头像
    • 裁剪网络图片
    • 添加水印
    • 局部裁剪

Usage

克隆项目到你的目录

cd my-project

git clone https://github.com/we-plugin/we-cropper.git

使用编译后的文件dist/weCropper.js

var WeCropper = require('dist/we-cropper')

// ES6(需在开发工具勾选ES6转ES5)
import WeCropper from 'dist/we-cropper'

对插件进行开发调试

npm install

在src下进行文件修改

npm run build

Links

Document

ChangeLog

Example

The MIT License

Contributing

如果你有好的意见或建议,欢迎提issue或pull request

最后一次编辑于  2018-01-18
收藏

26 个评论

  • Baron yin
    Baron yin
    2019-09-16

    为啥经过裁剪之后的图片,更大了啊,本来图片只有30多k,裁剪一半尺寸后变成130多k

    2019-09-16
    赞同 2
    回复 4
    • satan
      satan
      2020-05-07
      本来十几k的证件照 裁完之后四百多k
      2020-05-07
      1
      回复
    • 梵修
      梵修
      2020-09-16
      老哥,你这个问题解决了吗?
      2020-09-16
      回复
    • 🦢
      🦢
      2020-11-25
      兄弟,这个问题解决了吗?
      2020-11-25
      回复
    • 廖湘荣
      廖湘荣
      2021-12-13
      图片需要先绘图到画布里,然后重新采样,重新压缩,可能压缩率没有设置,默认的压缩率非常低,就造成了图片尺寸过大;
      2021-12-13
      回复
  • zhang@h
    zhang@h
    2019-10-15

    多次上传容易闪退

    2019-10-15
    赞同 1
    回复 1
    • 599
      599
      2019-10-18
      不知道是不是同一个问题,是因为调取了多次upload接口导致的
      2019-10-18
      1
      回复
  • 郝慧敏
    郝慧敏
    2021-07-14

    想说一下我用这个插件遇到的问题:

    1. 我们的图片裁剪框宽高比例是不固定的,需要从上个页面传递对应宽高,宽高传递到裁剪页面后对于组件来说相当于宽高的更新,图片裁剪框会位置异常。处理方法:image-cropper.js监听宽高那里更新组件的位置。
    2. 关于生成图片的大小远大于图片本身的大小,因为组件里设置生成的图片格式是png,改成jpg,再把quality参数设置小一点,我的设置为0.5,这样就解决了
    2021-07-14
    赞同
    回复
  • 波吉
    波吉
    2021-05-19

    大佬,文档无法访问啊

    2021-05-19
    赞同
    回复
  • 梵修
    梵修
    2020-09-16

    截图变大的问题,有老哥解决了吗?

    2020-09-16
    赞同
    回复
  • 莫失莫忘
    莫失莫忘
    2020-09-12

    添加水印功能是怎样添加呢?如果多张图片做成拼图情况,也可以分别裁剪可以实现吗?


    2020-09-12
    赞同
    回复
  • 怪我咯
    怪我咯
    2020-05-28

    白底图片,裁剪后会有一条灰色的边框是怎么回事啊

    2020-05-28
    赞同
    回复
  • 倾紫
    倾紫
    2020-02-16

    想问下,在图片裁剪的时候我想给图片上覆盖一些文字,是不是做不到?目前canvas层级太高,都给遮挡了

    2020-02-16
    赞同
    回复
  • 倾紫
    倾紫
    2020-02-16

    放大缩小,滑动用起来感觉有点卡啊

    2020-02-16
    赞同
    回复 10
    • 李洋
      李洋
      2020-03-04
      可以试下 SimpleCrop 全平台(Vue、React、微信小程序)任意角度旋转 图片裁剪组件。
      2020-03-04
      2
      回复
    • Johnsonྀൢ🌾
      Johnsonྀൢ🌾
      2020-07-16回复李洋
      看了下,不错,链接和使用文档,谢谢
      2020-07-16
      回复
    • Johnsonྀൢ🌾
      Johnsonྀൢ🌾
      2020-07-16回复李洋
      找到了:https://gitee.com/mirrors/simplecrop/blob/master/USAGE-wechat.md
      2020-07-16
      回复
    • DEM.0平
      DEM.0平
      2020-09-29回复李洋
      这个厉害。。。裁剪界面非常友好。。。怎么调整支持自定义调整裁剪框大小呢?
      2020-09-29
      回复
    • 传奇小嘻哈
      传奇小嘻哈
      2020-11-13回复李洋
      这个有BUG啊,一直放大,在缩回去 就乱了
      2020-11-13
      回复
    查看更多(5)
  • Kelly
    Kelly
    2019-12-25

    请问下有碰到滑动图片很卡的吗,我运行example滑动图片就很卡,但是“扫码查看效果”的小程序不会卡,不知道什么原因。

    2019-12-25
    赞同
    回复

正在加载...

登录 后发表内容