当前位置：首页 > jquery

jquery图片裁剪

2026-04-08 12:29:08jquery

jQuery 图片裁剪实现方法

使用 jQuery 实现图片裁剪功能通常需要结合第三方插件或库，以下是几种常见的方法：

使用 Cropper.js 插件

Cropper.js 是一个流行的图片裁剪库，支持拖拽、缩放、旋转等功能。

引入 Cropper.js 和 jQuery 适配器：

<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>

初始化代码：

jquery图片裁剪

$(function() {
  const $image = $('#image');
  $image.cropper({
    aspectRatio: 16 / 9,
    crop: function(event) {
      console.log(event.detail.x);
      console.log(event.detail.y);
      console.log(event.detail.width);
      console.log(event.detail.height);
    }
  });

  // 获取裁剪数据
  $('#getData').click(function() {
    const data = $image.cropper('getData');
    console.log(data);
  });
});

使用 jQuery Jcrop 插件

Jcrop 是另一个轻量级的图片裁剪 jQuery 插件。

引入 Jcrop：

jquery图片裁剪

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jcrop/2.0.4/css/Jcrop.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcrop/2.0.4/js/Jcrop.min.js"></script>

初始化代码：

$(function() {
  $('#target').Jcrop({
    onSelect: updateCoords,
    aspectRatio: 1
  });

  function updateCoords(c) {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
  }
});

自定义简单裁剪功能

对于简单需求，可以使用纯 jQuery 实现基础裁剪：

$(function() {
  let isDragging = false;
  let startX, startY;
  const $cropBox = $('.crop-box');

  $('.image-container').on('mousedown', function(e) {
    isDragging = true;
    startX = e.pageX - $(this).offset().left;
    startY = e.pageY - $(this).offset().top;
    $cropBox.css({
      left: startX,
      top: startY,
      width: 0,
      height: 0
    }).show();
  });

  $(document).on('mousemove', function(e) {
    if (!isDragging) return;
    const $container = $('.image-container');
    const x = e.pageX - $container.offset().left;
    const y = e.pageY - $container.offset().top;

    $cropBox.css({
      width: Math.abs(x - startX),
      height: Math.abs(y - startY),
      left: Math.min(x, startX),
      top: Math.min(y, startY)
    });
  });

  $(document).on('mouseup', function() {
    isDragging = false;
  });
});

服务端处理裁剪

前端获取裁剪坐标后，通常需要将数据发送到服务器进行实际裁剪：

$('#crop-btn').click(function() {
  const cropData = {
    x: $('#x').val(),
    y: $('#y').val(),
    width: $('#w').val(),
    height: $('#h').val()
  };

  $.post('/crop-image', {
    image: $('#image').attr('src'),
    crop: cropData
  }, function(response) {
    $('#result').attr('src', response.croppedImage);
  });
});