介绍

cropperjs是一款基于JavaScript的网页端图片裁剪插件，可能相对于图片预览来说，图片的裁剪使用场景貌似并不是很多，但是图片预览插件又要比裁剪插件容易找到，而且从实现难度上来说也不及图片裁剪，今天我们就一起来看看这款良心的图片裁剪插件——Cropperjs

Github

作者的几个经典作品都在Github上，并且都获得不菲的stars，感谢作者提供这么好用的免费插件

https://github.com/fengyuanchen/cropperjs

特性

安装

使用npm安装或者直接下载编译好的js文件

npm install cropperjs

<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

使用

• 语法

new Cropper(element[, options])

1. 类型：HTMLImageElement或HTMLCanvasElement
2. 用于裁剪的目标图像或画布元素。

1. 类型： Object裁剪配置选项。

使用案例：

<div>
  <img id="image" src="picture.jpg">
</div>

img {
  display: block;

  /* This rule is very important, please don't ignore this */
  max-width: 100%;
}

import Cropper from 'cropperjs';

const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  },
});

PS：具体的配置选项可以到Github上查看相关文档，同时也提供了一个在线的预览demo

在线预览Demo

https://fengyuanchen.github.io/cropperjs/

总结

cropperjs是一个纯前端的图片裁剪工具，同时笔者之前文章也介绍过和cropperjs同源作者的另一个佳作viewerjs，这是一个优秀的前端图片预览插件，功能丰富，配置简单，推荐使用，enjoy it！