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高

调查结果

谷歌搜了一圈结果如下:

我为什么最后选了 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

2018-8-7 图片裁剪 Javascript 库
Share this

Subscribe to 1c7 的博客