ionic2/3实战-图片裁剪

前言

  • 本文将介绍两款纯js图片裁剪插件,并介绍两者的差异,各位自行选择

插件1

  • AlloyCrop腾讯出品,api也很详细了,在ionic项目使用有个小坑,一会介绍
  • 下载资源,在index.html中引用
    需要alloy_finger.jstransform.jsalloy-crop.js建议在生产环境使用前把3个放在一个js文件中并压缩
  • 使用教程参考官方文档,如下图红色区域是小坑所在位置,添加了一个自定义css,ionic默认的图片最大宽度是100%,这里需要覆盖掉,否则裁剪后的图片有偏差,下图源码点这里

  • 效果演示

插件2

  • Cropper.js,下载cropper.min.csscropper.min.js并在index.html中引入
  • 由于本插上稍微复杂,我这里封装成一个公共组件方便调用,源码点这里
  • 如下图调用插件,传入图片url参数,订阅裁剪结果事件即可;下图代码
  • 效果演示

两者差异

  • AlloyCrop压缩后比较小,配置简单;
  • cropperjs功能强大, 截取后效果相比AlloyCrop强一点点,点这里查看官方demo
  • 两者使用的方式和截取风格不同,具体使用哪种各位自行选择