无比强大的图片裁剪工具库！牛X！

程序员老鱼

发布于 2022-12-02 10:58:59

1.7K0

发布于 2022-12-02 10:58:59

文章被收录于专栏：前端实验室前端实验室

大家好，我是前端实验室的大师兄！

最近项目中入手了一个非常实用的插件，这里和大家一起分享下：通过canvas实现图片裁剪的工具--cropper.js

cropper.js简介

cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持鼠标滚轮操作，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。

特点

支持Promise API。
支持移动触摸事件。
基于canvas技术，支持canvas的浏览器都可以使用该插件。
通过Base64编码导出剪裁后的图片。
可以通过json数据来获取图片的位置和大小。
可以通过json数据来设置图片的位置和大小。
可以通过URL来获取图片。

安装和使用

下载安装

cropper需要配合jQuery使用，因此需要同时引入cropper和jQuery。

# 可以使用npm下载
npm install cropper jquery
# 通过bower安装
$ bower install cropper jquery
# 通过yarn安装
$ yarn add cropper jquery

也可以在浏览器页面中直接引入使用。

<!-- 引入css样式 -->
<link  href="cropper.css" rel="stylesheet">
<!-- 引入js文件 -->
<script src="jquery.js"></script>
<script src="cropper.js"></script>

构建html

<!-- 可以将图片或canvas直接包裹到一个块级元素中 -->
<div class="container">
  <img id="image" src="picture.jpg">
</div>

设置样式

/* 给container元素设置宽高 并且限制图片的宽避免图片溢出容器 */
.container{
  width: 500px;
  height: 500px;
}
.container img {
  max-width: 100%;
}

初始化插件。

// jquery获取元素
var $image = $('#image');
// 通过jquery Dom 的cropper方法初始化
$image.cropper({
  aspectRatio: 16 / 9,
  crop: function(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);
  }
});
// 可以通过Dom对象的data的cropper属性获取初始化后获取Cropper.js实例
var cropper = $image.data('cropper');

配置和方法

大师兄这里略过cropper实例初始化配置的部分，直接来到cropper方法相关的部分--因为配置名和方法名几乎是一致的。

了解了主要的方法后，就能知道相应的配置。我们一起来看下。

getData([rounded])

这是 获取最终裁切图片的信息的方法。

参数 rounded，表示 获取的值是否进行四舍五入, 取true表示进行，默认：false。

重点是这个方法的返回值很有意思。

返回值是最终裁切区域的位置和尺寸数据（基于原始图像的自然尺寸），类型：Object。

x：裁切区域的左偏移值 y：裁切区域的上偏移值 width：裁切区域的宽度 height：裁切区域的高度 rotate：图像的旋转角度 scaleX：应用于图像横坐标的比例因子，图片左右翻转量 scaleY：应用于图像纵坐标的比例因子，图片上下翻转量

根据图例和返回参数的对应，基本把主要的参数都包括。

setData(data)

有个get方法，必然就有set方法

参数格式和getData方法返回的数据格式一样，可以传递一到多个值可选的值。

基于get/set方法的参数，就有对应的单独的方法，如:

move(offsetX[, offsetY])：用相对偏移量来移动画布。
scale(scaleX[, scaleY])：如果scaleX 绝对值为1，则图片宽度不变化；如果 scaleX 为负数，则会以x轴为中心轴翻转。同理 scaleY 也是如此。如果只填了 scaleX 没填 scaleY，则 scaleY 会等于 scaleX。
scaleX(scaleX)：等于 scale(scaleX, 1)。
scaleY(scaleY)：等于 scale(1, scaleY)。
rotate(degree)：旋转图片，degree 为转的角度。大于0向右转，小于0向左转（在当前角度上加上或者减去 degree）。
rotateTo(degree)：旋转图片（直接把当前角度设置为 degree）。