如何使用 Cropper.js 实现图片裁剪功能？

cropperjs是一个基于javascript的图像裁剪库，它允许用户在网页上实时裁剪图片。通过简单的api和事件处理，开发者可以轻松集成cropperjs到项目中，实现图片上传、预览和裁剪功能。

Cropper.js案例分析

Cropper.js 是一个轻量级的 JavaScript 插件，用于在网页中实现图像裁剪功能，它提供了用户友好的界面，允许用户选择和裁剪图像，并支持多种配置选项和功能，以下是一些关键特点：

1、简单易用：用户可以通过拖动和缩放来选择裁剪区域，操作直观。

2、多种裁剪模式：支持自由裁剪、固定比例裁剪、圆形裁剪等。

3、响应式设计：适配不同屏幕尺寸，确保在各种设备上都能良好展示。

4、图像预览：可以实时预览裁剪后的图像效果。

5、支持多种格式：支持 JPEG、PNG 等多种图像格式的导入和导出。

6、事件和回调：提供丰富的事件和回调函数，方便开发者进行自定义扩展。

7、API接口：提供简单的 API 方法，便于控制裁剪行为和获取裁剪结果。

Cropper.js 在图像处理、用户头像上传等场景中非常实用，广泛应用于各类网站和应用中，本文将通过一个详细的案例来展示如何使用 Cropper.js 实现图像裁剪功能，包括基础使用、设置裁剪比例、图片旋转、缩放、导出等功能，并提供相关问答FAQs。

案例背景

假设我们需要开发一个网页应用，允许用户上传头像并进行裁剪和编辑，具体需求如下：

用户可以选择本地图片文件并显示。

用户可以对图片进行裁剪、旋转和缩放。

用户可以实时预览裁剪后的效果。

用户可以将裁剪后的图片保存或下载。

实现步骤

1. 引入 Cropper.js

需要通过 CDN 引入 Cropper.js 的 CSS 和 JavaScript 文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片裁剪示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
</head>
<body>
    <!-后续内容 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
</body>
</html>

2. 创建 HTML 结构

创建一个包含文件输入、图片显示区域和操作按钮的基本结构。

<div class="container">
    <!-原图 -->
    <div class="imagebox">
        <img id="image" src="" 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="" alt="Preview">
    </div>
</div>

3. 添加 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;
    }
}

4. 初始化 Cropper 实例

在 JavaScript 中初始化 Cropper 对象，并绑定各个按钮的事件。

document.addEventListener('DOMContentLoaded', () => {
    const image = document.getElementById('image');
    const cropper = new Cropper(image, {
        aspectRatio: 16 / 9, // 默认比例为16:9
        viewMode: 1, // 1表示拖动时移动图片，2表示移动裁剪框
        cropBoxResizable: false, // 不允许调整裁剪框大小
        ready() {
            console.log('Cropper is ready');
        }
    });
    // 按钮事件绑定
    document.getElementById('crop').addEventListener('click', () => {
        cropper.getCroppedCanvas().toBlob((blob) => {
            const url = URL.createObjectURL(blob);
            document.getElementById('preview').src = url;
        });
    });
    document.getElementById('rotate').addEventListener('click', () => {
        cropper.rotate(90); // 旋转90度
    });
    document.getElementById('reset').addEventListener('click', () => {
        cropper.reset(); // 重置裁剪区域
    });
    document.getElementById('clear').addEventListener('click', () => {
        cropper.clear(); // 清除裁剪区域
    });
    document.getElementById('replace').addEventListener('click', () => {
        cropper.replace(URL.createObjectURL(document.getElementById('imgReader').files[0])); // 更换图片
    });
    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(1 / 1); // 设置为方形比例
    });
    document.getElementById('export').addEventListener('click', () => {
        cropper.getCroppedCanvas().toBlob((blob) => {
            const url = URL.createObjectURL(blob);
            downloadFile(url, 'croppedImage.png'); // 导出图片并下载
        });
    });
});

5. 实现图片上传功能

为了实现图片上传功能，我们需要添加一个文件输入元素，并监听其change 事件，当用户选择文件后，读取文件并将其显示在页面上，重新初始化 Cropper 实例以应用新的图片，以下是完整的代码示例：

<input type="file" id="imgReader" accept="image/*" onchange="loadingImg(event)" style="display:none">
<label for="imgReader" style="cursor:pointer; color:blue;">点击上传图片</label>

function loadingImg(event) {
    if (event.target.files.length === 0) {
        return;
    } else {
        const reader = new FileReader();
        reader.onload = (e) => {
            const src = e.target.result;
            document.getElementById('image').src = src; // 显示图片
            initializeCropper(); // 重新初始化 Cropper 实例
        };
        reader.readAsDataURL(event.target.files[0]); // 读取文件并转换为 Data URL
    }
}

function initializeCropper() {
    const image = document.getElementById('image');
    const cropper = new Cropper(image, {
        aspectRatio: 16 / 9, // 默认比例为16:9
        viewMode: 1, // 1表示拖动时移动图片，2表示移动裁剪框
        cropBoxResizable: false, // 不允许调整裁剪框大小
        ready() {
            console.log('Cropper is ready');
        }
    });
}

6. 完整代码示例

为了更清晰地展示整个流程，以下是完整的 HTML、CSS 和 JavaScript 代码，请将其复制到您的项目中运行测试，如果您使用的是模块化项目结构（如使用 Webpack），请根据需要进行相应调整。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>图片裁剪示例</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
	<style> * { 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; } } </style>
</head>
<body>
	<div class="container">
		<!-原图 -->
		<div class="imagebox">
			<img id="image" src="" 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="" alt="Preview">
		</div>
	</div>
	<input type="file" id="imgReader" accept="image/*" onchange="loadingImg(event)" style="display:none">
	<label for="imgReader" style="cursor:pointer; color:blue;">点击上传图片</label>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
	<script>
	document.addEventListener('DOMContentLoaded', () => {initializeCropper();});function loadingImg(event){if (event.target.files.length === 0){return;}else{const reader = new FileReader();reader.onload = (e) => {const src = e.target.result;document.getElementById('image').src = src;initializeCropper();};reader.readAsDataURL(event.target.files[0]);}}function initializeCropper(){const image = document.getElementById('image');const cropper = new Cropper(image, {aspectRatio: 16 / 9,viewMode: 1,cropBoxResizable: false,ready(){console.log('Cropper is ready');}});// 按钮事件绑定document.getElementById('crop').addEventListener('click', () => {cropper.getCroppedCanvas().toBlob((blob) => {const url = URL.createObjectURL(blob);document.getElementById('preview').src = url;});});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(URL.createObjectURL(document.getElementById('imgReader').files[0]));});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(1 / 1);});document.getElementById('export').addEventListener('click', () => {cropper.getCroppedCanvas().toBlob((blob) => {const url = URL.createObjectURL(blob);downloadFile(url, 'croppedImage.png');});});}function downloadFile(url, filename){const a = document.createElement("a");a.href = url;a.download = filename;a.click();} </script>
</body>
</html>

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1481552.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。