jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一

下面是详细讲解“jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一”的完整攻略。

1. 前言

ImgAreaSelect是一个常用的jQuery图片裁剪插件，它可以轻松实现图片的预览和裁剪功能。本文将详细讲解如何使用ImgAreaSelect实现头像上传预览和裁剪功能。

2. 准备工作

在开始之前，请确保以下几点已经完成：

安装jQuery和ImgAreaSelect插件；
在HTML页面中确保至少存在一个图片选择器和一个容器，用于显示预览和处理后的裁剪结果。

以下是示例代码中的HTML结构：

<input type="file" id="avatar" accept="image/*">
<div id="preview"></div>

在示例中，用户可以通过选择文件填充 <input> 控件。当用户选择并确认了一张图片之后，图片将在 <div id="preview"> 中显示。

3. Js脚本实现

在完成了HTML页面的搭建之后，我们需要编写JS代码来实现裁剪功能。以下是详细过程的说明。

3.1 引入ImgAreaSelect插件

在开始之前，请先确保已经正确引入ImgAreaSelect插件。可以在HTML文件中添加以下代码：

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

3.2 监听图片选择器的change事件

在用户选择了图片之后，我们需要对选择器的 change 事件进行监听。当用户确认了一张图片之后，我们需要把它展示到页面上。

以下是示例代码：

$('#avatar').on('change', function() {
  var file = this.files[0];
  var reader = new FileReader();
  reader.onload = function(event) {
    $('#preview').html('<img id="image" src="' + event.target.result + '">');
  };
  reader.readAsDataURL(file);
});

以上代码中，我们利用 FileReader 对象将图片以 dataURL 的格式读入内存，并将其展示在页面上。

3.3 初始化ImgAreaSelect插件

当图片已经展示在页面上之后，我们需要对它进行裁剪。接下来，我们就可以用ImgAreaSelect插件来实现这个裁剪功能。

以下是示例代码：

$('#image').imgAreaSelect({
  aspectRatio: '1:1',
  handles: true,
  fadeSpeed: 200,
  onSelectEnd: function (img, selection) {
    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;
    $('#preview + #result').remove();
    $('#preview').after('<canvas id="result" width="100" height="100"></canvas>');
    var canvas = document.querySelector('#result');
    var context = canvas.getContext('2d');
    context.drawImage(img, selection.x1, selection.y1, selection.width, selection.height, 0, 0, 100, 100);
    var data = canvas.toDataURL();
    $('#avatar').val(data);
    $('#preview').html('<img src="' + data + '">');
  }
});

以上代码中，我们将ImgAreaSelect插件应用到已经展示的图片中。在插件初始化过程中，用户还需要设置以下几个参数：

aspectRatio: 裁剪比例，默认为 '1:1'，即1比1的正方形。
handles: 是否显示裁剪框中的8个拖动柄，默认为true。
fadeSpeed: 裁剪框的淡入淡出效果的速度，默认为200ms。

同时，我们还可以指定回调函数 onSelectEnd 来得到裁剪框的详细信息并进行预览和处理。

在 onSelectEnd 中，我们可以获取图片裁剪框的详细信息，利用 canvas 将图片剪切到指定大小，并将结果展示在页面上。最后，我们还可以将裁剪后的图片以 dataURL 的格式传递到后台服务器上。

4. 示例说明

下面是两个完整的代码示例，分别演示了如何实现头像上传预览和头像裁剪功能。

示例1：头像上传预览

此示例中，我们只需要展示用户选择的图片，并将其在页面上进行预览，不需要进行进一步的裁剪操作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>头像上传预览</title>
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <input type="file" id="avatar" accept="image/*">
  <div id="preview"></div>

  <script src="https://cdn.staticfile.org/jquery.imgareaselect/0.9.10/jquery.imgareaselect.min.js"></script>
  <script>
    $('#avatar').on('change', function() {
      var file = this.files[0];
      var reader = new FileReader();
      reader.onload = function(event) {
        $('#preview').html('<img src="' + event.target.result + '">');
      };
      reader.readAsDataURL(file);
    });
  </script>
</body>
</html>

示例2：头像上传预览和裁剪

此示例中，我们需要展示用户选择的图片，并在页面上进行预览和裁剪操作，最后将裁剪后的结果以 dataURL 的格式传递到后台服务器上。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>头像上传预览和裁剪</title>
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <input type="file" id="avatar" accept="image/*">
  <div id="preview"></div>

  <script src="https://cdn.staticfile.org/jquery.imgareaselect/0.9.10/jquery.imgareaselect.min.js"></script>
  <script>
    $('#avatar').on('change', function() {
      var file = this.files[0];
      var reader = new FileReader();
      reader.onload = function(event) {
        $('#preview').html('<img id="image" src="' + event.target.result + '">');

        $('#image').imgAreaSelect({
          aspectRatio: '1:1',
          handles: true,
          fadeSpeed: 200,
          onSelectEnd: function (img, selection) {
            var scaleX = 100 / selection.width;
            var scaleY = 100 / selection.height;
            $('#preview + #result').remove();
            $('#preview').after('<canvas id="result" width="100" height="100"></canvas>');
            var canvas = document.querySelector('#result');
            var context = canvas.getContext('2d');
            context.drawImage(img, selection.x1, selection.y1, selection.width, selection.height, 0, 0, 100, 100);
            var data = canvas.toDataURL();
            $('#avatar').val(data);
            $('#preview').html('<img src="' + data + '">');
          }
        });
      };
      reader.readAsDataURL(file);
    });
  </script>
</body>
</html>

OK，以上就是关于使用jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一 - Python技术站