npm 包 jcrop-0.9.8 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，图片裁剪功能是很常见的需求。而 jcrop 就是一款功能强大、易于使用的图片裁剪插件，它能够帮助我们完成各种裁剪操作。下面我们来学习一下如何使用它。

安装

我们首先需要将 jcrop 安装到我们的项目中。在终端中输入以下命令即可：

npm install jcrop-0.9.8 --save

引入

安装完成后，在需要使用 jcrop 的页面中引入以下文件：

<link rel="stylesheet" href="./node_modules/jcrop-0.9.8/css/jquery.Jcrop.min.css">
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/jcrop-0.9.8/js/jquery.Jcrop.min.js"></script>

使用

接下来，我们就可以开始使用 jcrop 了。

HTML

我们需要为图片设置一个容器，并将图片放在容器中：

<div id="jcrop-container">
  <img src="your-image-src" id="target" alt="preview">
</div>

需要注意的是，图片必须在容器中，这样才能正确的进行裁剪。

JavaScript

在页面加载完成后，我们先找到图片和容器：

$(function(){
  let $target = $("#target");
  let $container = $("#jcrop-container");
});

然后，我们初始化 jcrop：

let jcrop_api = $.Jcrop($target, {
  aspectRatio: 1,     // 裁剪框长宽比为 1:1
  setSelect: [0, 0, 200, 200],   // 默认显示的裁剪框大小
  onSelect: updateCoords        // 当选择区域发生变化时的回调函数
});

其中，aspectRatio 设置了裁剪框的长宽比，setSelect 设置了默认的裁剪框大小，onSelect 则设置了当选择区域发生变化时的回调函数，我们将在下方定义该函数。

回调函数

jcrop 还提供了一些回调函数，让我们可以得到各种裁剪的信息。

比如，在我们拖动选择区域时、改变选择区域的大小时，就可以得到当前的裁剪框的信息，通过这些信息，我们可以在页面上显示出当前选择区域的大小、位置等信息。

function updateCoords(c) {
  // 获取当前选择区域的大小、位置等信息
  let x = c.x,
      y = c.y,
      w = c.w,
      h = c.h;
  
  // 在页面上显示这些信息
  $("#x").val(x);
  $("#y").val(y);
  $("#w").val(w);
  $("#h").val(h);
}

对于 jcrop 的其他回调函数，我们可以在官方文档中查看具体的介绍和使用方法。

示例代码

完整的示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jcrop 示例</title>
  <link rel="stylesheet" href="./node_modules/jcrop-0.9.8/css/jquery.Jcrop.min.css">
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script src="./node_modules/jcrop-0.9.8/js/jquery.Jcrop.min.js"></script>
  <style>
    /* 预览裁剪结果的容器 */
    #preview {
      overflow:hidden;
      width:200px;
      height:200px;
      margin:5px;
      border:1px solid black;
    }
  </style>
</head>
<body>
  <div id="jcrop-container">
    <img src="your-image-src" id="target" alt="preview">
  </div>
  <br>
  <!-- 显示当前选择区域的信息 -->
  X:<input type="text" size="4" id="x">
  Y:<input type="text" size="4" id="y">
  W:<input type="text" size="4" id="w">
  H:<input type="text" size="4" id="h">
  <br><br>
  <!-- 预览裁剪结果的容器 -->
  <div id="preview"></div>
  <script>
    // 获取图片和容器
    let $target = $("#target");
    let $container = $("#jcrop-container");
    
    // 初始化 jcrop
    let jcrop_api = $.Jcrop($target, {
      aspectRatio: 1,
      setSelect: [0, 0, 200, 200],
      onSelect: updateCoords
    });
    
    // 回调函数
    function updateCoords(c) {
      let x = c.x,
          y = c.y,
          w = c.w,
          h = c.h;
      
      // 显示当前选择区域的信息
      $("#x").val(x);
      $("#y").val(y);
      $("#w").val(w);
      $("#h").val(h);
      
      // 预览裁剪结果
      let rx = 200 / w;
      let ry = 200 / h;
      $("#preview").css({
        width: Math.round(rx * $target.width()) + "px",
        height: Math.round(ry * $target.height()) + "px",
        marginLeft: "-" + Math.round(rx * x) + "px",
        marginTop: "-" + Math.round(ry * y) + "px"
      });
    }
  </script>
</body>
</html>

总结

jcrop 是一款非常强大、易于使用的图片裁剪插件，它可以帮助我们完成各种裁剪操作。本文介绍了 jcrop 的安装、引入和使用方法，并提供了示例代码，希望可以帮助到大家。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53e07