1. 介绍
Cropper.js 是一个轻量级的 JavaScript 插件,用于在网页中实现图像裁剪功能。它提供了一个用户友好的界面,允许用户选择和裁剪图像,支持多种配置选项和功能。以下是一些关键特点:
- 简单易用:用户可以通过拖动和缩放来选择裁剪区域,操作直观。
- 多种裁剪模式:支持自由裁剪、固定比例裁剪、圆形裁剪等。
- 响应式设计:适配不同屏幕尺寸,确保在各种设备上都能良好展示。
- 图像预览:可以实时预览裁剪后的图像效果。
- 支持多种格式:支持 JPEG、PNG 等多种图像格式的导入和导出。
- 事件和回调:提供丰富的事件和回调函数,方便开发者进行自定义扩展。
- API 接口:提供简单的 API 方法,便于控制裁剪行为和获取裁剪结果。
Cropper.js 在图像处理、用户头像上传等场景中非常实用,广泛应用于各类网站和应用中。
2. 基础使用
今天我们要做就是一个这样的Demo.
- 图片上传
- 图片裁剪
- 图片旋转
- 图片缩放
- 图片导出
其中对于2
图片裁剪
我们将会讲解一些一般网站常用的配置项目.
先看GIF效果
那我们就开始吧
2.1 引入cdn链接, 初始化样式, 实例化Cropper对象
引入cdn链接
js
<link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css"> <script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>
初始化dom结构 + 样式
html
<div class="container"> <!-- 原图 --> <div class="imagebox"> <img id="image" src="/image/zrn4.jpg" width="100" alt="Picture"> </div> <!-- 一系列操作按钮 --> <button id="crop">确认裁剪</button> <button id="rotate">rotate</button> <button id="reset">reset</button> <button id="clear">clear</button> <button id="replace">replace</button> <button id="destroy">destroy</button> <button id="zoomIn">zoomIn</button> <button id="zoomOut">zoomOut</button> <button id="setAspectRatio">setAspectRatio</button> <button id="export">export</button> <!-- 裁剪之后的预览 --> <div class="imagebox"> <img id="preview" src="https://www.luoxiao123.cn/images/2016/10/300x200-1.jpg" alt="Preview"> </div> </div>
下面就是css样式了
css
* { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; height: auto; padding: 20px; overflow-x: hidden; background-color: #f5f5f5; } .container { display: flex; align-items: center; justify-content: space-around; gap: 20px; } .imagebox { width: 300px; } .imagebox img { width: 100%; height: 100%; object-fit: cover; object-position: center; } #crop { width: 150px; height: 50px; border-radius: 15px; background-color: #000; color: #fff; line-height: 50px; text-align: center; cursor: pointer; transition: all 0.5s; border: none; } #crop:hover { background-color: #4d70ff; color: #fff; border: none; } /* 小尺寸宽 */ @media screen and (max-width: 768px) { .container { flex-direction: column; } }
实例化Cropper对象
js
const image = document.getElementById('image'); const cropper = new Cropper(image, {})
此时页面是这样的
2.2 设置裁剪比例
js
aspectRatio: 4 / 3, // 裁剪比例
常用的裁剪比例:
- 1:1 - 正方形裁剪
- 4:3 - 常见的照片比例
- 16:9 - 高清视频和宽屏照片
- 3:2 - 经典相机照片比例
也可以自定义比例, 比如:
js
aspectRatio: 1 / 2, // 裁剪比例
2.3 设置裁剪区域的显示模式
- 0: 默认模式,裁剪框可以超出图像边界。
- 1: 裁剪框保持在图像内部,图像可以被缩放。
- 2: 裁剪框保持在图像内部,图像不能被缩放。
- 3: 裁剪框保持在图像内部,图像可以被缩放,但裁剪框会根据图像的大小自动调整。
这个大家可以下去自行去试试.
js
const cropper = new Cropper(image, { aspectRatio: 1 / 3, // 裁剪比例 viewMode: 1, // 裁剪模式 })
2.4 是否可以移动裁剪区域
js
cropBoxMovable: true, // 允许移动裁剪框
默认情况下, cropBoxMovable为true. 一般情况我们都会允许用户自行移动裁剪框的.
2.5 调整裁剪框大小
js
cropBoxResizable: true, // 允许调整裁剪框大小
但是我们发现,当我们调整的时候它是按照等比例进行改变的. 如果我们只需要移动一边的大小, 其他边保持不变的话, 我们就需要将裁剪比例
设置为NaN
js
aspectRatio: NaN, // 允许自由调整裁剪区域 viewMode: 1, // 设置裁剪模式
2.6 拖动模式
arduino
js dragMode: 'move', // 拖动模式
- 'crop' : 创建一个新的裁剪框(默认)。
- 'move' : 移动画布。
- 'none' : 没有操作。
2.7 响应式设计
Cropper.js 支持响应式设计,可以自动调整裁剪框的大小以适应容器的变化:
arduino
js responsive: true, // 响应式设计
当设置为 true
时,Cropper.js 会在窗口大小变化时重新渲染裁剪区域。
2.8 模态层和指示线
arduino
js modal: true, // 显示黑色模态层 guides: true, // 显示虚线指示
模态层可以更清晰地看到裁剪区域,指示线则提供了裁剪框的可视化辅助。
2.9 自动裁剪和裁剪区域大小
arduino
js autoCrop: true, // 启用自动裁剪 autoCropArea: 0.8, // 自动裁剪区域大小(百分比)
这可以在初始化时自动创建裁剪框,并允许您设置裁剪框的初始大小。
3. 一些实用方法
3.1 reset() 重置
重置图片和裁剪框到初始状态
js
// 重置 document.getElementById('reset').addEventListener('click', () => {cropper.reset()});
3.2 clear() 清除
js
// 清除 document.getElementById('clear').addEventListener('click', () => {cropper.clear()});
3.3 replace() 替换
js
// 替换 document.getElementById('replace').addEventListener('click', () => { cropper.replace('https://img95.699pic.com/photo/40250/3647.jpg_wh300.jpg')});
3.4 destory() 销毁
js
// 销毁 document.getElementById('destroy').addEventListener('click', () => cropper.destroy()})
3.5 zoomIn() 放大
js
// 放大 document.getElementById('zoomIn').addEventListener('click', () => { cropper.zoom(0.1); });
3.6 zoomOut() 缩小
js
// 缩小 document.getElementById('zoomOut').addEventListener('click', () => { cropper.zoom(-0.1); });
3.7 setAspectRatio() 设置裁剪框的宽高比
js
// 设置裁剪框的宽高比 document.getElementById('setAspectRatio').addEventListener('click', () => { cropper.setAspectRatio(16 / 9); });
3.8 getCroppedCanvas() 导出图片
js
// 导出图片 document.getElementById('export').addEventListener('click', () => { const base64Image = cropper.getCroppedCanvas().toDataURL('image/jpeg'); // 打印 console.log(base64Image); // 设置预览图像的 src preview.src = base64Image; // 点击下载 const link = document.createElement('a'); link.href = base64Image; link.download = 'cropped-image.jpg'; link.click(); });
API 讲解
1. getCroppedCanvas()
getCroppedCanvas()
方法是 cropper.js 提供的一个方法,它返回一个 HTMLCanvasElement
对象,这个对象包含了裁剪框内的图像内容
。使用这个方法时,Cropper 实例会基于当前的裁剪区域生成一个新的画布(canvas),并且画布上只有裁剪框内的图像。
这个方法可以接受一个可选的配置对象,用于指定裁剪画布的宽度和高度,以及是否进行裁剪操作。以下是该方法的一些参数:
width
:裁剪后画布的宽度(像素)。如果不指定,默认使用裁剪框的宽度。height
:裁剪后画布的高度(像素)。如果不指定,默认使用裁剪框的高度。minWidth
:裁剪后画布的最小宽度。minHeight
:裁剪后画布的最小高度。maxWidth
:裁剪后画布的最大宽度。maxHeight
:裁剪后画布的最大高度。fillColor
:填充画布背景的颜色。imageSmoothingEnabled
:是否启用图像平滑处理。imageSmoothingQuality
:图像平滑处理的质量。
2. toDataURL()
toDataURL()
是 HTMLCanvasElement 对象
的一个方法,它将画布上的内容导出为 base64 编码的字符串
。这个字符串表示了一个图片的 data URI,可以直接用于网页中作为 src
属性的值,或者发送到服务器。
这个方法可以接受几个参数:
type
:指定导出的图片格式,如'image/jpeg'
、'image/png'
等。如果不指定,默认为'image/png'
。encoderOptions
:一个在指定图片格式为'image/jpeg'
或'image/webp'
时可用的参数,它代表图片的质量,范围从 0 到 1,其中 1 表示最高质量。
效果展示:
完整代码.
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Cropper</title> <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; height: 100vh; padding: 20px; display: flex; align-items: center; overflow-x: hidden; background-color: #f5f5f5; } .container { display: flex; align-items: center; justify-content: space-around; gap: 20px; } .imagebox { width: 300px; } .imagebox img { width: 100%; height: 100%; object-fit: cover; object-position: center; } #crop { width: 150px; height: 50px; background-color: #000; color: #fff; cursor: pointer; transition: all 0.5s; border: none; } #crop:hover { background-color: #4d70ff; color: #fff; border: none; } button{ padding: 1rem; border: none; border-radius: 5px; background-color: #000; color: #fff; cursor: pointer; margin: 0.5rem; } button:hover{ background-color: #96459f; color: #fff; border: none; } /* 小尺寸宽 */ @media screen and (max-width: 768px) { .container { flex-direction: column; } } </style> </head> <body> <div class="container"> <!-- 原图 --> <div class="imagebox"> <img id="image" src="/image/zrn4.jpg" width="100" alt="Picture"> </div> <!-- 裁剪确认按钮 --> <button id="crop">确认裁剪</button> <button id="rotate">旋转</button> <button id="reset">重置</button> <button id="clear">清除</button> <button id="replace">替换</button> <button id="destroy">销毁</button> <button id="zoomIn">放大</button> <button id="zoomOut">缩小</button> <button id="setAspectRatio">设置裁剪框的宽高比</button> <button id="export">导出</button> <!-- 预览 --> <div class="imagebox"> <img id="preview" src="https://www.luoxiao123.cn/images/2016/10/300x200-1.jpg" alt="Preview"> </div> </div> <script src="https://unpkg.com/cropperjs/dist/cropper.js"></script> <script> const image = document.getElementById('image'); const cropper = new Cropper(image, { aspectRatio: 4 / 3, // 裁剪比例 viewMode: 0, // 裁剪模式 cropBoxMovable: true, // 允许移动裁剪框 cropBoxResizable: true, // 允许调整裁剪框大小 // zoomable: true, // 允许缩放 // zoomOnTouch: true, // 不允许触摸缩放 // zoomOnWheel: true, // 不允许鼠标滚轮缩放 // zoomOnDoubleClick: true, // 不允许双击缩放 // toggleDragModeOnDblclick: false, // 不允许双击切换拖拽模式 // responsive: true, // 响应窗口大小变化 autoCropArea: 0.5, // 自动裁剪区域的比例(裁剪框的默认宽高比) // modal: true, // 取消遮罩层 background: false, // 取消背景 // guides: true, // 显示裁剪框内部的网格线 // dragMode: 'corp', // 拖动模式 rotatable: true, // 允许旋转 // crop: function (e) { // // 裁剪框发生变化时触发 // console.log('e', e); // }, // ready: function (e) { // // 裁剪框初始化完成时触发 // console.log('ready' + e.type, e); // }, }); // 裁剪 document.getElementById('crop').addEventListener('click', () => { const croppedCanvas = cropper.getCroppedCanvas(); const base64Image = croppedCanvas.toDataURL('image/jpeg'); // 将裁剪后的图片base64编码保存到服务器 // 打印 console.log(base64Image); // 设置预览图像的 src preview.src = base64Image; }); // 旋转裁剪框 document.getElementById('rotate').addEventListener('click', () => { cropper.rotate(90); }); // 重置 document.getElementById('reset').addEventListener('click', () => { cropper.reset(); }); // 清除 document.getElementById('clear').addEventListener('click', () => { cropper.clear(); }); // 替换 document.getElementById('replace').addEventListener('click', () => { cropper.replace('https://img95.699pic.com/photo/40250/3647.jpg_wh300.jpg'); }); // 销毁 document.getElementById('destroy').addEventListener('click', () => { cropper.destroy(); }) // 放大 document.getElementById('zoomIn').addEventListener('click', () => { cropper.zoom(0.1); }) // 缩小 document.getElementById('zoomOut').addEventListener('click', () => { cropper.zoom(-0.1); }) // 设置裁剪框的宽高比 document.getElementById('setAspectRatio').addEventListener('click', () => { cropper.setAspectRatio(16 / 9); }) // 导出图片 document.getElementById('export').addEventListener('click', () => { const base64Image = cropper.getCroppedCanvas().toDataURL('image/jpeg'); // 将裁剪后的图片base64编码保存到服务器 // 打印 console.log(base64Image); // 设置预览图像的 src preview.src = base64Image; // 点击下载 const link = document.createElement('a'); link.href = base64Image; link.download = 'cropped-image.jpg'; link.click(); }) </script> </body> </html>