jquery 图片截取工具jquery.imagecropper.js

jQuery 图片截取工具jquery.imagecropper.js 可以用于网站中的图片上传、图片编辑等场景，用户可以通过鼠标拖拽的方式来选定图片中的某个区域进行截取。

以下是使用 jquery.imagecropper.js 的完整攻略：

一、下载和引入 jquery.imagecropper.js 插件

可以在 github 上下载 jquery.imagecropper.js 插件，并在页面中引入相应的 js 文件。

<script src="jquery.js"></script>
<script src="jquery.imagecropper.js"></script>

二、设置 HTML 结构

在 HTML 中设置一个容器元素，用于包含图片和截取工具的相关元素。

<div id="image-cropper-container">
  <img src="path/to/image.jpg" id="image">
  <div id="image-cropper"></div>
</div>

三、初始化 jquery.imagecropper.js 插件

在 JavaScript 中调用 jquery.imagecropper.js 的初始化方法，对截取工具进行初始化。

$(function() {
  $("#image").imagecropper({
    thumbWidth: 120,
    thumbHeight: 120,
    minWidth: 200,
    minHeight: 200,
    maxWidth: 800,
    maxHeight: 800,
    fixedRatio: true,
    bgOpacity: .5,
    onSelect: function(coords) {
      console.log(coords);
    }
  });
});

其中，通过传递一个包含各种选项的对象来对截取工具进行初始化。以下是常用的几个选项：

• thumbWidth：选中区域的缩略图宽度（默认为 120px）。
• thumbHeight：选中区域的缩略图高度（默认为 120px）。
• minWidth：选中区域的最小宽度（默认为 0）。
• minHeight：选中区域的最小高度（默认为 0）。
• maxWidth：选中区域的最大宽度（默认为 Infinity）。
• maxHeight：选中区域的最大高度（默认为 Infinity）。
• fixedRatio：选中区域是否保持固定宽高比（默认为 false）。
• bgOpacity：选中区域外部的背景透明度（默认为 .5）。
• onSelect：当选中区域发生变化时触发的回调函数。

四、示例说明

示例一：上传头像并截取

<div id="image-cropper-container">
  <img src="path/to/default.jpg" id="image">
  <div id="image-cropper"></div>
</div>
<button id="upload-button">上传</button>

<script>
$(function() {
  var $image = $("#image");

  // 初始化截取工具
  $image.imagecropper({
    thumbWidth: 120,
    thumbHeight: 120,
    minWidth: 200,
    minHeight: 200,
    maxWidth: 800,
    maxHeight: 800,
    fixedRatio: true,
    bgOpacity: .5,
    onSelect: function(coords) {
      console.log(coords);
    }
  });

  // 上传按钮点击事件
  $("#upload-button").click(function() {
    // 获取选中区域的坐标
    var coords = $image.imagecropper("getCoords");

    // 截取选中区域的图片，并上传到服务器
    var canvas = $image.imagecropper("crop");
    canvas.toBlob(function(blob) {
      var formData = new FormData();
      formData.append("avatar", blob);
      $.ajax({
        url: "upload/avatar",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(data) {
          console.log("上传成功");
        },
        error: function(xhr) {
          console.log("上传失败");
        }
      });
    });
  });
});
</script>

在这个示例中，用户可以通过鼠标拖拽的方式来选定头像中的某个区域进行截取。当点击上传按钮时，会将选中的区域截取并上传到服务器。

示例二：图片编辑

<div id="image-cropper-container">
  <img src="path/to/image.jpg" id="image">
  <div id="image-cropper"></div>
</div>
<button id="rotate-button">旋转</button>
<button id="zoom-in-button">放大</button>
<button id="zoom-out-button">缩小</button>

<script>
$(function() {
  var $image = $("#image");

  // 初始化截取工具
  $image.imagecropper({
    thumbWidth: 120,
    thumbHeight: 120,
    minWidth: 200,
    minHeight: 200,
    maxWidth: 800,
    maxHeight: 800,
    fixedRatio: true,
    bgOpacity: .5,
    onSelect: function(coords) {
      console.log(coords);
    }
  });

  // 旋转按钮点击事件
  $("#rotate-button").click(function() {
    $image.imagecropper("rotate", 90);
  });

  // 放大按钮点击事件
  $("#zoom-in-button").click(function() {
    $image.imagecropper("zoom", .1);
  });

  // 缩小按钮点击事件
  $("#zoom-out-button").click(function() {
    $image.imagecropper("zoom", -.1);
  });
});
</script>

在这个示例中，用户可以对图片进行旋转、放大、缩小等操作，并可以通过鼠标拖拽的方式来选定某个区域进行截取。