前言
- 本文将介绍两款纯js图片裁剪插件，并介绍两者的差异，各位自行选择
插件1
- AlloyCrop腾讯出品，api也很详细了，在ionic项目使用有个小坑，一会介绍
- 下载资源，在index.html中引用
需要alloy_finger.js、transform.js、alloy-crop.js建议在生产环境使用前把3个放在一个js文件中并压缩
- 使用教程参考官方文档，如下图红色区域是小坑所在位置，添加了一个自定义css，ionic默认的图片最大宽度是100%，这里需要覆盖掉，否则裁剪后的图片有偏差，下图源码点这里
- 效果演示
插件2
-
Cropper.js，下载cropper.min.css和cropper.min.js并在index.html中引入
- 由于本插上稍微复杂，我这里封装成一个公共组件方便调用，源码点这里
- 如下图调用插件，传入图片url参数，订阅裁剪结果事件即可；下图代码
- 效果演示
两者差异
- AlloyCrop压缩后比较小，配置简单；
- cropperjs功能强大, 截取后效果相比AlloyCrop强一点点，点这里查看官方demo
- 两者使用的方式和截取风格不同，具体使用哪种各位自行选择
网友评论