Cropper.js实现图片旋转与裁剪功能详解

作者：青柠时间：2026-10-26 14:10:24浏览：503

本文介绍如何利用Cropper.js库在Web应用中实现图片的旋转与裁剪功能。通过引入库文件、构建HTML结构及编写JavaScript逻辑，演示如何初始化Cropper实例，并使用getBoundingClientRect和rotate方法处理用户操作，最终展示裁剪后的图像结果。

引言

在Web应用开发中，处理用户上传的图片是常见需求。用户有时需要旋转图片以优化视觉效果。本文将演示如何使用Cropper.js库实现图片的旋转与裁剪功能，并通过分析HTML和JavaScript代码，帮助开发者快速掌握相关技术。

准备工作

首先，确保项目中已引入Cropper.js库及其对应的CSS文件。可以通过CDN服务加载这些资源：

<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.js"></script>

页面结构

接下来，构建HTML结构。我们需要一个<img>元素用于显示待旋转和裁剪的原始图片，以及两个按钮分别执行顺时针和逆时针旋转操作。此外，还需要另一个<img>元素来展示裁剪后的结果图片：

<body>
  <div>
    <img src="https://p1.ssl.qhimg.com/t019228fc2ed5df1aa8.jpg" id="image">
  </div>
  <button onclick="split()"> 裁剪 </button>
  <button onclick="rotate(-10)">逆时针旋转</button>
  <button onclick="rotate(10)">顺时针旋转</button>
  <div>
    <img id="cropped-result">
  </div>
</body>

编写JavaScript

随后，编写JavaScript代码以初始化Cropper.js库并处理旋转与裁剪逻辑。首先，获取待处理的图片元素，并为其创建Cropper实例：

var image = document.getElementById('image');
var cropper = new Cropper(image, {});

接着，定义两个功能函数。第一个函数split()负责处理裁剪操作。该函数获取裁剪后的图像数据，并将其显示在指定的<img>元素中：

function split() {
  var croppedData = cropper.getCroppedCanvas().toDataURL('image/jpeg');
  var resultElement = document.getElementById('cropped-result');
  resultElement.src = croppedData;
}

第二个函数rotate()用于处理旋转操作。它接收一个表示旋转角度的参数，并调用Cropper.js库的rotate()方法来实现图片旋转：

function rotate(degrees) {
  cropper.rotate(degrees);
}

该函数依据传入的角度参数执行旋转操作。顺时针旋转时角度为正值，逆时针旋转时角度为负值。

总结

本文介绍了使用Cropper.js库实现图片旋转与裁剪功能的方法。首先构建了页面结构并添加样式，随后编写JavaScript代码初始化Cropper实例并处理相关操作。最后，展示了如何将裁剪后的图像数据显示在<img>元素中。

尽管本文示例较为简单，但为开发者提供了良好的入门基础。在此基础上，可进一步扩展功能，如添加文件上传、预览及保存裁剪后图像等功能。通过这种方式，可轻松为Web应用添加图片旋转裁剪功能，从而提升用户体验。

全部代码如下

<!DOCTYPE html>
<html>
<head>
  <title>图片裁剪工具</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.css" rel="external nofollow" >
  <style>
    img {
      width: 800px; 
      height: 500px;
    }
  </style>
</head>
<body>
  <div>
    <img src="https://p1.ssl.qhimg.com/t019228fc2ed5df1aa8.jpg" id="image">
  </div>
  <button onclick="split()"> 裁剪 </button>
  <button onclick="rotate(-10)">逆时针旋转</button>
  <button onclick="rotate(10)">顺时针旋转</button>
  <div>
    <img id="cropped-result">
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.js"></script>
  <script>
    var image = document.getElementById('image');
    var cropper = new Cropper(image, {});
    function split() {
      var croppedData = cropper.getCroppedCanvas().toDataURL('image/jpeg');
      var resultElement = document.getElementById('cropped-result');
      resultElement.src = croppedData;
    }
    function rotate(degrees) {
      cropper.rotate(degrees);
    }
  </script>
</body>
</html>

以上就是Cropper.js进阶实现图片旋转裁剪功能示例的详细内容，更多关于Cropper.js图片旋转裁剪的资料请关注本站其它相关文章！

作者最新文章

ES6模块化中js文件怎么用import和export交互

2026-11-05 17:00:48

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53