前端图片处理(一) --- Cropper.js

Cropper.js 介绍一个纯 JavaScript 的图片裁剪操作插件库，并且是支持移动端的。简单Dome安装npm install cropperjs引入 Cropper 对象、样式import 'cropperjs/dist/cropper.css'import Cropper from 'cropperjs';Html 代码和初始化代码<img id="image" src="/p

sanye丶

10408人浏览 · 2020-12-24 18:50:47

sanye丶 · 2020-12-24 18:50:47 发布

Cropper.js 介绍

一个纯 JavaScript 的图片裁剪操作插件库，并且是支持移动端的。
安装

npm install cropperjs

引入 Cropper 对象、样式

import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs';

Html 代码和初始化代码

# HTML
<img id="image" src="/path/picture.jpg">

# JS
const image = document.getElementById('image')
const cropper = new Cropper(image)

Cropper 构造函数是库核心，所有操作都是基于它完成，它接受两个参数（new Cropper(element[, options])），第一个是 img 元素对象或者 canvas 元素对象（这个元素会被隐藏，显示的是Cropper的界面，如下图），第二个是一些配置参数对象（options），下面会详细介绍

选项（options）详解

viewMode：默认值 0，可选值 0、1、2、3。控制操作界面的视图行为。0 根据宽高显示图片（宽和高哪个大用哪个），窗口不够就把图片等比例缩放，并且裁剪框（蓝色边框那个小窗口）可以超出图片的边界，可以用鼠标滚轮随便缩放图片。1 在0的基础上做出限制，裁剪框不可以超出图片的边界，鼠标滚轮缩放图片不能小于裁剪框。2 在1的基础上做出限制，图片缩放最小只能是刚刚进来时的大小。3 和2的行为差不多，唯一的区别是，初始化的时候会用图片把窗口填满。
dragMode：默认值crop，可选值crop、move、none。定义界面拖拽的模式。crop 当没有裁剪框的时候拖拽会新建一个裁剪框。move 则会移动图片。none 则拖拽无响应。
initialAspectRatio：值是数字。定义裁剪框的初始长宽比，默认情况下，它与图片的长宽比相同。
aspectRatio：值是数字。定义裁剪框的固定长宽比，默认情况下，裁剪框是自由比例。设置了之后，缩放裁剪框的宽高会是等比缩放的。
data：对象。如果已经存储了以前裁剪的数据，那么在初始化时将这个选项自动传递给 setData 方法。仅当 autoCrop 选项设置为 true 时可用。
preview：一个Element、一组Element、NodeList、或者字符串（选择器）。用来对你的操作后的图片进行预览。预览元素的最大宽高是这个元素设置的宽高，如果脱线超出的话，会进行缩放。如果设置了 aspectRatio 应该确保预览员的宽高比也一致。记得设置 overflow: hidden 不然会显示不正确，因为有溢出。
responsive：默认是 true。true 的时候会在窗口大小发现变化的时候重新渲染操作界面。false 的时候就不会发生变化。
restore：默认是 true。true 的时候会在窗口大小发现变化的时候按比例调整裁剪框。false 的时候会在窗口大小发现变化时把裁剪框恢复为初始化时的大小。
checkCrossOrigin：默认为 true。true 的时候会检查图片是否跨域，如果跨域了就添加一些东西来避免浏览器缓存错误。
checkOrientation：默认为 true。true 的时候会检查 Exif 的方向信息，只有 JPEG 图片可能会包含这个信息。有这个信息就覆盖一些属性值，避免在 IOS 上出现错误。
modal：默认为 true。true 的时候会在裁剪框外的区域会被一层黑色的半透明背景覆盖。false 这不会有这个覆盖。
guides：默认为 true。true 的时候会在裁剪框内有作参考的虚线。false 则没有虚线。
center：默认为 true。true 的时候会在裁剪框中心有作参考的一个小加号。false 则没有。
highlight：默认为 true。true 的时候裁剪框会有一层接近透明的白色前景色。false 则没有。
background：默认为 true。true 的时候会显示界面的背景黑白网格。false 则不会。
autoCrop：默认为 true。true 的时候会在初始化时就有一个裁剪框。false则没有。
autoCropArea：0~1之间的值，默认是0.8。初始化裁剪框的默认大小，0.8即图片宽高 * 0.8。
movable：默认为 true。true 的时候图片可移动即。false则没有 dragMode 为 move 的时候可以拖拽移动图片。false 则无论 dragMode 是否是 move 都拖拽不动图片。
rotatable：默认为 true。true 的时候图片可旋转。
scalable：默认为 true。true 的时候可以缩放图片（改变长宽，并却可以翻转）。
zoomable：默认为 true。true 的时候可以缩放图片（改变焦距）。
zoomOnTouch：默认为 true。true 的时候可以通过触摸缩放图片。
zoomOnWheel：默认为 true。true 的时候可以通过鼠标滚轮缩放图片。
wheelZoomRatio：数值默认为 0.1。通过鼠标滚轮缩放图片时每格缩放的倍数。
cropBoxMovable：默认为 true。true 的时候裁剪框可以拖拽移动。false则不可以，点击拖拽会取消当前裁剪框新建一个新的裁剪框。
cropBoxResizable：默认为 true。true 的时候裁剪框可以调整大小。
toggleDragModeOnDblclick：默认为 true。true 的时候可以通过双击图片切换 “crop” 和 “move” 的拖拽模式（dragMode）
minContainerWidth：默认200（px）。容器的最小宽度。
minContainerHeight：默认100（px）。容器的最小高度。
minCanvasWidth：默认0（px）。图片的最小宽度。
minCanvasHeight：默认0（px）。图片的最小高度。
minCropBoxWidth：默认0（px）。裁剪框的最小宽度。
minCropBoxHeight：默认0（px）。裁剪框的最小高度。
ready：事件函数。容器准备就绪会触发。
cropstart：事件函数。一次裁剪动作开始时触发（不是在新建一个裁剪框时触发）。
cropmove：事件函数。裁剪框移动时触发。
cropend：事件函数。一次裁剪动作结束时触发（不是在关闭一个裁剪框时触发）。
crop：事件函数。裁剪时触发（据观察和cropmove一样，但是比 cropmove 晚触发）。
zoom：事件函数。界面缩放的时候触发。

函数详解

Tip：除了 setAspectRatio 、replace、destroy 之外，其他函数应该在容器 ready 事件触发后再调用。
crop()：生成一个裁剪框（具体样式根据初始化的options生成）。
reset()：将图片和裁剪框重置到初始状态。
clear()：清除裁剪框。
replace(url[, hasSameSize])：替换当前图片的 src，hasSameSize 如果为 true ，当新图片和旧图片大小相同，那么之前在旧图片上的各种操作不会被清除。
disable()：禁止裁剪框被操作。
enable()：解除禁止裁剪框被操作。
destroy()：清除了所有剪裁框，并却会把这个图片对应的实例给销毁，没办法再操作该图片，除非重新初始化。
move(offsetX[, offsetY])：用相对偏移量来移动画布。
zoom(ratio)：根据 ratio 放大缩小，ratio 大于0就是放大，小于0就是缩小（是用原来的 zoom 加上或者减去ratio）。
zoomTo(ratio[, pivot])：根据 ratio 设置的大小，以 pivot 为中心点进行缩放。其中 ratio 必须大于0（直接把原来的 zoom 设置为 ratio）
rotate(degree)：旋转图片，degree 为转的角度。大于0向右转，小于0向左转（在当前角度上加上或者减去 degree）。
rotateTo(degree)：旋转图片（直接把当前角度设置为 degree）。
scale(scaleX[, scaleY])：如果scaleX 绝对值为1，则图片宽度不变化；如果 scaleX 为负数，则会以x轴为中心轴翻转。同理 scaleY 也是如此。如果只填了 scaleX 没填 scaleY，则 scaleY 会等于 scaleX。
scaleX(scaleX)：等于 scale(scaleX, 1)。
scaleY(scaleY)：等于 scale(1, scaleY)。
getData([rounded])：返回最终裁剪区域的位置和大小数据(基于原始图像的自然大小)。rounded 如果为 true 则输出四舍五入的值。返回的数据结构：{ x, y, width, height, rotate, scaleX, scaleY } （可以将数据发送到服务器端直接裁剪图像:）
setData(data)：设置数据，data 为 getData() 返回的数据，用来复现之前完成的裁剪。
getContainerData()：返回容器大小数据。
getImageData()：返回图像的位置、大小和其他相关数据。
getCanvasData()：返回画布(图像包装器)的位置和大小数据。
setCanvasData(data)：用新数据改变画布(图像包装器)的位置和大小。data = { left, top, width, height }
getCropBoxData()：返回裁剪框的位置和大小数据。
setCropBoxData(data)：用新的数据改变裁剪框的位置和大小。data = { left, top, width, height }
getCroppedCanvas([options])：得到一个画布绘制裁剪图像(有损压缩)。如果没有裁剪，则返回绘制整个图像的画布，即会得到一个 HTMLCanvasElement。options = { width, height, minWidth, minHeight, maxWidth, maxHeight, fillColor, imageSmoothingEnabled, imageSmoothingQuality }。
setAspectRatio(aspectRatio)：修改裁剪框的长宽比例，aspectRatio 一定是个正数。
setDragMode([mode])：修改拖住模式，可选值crop、move、none，默认是 none。

如何把用 getData 得到得数据进行裁剪？

笔者在后台使用了 Thumbnailator ，是一个来自 Google 的开源 Java 项目。简单使用，例：

Thumbnails.of(图片原路径)
          .sourceRegion(x, y, width, height)
          .rotate(rotate)
          .scale(scaleX, scaleY)
          .toFile(操作完保存的完整路径包括名字);