jQuery Jcrop插件实现图片选取功能

下面是详细讲解“jQuery Jcrop插件实现图片选取功能”的完整攻略。

什么是jQuery Jcrop插件？

jQuery Jcrop插件是一款基于jQuery开发的选择和剪裁图片的插件，支持在图片上添加剪裁框，可以根据用户选择来裁剪图片。

安装jQuery Jcrop插件

下载jQuery Jcrop插件的压缩包，解压后得到jcrop文件夹，将其放置于网站根目录下；
在网页中引入jcrop的相关文件。

<link rel="stylesheet" href="jcrop/css/jquery.Jcrop.min.css" type="text/css" />
<script src="jcrop/js/jquery.min.js"></script>
<script src="jcrop/js/jquery.Jcrop.min.js"></script>

实现图片选取功能

实现图片选取功能需要完成以下步骤：

显示图片并绑定裁剪事件；
在裁剪事件中获取裁剪区域的坐标信息，并将其传递给后台处理程序。

显示图片并绑定裁剪事件

首先需要准备一张将要被裁剪的图片，并添加一个用于显示图片的img标签。

<img src="example.jpg" id="crop-img" />

接下来，在文档加载完成后，使用jQuery的方式为图片添加裁剪事件。

<script>
  $(function(){
    $('#crop-img').Jcrop({
        onChange:showCoords,
        onSelect:showCoords
    });
  });

  function showCoords(c){
    // 输出裁剪区域的坐标信息
    console.log(c.x, c.y, c.x2, c.y2, c.width, c.height);
  };
</script>

注意，这里使用了Jcrop的两个回调函数，onChange和onSelect，这两个函数分别在用户调整裁剪框和裁剪图片后触发。回调函数的作用是获取裁剪区域的坐标信息，并将其传递给后台处理程序。

获取裁剪区域坐标信息

在showCoords函数中，可以获取到用户选择的裁剪区域的坐标信息，包括x、y、x2、y2、width、height六个参数。

function showCoords(c){
    // 输出裁剪区域的坐标信息
    console.log(c.x, c.y, c.x2, c.y2, c.width, c.height);
};

此时，获取到的坐标信息可以通过AJAX方式发送到后台处理程序。

示例说明

下面给出两个示例，帮助理解jQuery Jcrop插件的实现方法。

示例一：裁剪图片并在页面中显示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>图片裁剪示例</title>
    <link rel="stylesheet" href="jcrop/css/jquery.Jcrop.min.css" type="text/css" />
    <script src="jcrop/js/jquery.min.js"></script>
    <script src="jcrop/js/jquery.Jcrop.min.js"></script>
    <style type="text/css">
      #crop-img{max-width:500px;}
    </style>
  </head>
  <body>
    <img src="example.jpg" id="crop-img" />
    <form action="crop.php" method="post" id="crop-form">
      <input type="hidden" name="x" id="crop-x" />
      <input type="hidden" name="y" id="crop-y" />
      <input type="hidden" name="w" id="crop-w" />
      <input type="hidden" name="h" id="crop-h" />
      <button type="submit">裁剪</button>
    </form>
    <script>
      $(function(){
        $('#crop-img').Jcrop({
            onChange:updateCoords,
            onSelect:updateCoords
        });
      });

      function updateCoords(c){
        // 输出裁剪区域的坐标信息
        $('#crop-x').val(c.x);
        $('#crop-y').val(c.y);
        $('#crop-w').val(c.width);
        $('#crop-h').val(c.height);
      };
    </script>
  </body>
</html>

上述示例中，我们在图片下方添加了一个用于提交裁剪数据的表单，其中添加了四个隐藏域，用于存放裁剪区域的坐标信息。

在回调函数updateCoords中，我们将获取到的坐标信息设置给隐藏域。在提交表单时，我们将表单数据发送到后台处理程序crop.php，然后将裁剪好的图片在页面上显示。

示例二：初始裁剪区域为固定大小

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>固定大小裁剪示例</title>
    <link rel="stylesheet" href="jcrop/css/jquery.Jcrop.min.css" type="text/css" />
    <script src="jcrop/js/jquery.min.js"></script>
    <script src="jcrop/js/jquery.Jcrop.min.js"></script>
    <style type="text/css">
      #crop-img{max-width:500px;}
    </style>
  </head>
  <body>
    <img src="example.jpg" id="crop-img" />
    <form action="crop.php" method="post" id="crop-form">
      <input type="hidden" name="x" id="crop-x" />
      <input type="hidden" name="y" id="crop-y" />
      <input type="hidden" name="w" id="crop-w" />
      <input type="hidden" name="h" id="crop-h" />
      <button type="submit">裁剪</button>
    </form>
    <script>
      $(function(){
        $('#crop-img').Jcrop({
            aspectRatio: 1,
            minSize: [100, 100],
            maxSize: [500, 500],
            setSelect: [50, 50, 200, 200],
            onChange:updateCoords,
            onSelect:updateCoords
        });
      });

      function updateCoords(c){
        // 输出裁剪区域的坐标信息
        $('#crop-x').val(c.x);
        $('#crop-y').val(c.y);
        $('#crop-w').val(c.width);
        $('#crop-h').val(c.height);
      };
    </script>
  </body>
</html>

上述示例中，我们在初始化时通过Jcrop的setSelect选项将裁剪区域设置为固定大小（200*200）。同时，我们还设置了aspectRatio、minSize、maxSize等选项，可以在裁剪时保持裁剪区域的比例，并保证裁剪区域的最小和最大限制。

在回调函数updateCoords中，我们同样将获取到的坐标信息设置给隐藏域。在提交表单时，我们将表单数据发送到后台处理程序crop.php，然后将裁剪好的图片在页面上显示。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery Jcrop插件实现图片选取功能 - Python技术站