2018-8-7 图片裁剪 Javascript 库

本文写于2018年8月7号

这篇文是什么

简短总结最近做"图片裁剪"学到的事情

这篇文对谁有用

即将打算做图片裁剪的 前端程序员。
节省下你的调查时间。

先上结论

我最后选了 cropperjs (Github Star 3997，截止至 2018-8-7）
https://github.com/fengyuanchen/cropperjs
至今用起来很满意（用了2-3天，看文档整合到 Vue.js SPA 项目里）

业务需求

用户提交文章的时候需要一张文章题图。
这张文章题图需要裁剪到特定比例（760宽:430高）
而且裁剪的图片也不能小于 760宽x530高

调查结果

谷歌搜了一圈结果如下：

• Croppr.js - Star 107，看起来挺不错，2年前的项目（粗略看 Github 里的文件时间）
  https://jamesooi.design/Croppr.js/

• Croppie - 这个还挺不错
  https://github.com/foliotek/croppie

• vue-image-crop-upload
  https://github.com/dai-siki/vue-image-crop-upload

• 文档是很漂亮，但是要 jQuery
  https://innostudio.de/fileuploader/

• Top 7: Best image cropping Javascript and jQuery plugins
  https://ourcodeworld.com/articles/read/281/top-7-best-image-cropping-javascript-and-jquery-plugins
  2016年文章

• https://www.webdesignerdepot.com/2018/05/8-free-javascript-image-cropping-scripts-and-plugins/

• croppic - 看起来挺老的
  http://www.croppic.net/

• AlloyCrop
  https://github.com/AlloyTeam/AlloyCrop

• tinycrop - Github Star 23, Github 上应该是不再维护了，都是 2 years ago
  http://webseed.github.io/tinycrop/

• vue-cropper - Github Star 701
  https://github.com/xyxiao001/vue-cropper/

• smartcrop.js - Star 10584 牛逼了，但是是"智能"方向的，我现在还用不上
  https://github.com/jwagner/smartcrop.js

我为什么最后选了 cropperjs

• 文档相对清晰，全，好理解
• 还在维护
• 看起来用的人比较多（Github issue 里中英文问题都有）
• 其实都是对比出来的，看了其他库的官网和文档，觉得这个是最好的

对 cropperjs 唯一不爽的地方

裁剪的时候不能设置最小图片裁剪宽度。
比如图片宽度是 4000x3000，我希望最小裁剪出来是 760x430，不能比这个还小。
我只能自己监听 crop 事件，并用 setCropBoxData 来实现不能小于特定高度。

      let cropperImg = this.$refs['cropperImg']
      
      // 监听 crop 事件，限定不能小于指定大小
      cropperImg.addEventListener('crop', (event) => {
        let minHeight = 430; // 像素
        // 算出图片本身的高度和容器高度的比例。这个比例值后面会用于计算。
        const canvasData = this.cropper.getCanvasData();
        var heightRatio = canvasData.height / canvasData.naturalHeight;
        // 判断并限制图片
        if(event.detail.height < minHeight){
          this.cropper.setCropBoxData({
            left: event.detail.left,
            top: event.detail.top,
            height: minHeight * heightRatio,
          })
        }
        console.log(event.detail.width);
      });

特意去提了个 Github Issue：https://github.com/fengyuanchen/cropperjs/issues/406