Cropper.js进阶之固定宽高图片裁切实现示例

来自:网络
时间:2023-05-17
阅读:
目录

引言

在图像处理中,图片裁切是常见的需求。有时候,我们希望裁切后的图片具有固定的宽高,而不是任意宽高比。Cropper.js 是一个强大的前端图片裁剪库,可以帮助我们轻松实现这个功能。在本教程中,我们将学习如何使用 Cropper.js 实现固定宽高的图片裁切。

准备工作

首先,我们需要在 HTML 文件中引入 Cropper.js 的 CSS 和 JS 文件。可以从 CDN 引入,如下所示:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.css" rel="external nofollow"  rel="external nofollow" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.js"></script>

页面结构

接下来,我们创建一个简单的 HTML 结构,包括一个用于显示原始图片的<img>元素,一个裁切按钮,以及一个用于显示裁切结果的<img>元素。

<div>
  <img src="https://p1.ssl.qhimg.com/t019228fc2ed5df1aa8.jpg" id="image">
</div>
<button onclick="split()"> 裁剪 </button>
<div>
  <img id="cropped-result">
</div>

为了实现固定宽高的图片裁切,我们需要计算宽高比。以下是创建 Cropper.js 实例的 JavaScript 代码:

编写JavaScript

var image = document.getElementById('image');
var fixedWidth = 300; // 设置裁剪结果的固定宽度
var fixedHeight = 200; // 设置裁剪结果的固定高度
var aspectRatio = fixedWidth / fixedHeight; // 计算宽高比
// 创建 Cropper 实例,设置宽高比,禁止移动和缩放裁剪框,禁止重新框选选取
var cropper = new Cropper(image, {
  aspectRatio: aspectRatio,
  cropBoxResizable: false, // 禁止用户调整裁剪框的宽高
  zoomable: false, // 禁止缩放图片
  dragMode: 'none' // 禁止重新框选选取
});

当用户点击“裁剪”按钮时,我们需要获取裁剪结果,并将其显示在另一个<img>元素中。

function split() {
  // 获取裁剪结果(返回裁剪后的图像数据)
  var croppedData = cropper.getCroppedCanvas({
    width: fixedWidth,
    height: fixedHeight
  }).toDataURL('image/jpeg');
  // 将裁剪结果显示在另一个元素中 
  var resultElement = document.getElementById('cropped-result'); 
  resultElement.src = croppedData; 
}

现在,当用户点击“裁剪”按钮时,裁剪后的图片将以固定的宽度和高度显示在页面上。

总结:

在本教程中,我们学习了如何使用 Cropper.js 库实现固定宽高的图片裁切。我们创建了一个 Cropper.js 实例,设置了宽高比,同时禁止了用户调整裁剪框的宽高、缩放图片和重新框选选取。这使得我们能够实现一个简单而强大的图片裁切工具,以满足特定宽高的需求。Cropper.js 提供了许多其他选项和方法,你可以根据实际需求对其进行定制。希望本教程对你有所帮助!

全部代码如下:

<!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"  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>
  <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 fixedWidth = 300; // 设置裁剪结果的固定宽度
    var fixedHeight = 200; // 设置裁剪结果的固定高度
    var aspectRatio = fixedWidth / fixedHeight; // 计算宽高比
    // 创建 Cropper 实例,设置宽高比,禁止移动和缩放裁剪框,禁止重新框选选取
    var cropper = new Cropper(image, {
      aspectRatio: aspectRatio,
      cropBoxResizable: false, // 禁止用户调整裁剪框的宽高
      zoomable: false, // 禁止缩放图片
      dragMode: 'none' // 禁止重新框选选取
    });
    function split() {
      // 获取裁剪结果(返回裁剪后的图像数据)
      var croppedData = cropper.getCroppedCanvas({
        width: fixedWidth,
        height: fixedHeight
      }).toDataURL('image/jpeg');
      // 将裁剪结果显示在另一个元素中
      var resultElement = document.getElementById('cropped-result');
      resultElement.src = croppedData;
    }
  </script>
</body>
</html>

以上就是Cropper.js进阶之固定宽高图片裁切实现示例的详细内容,更多关于Cropper.js固定宽高图片裁切的资料请关注其它相关文章!

返回顶部
顶部