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

2022-12-02 10:58:59 浏览数 (1)

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

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

cropper.js简介

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

特点

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

安装和使用

下载安装

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

代码语言：javascript复制
# 可以使用npm下载
npm install cropper jquery
# 通过bower安装
$ bower install cropper jquery
# 通过yarn安装
$ yarn add cropper jquery

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

代码语言：javascript复制
<!-- 引入css样式 -->
<link  href="cropper.css" rel="stylesheet">
<!-- 引入js文件 -->
<script src="jquery.js"></script>
<script src="cropper.js"></script>

构建html

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

设置样式

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

初始化插件。

代码语言：javascript复制
// 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）。
容器相关方法

这里需要区分几个概念：container、canvas、img和crop box。来张图，大家体会下。

相关的方法如下：

  • getContainerData()：返回容器大小数据。
  • getImageData()：返回图像的位置、大小和其他相关数据。
  • getCanvasData()：返回画布(图像包装器)的位置和大小数据。
  • getCropBoxData()：返回裁剪框的位置和大小数据。
  • getCroppedCanvas([options])：得到一个画布绘制裁剪图像(有损压缩)。如果没有裁剪，则返回绘制整个图像的画布，即会得到一个 HTMLCanvasElement。options = { width, height, minWidth, minHeight, maxWidth, maxHeight, fillColor, imageSmoothingEnabled, imageSmoothingQuality }。

再说一遍：有个get方法，必然就有set方法。set方法我就不列举了。cropper可支持的属性多达39个，也对应有获取和设置的方法。大家可以查阅下面的地址进行查看。

cropper.js地址 https://github.com/fengyuanchen/cropperjs

写在最后

欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

进群方式：在下方公众号后台，回复111，按提示操作即可进群。

canvas json jquery javascript

0 人点赞