利用imgareaselect辅助后台实现图片上传裁剪

部署jQuery和imgareaselect插件

下载jQuery库、imgareaselect插件，并在网站的HTML模板中添加相关资源链接：

<head>
  <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/imgareaselect/0.9.10/imgareaselect.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/imgareaselect/0.9.10/jquery.imgareaselect.min.js"></script>
</head>

在HTML模板中添加一个图片上传按钮和一个裁剪框：

<div>
  <label for="image-upload">选择要上传的图片:</label>
  <input type="file" name="image-upload" id="image-upload" />
</div>
<div>
  <img id="preview" />
</div>
<div>
  <img id="crop-preview" style="display: none" />
</div>

在jQuery准备好（DOM加载完毕）后，添加事件监听函数以实现图片上传预览和裁剪：

$(function() {
  var isSelectJqObj;
  $("#image-upload").change(function() {
    var reader = new FileReader();
    reader.onload = function(e) {
      $("#preview").attr("src", e.target.result);

      $("#preview").imgAreaSelect({
        onInit: function(img, selection) {
          isSelectJqObj = selection;
        },
        onSelectEnd: function(img, selection) {
          isSelectJqObj = selection;
        }
      });
    };
    reader.readAsDataURL(this.files[0]);
  });

  $("#preview").on("load", function() {
    if (!$("#preview").data("loaded")) {
      $("#preview").data("loaded", true).imgAreaSelect({
        onInit: function(img, selection) {
          isSelectJqObj = selection;
        },
        onSelectEnd: function(img, selection) {  
          isSelectJqObj = selection;
        }
      });
    }
  });

  $("#crop-button").click(function() {
    var img = new Image();
    img.src = $("#preview").attr("src");
    var widthRatio = img.width / $("#preview").width();
    var heightRatio = img.height / $("#preview").height();
    var x = parseInt(isSelectJqObj.x1 * widthRatio);
    var y = parseInt(isSelectJqObj.y1 * heightRatio);
    var width = parseInt(isSelectJqObj.width * widthRatio);
    var height = parseInt(isSelectJqObj.height * heightRatio);

    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, x, y, width, height, 0, 0, width, height);

    var data = canvas.toDataURL("image/png");
    $("#crop-preview").attr("src", data);
    $("#crop-preview").fadeIn(500);
  });
});

上述代码实现了图片上传预览和裁剪的基本功能。说明：

在图片加载完毕后，初始化imgareaselect插件
当用户在裁剪框内进行裁剪时，更新isSelectJqObj，记录下裁剪框的位置、大小信息
当用户点击“Crop”按钮时，根据用户裁剪框的位置和大小信息，使用canvas生成指定大小的图片，并在页面中显示出来

示例1：上传和裁剪头像

下面是一个简单的示例，演示了如何使用imgareaselect插件来上传和裁剪头像。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Avatar Upload and Crop</title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/imgareaselect/0.9.10/imgareaselect.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/imgareaselect/0.9.10/jquery.imgareaselect.min.js"></script>
</head>

<body>
  <div>
    <h2>Avatar Upload and Crop</h2>
    <p>Choose a photo:</p>
    <input type="file" id="avatar-upload" name="avatar-upload" />
  </div>
  <br />
  <img id="avatar-preview" src="" alt="" style="display: none;" />
  <br />
  <img id="avatar-crop-preview" src="" alt="" style="display: none;" />
  <br />
  <button id="crop-button" type="button" style="display: none;">Crop</button>
  <br />
  <script type="text/javascript">
    $(document).ready(function() {
      $("#avatar-upload").on("change", function() {
        if (this.files && this.files[0]) {
          var reader = new FileReader();
          reader.onload = function(e) {
            $("#avatar-preview").attr("src", e.target.result);
            $("#avatar-preview").imgAreaSelect({
              handles: true,
              aspectRatio: "1:1",
              onSelectEnd: function(img, selection) {
                $("#crop-button").fadeIn(500);
              }
            });
          }
          reader.readAsDataURL(this.files[0]);
        }
      });

      $("#crop-button").on("click", function() {
        var img = new Image();
        img.src = $("#avatar-preview").attr("src");
        var x1 = $("#avatar-preview").data("imgareaselect").x1;
        var y1 = $("#avatar-preview").data("imgareaselect").y1;
        var width = $("#avatar-preview").data("imgareaselect").width;
        var height = $("#avatar-preview").data("imgareaselect").height;
        var canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, x1, y1, width, height, 0, 0, width, height);
        var data = canvas.toDataURL("image/png");
        $("#avatar-crop-preview").attr("src", data);
        $("#avatar-crop-preview").fadeIn(500);
      });
    });
  </script>
</body>

</html>

示例2：上传和裁剪多张图片

该示例演示了如何使用imgareaselect插件一次性上传和裁剪多张图片。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Multi Image Upload and Crop</title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/imgareaselect/0.9.10/imgareaselect.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/imgareaselect/0.9.10/jquery.imgareaselect.min.js"></script>
</head>

<body>
  <div>
    <h2>Multi Image Upload and Crop</h2>
    <p>Choose up to 3 photos</p>
    <input type="file" id="image-upload" name="image-upload" accept="image/*" multiple />
  </div>
  <br />
  <div id="preview">
  </div>
  <br />
  <div id="crop-preview">
  </div>
  <br />
  <button id="crop-button" type="button" style="display: none;">Crop</button>
  <br />
  <script type="text/javascript">
    $(document).ready(function() {
      $("#image-upload").on("change", function() {
        if (this.files && this.files.length <= 3) {
          var reader = new FileReader();
          var i = 0;
          var imgCount = this.files.length;
          $(this.files).each(function() {
            var file = this;
            reader.onload = function(e) {
              i++;
              var img = $("<img/>").attr("src", e.target.result);
              var imgContainer = $("<div class='img-container'/>");
              imgContainer.append(img);
              $("#preview").append(imgContainer);
              img.imgAreaSelect({
                handles: true,
                aspectRatio: "1:1",
                onSelectEnd: function(img, selection) {
                  if ($("#preview img").length == imgCount) {
                    $("#crop-button").fadeIn(500);
                  }
                }
              });
            }
            reader.readAsDataURL(file);
          });
        }
      });

      $("#crop-button").on("click", function() {
        $("#preview img").each(function() {
          var img = new Image();
          img.src = $(this).attr("src");
          var x1 = $(this).data("imgareaselect").x1;
          var y1 = $(this).data("imgareaselect").y1;
          var width = $(this).data("imgareaselect").width;
          var height = $(this).data("imgareaselect").height;
          var canvas = document.createElement("canvas");
          canvas.width = width;
          canvas.height = height;
          var ctx = canvas.getContext("2d");
          ctx.drawImage(img, x1, y1, width, height, 0, 0, width, height);
          var data = canvas.toDataURL("image/png");
          var imgHtml = "<img src='" + data + "'/>";
          $("#crop-preview").append(imgHtml);
          $("#crop-preview img").last().fadeIn(500);
        });
      });
    });
  </script>
</body>

</html>

上述示例使用了jQuery的each函数，遍历了每一个选择的图片，并对它们一一进行裁剪。得到裁剪后的图片后，将它们添加到一个 div 容器中并显示出来，用户可按需选择并下载。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用imgareaselect辅助后台实现图片上传裁剪 - Python技术站