ionic2/3实战-图片裁剪

前言

• 本文将介绍两款纯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
• 两者使用的方式和截取风格不同，具体使用哪种各位自行选择