评论

全平台(Vue、React、微信小程序)任意角度旋转 图片裁剪组件

全网唯一支持裁剪图片任意角度旋转、交互体验媲美原生客户端的全平台图片裁剪组件。

SimpleCrop

全网唯一支持裁剪图片任意角度旋转、交互体验媲美原生客户端全平台图片裁剪组件。

Github 地址:https://github.com/newbieYoung/Simple-Crop

特性及优势

和目前流行的图片裁剪组件相比,其优势在于以下几点:

  • 裁剪图片支持任意角度旋转;
  • 支持 Script 标签、微信小程序、React、Vue;
  • 支持移动和 PC 设备;
  • 支持边界判断、当裁剪框里出现空白时,图片自动吸附至完全填满裁剪框;
  • 移动端缩放以双指中心为基准点;
  • 交互体验媲美原生客户端。

示例

微信小程序示例

移动端示例

左侧是 IOS 系统相册中原生的图片裁剪功能,右侧为 SimpleCrop 移动端示例。

可以扫描二维码体验:

或者访问以下链接:

https://newbieyoung.github.io/Simple-Crop/examples/test-2.html

PC 示例

链接如下:

https://newbieyoung.github.io/Simple-Crop/examples/test-1.html

安装

npm install simple-crop

用法

开源许可协议

MIT License.

原理及实现

全平台(Vue、React、微信小程序)任意角度旋转 图片裁剪组件 https://newbieweb.lione.me/2019/05/16/simple-crop/


最后一次编辑于  2020-03-04  
点赞 11
收藏
评论

17 个评论

  • 西卡
    西卡
    2020-08-04

    这个轮子做的不错,感谢作者大大的分享。

    2020-08-04
    赞同
    回复
  • Alam
    Alam
    2020-07-10

    错误提示反映wxss中有不符合微信小程序要求的式样:VM3822:1 Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.(./pages/simple-crop/index.wxss:144:28)

    console.warn @ VM3822:1

    (anonymous) @ VM3966:2

    2020-07-10
    赞同
    回复
  • Alam
    Alam
    2020-07-10

    安卓和苹果手机的结果都是一样的

    2020-07-10
    赞同
    回复
  • Alam
    Alam
    2020-07-10

    使用wx.chooseImage拍照获取图片后,不能填满simple-crop的选择框,需要手动放大,这是什么原因?应该如何处理?

    2020-07-10
    赞同
    回复
  • 攻城狮@射鸡屎
    攻城狮@射鸡屎
    2020-06-17

    大兄弟很666666

    2020-06-17
    赞同
    回复
  • Q1an
    Q1an
    2020-06-10

    为什么临时路径加载不出来阿?

    2020-06-10
    赞同
    回复 1
    • 李洋
      李洋
      2020-06-14
      500 了 错误信息里边不是有吗。。。
      2020-06-14
      回复
  • deja vu
    deja vu
    2020-04-23

    选择很长的图片会直接导致退出小程序,这个怎么解决呢

    2020-04-23
    赞同
    回复 3
    • 李洋
      李洋
      2020-04-23
      消耗内存太多了,微信小程序崩溃
      2020-04-23
      回复
    • deja vu
      deja vu
      2020-04-24回复李洋
      嗯。。。我现在是判断了大小,超过3000px就先裁剪了再用了
      2020-04-24
      回复
    • 五里
      五里
      2021-11-22回复李洋
      裁剪出来模糊,怎么解决
      2021-11-22
      回复

正在加载...

登录 后发表内容