当前位置：首页 > jquery

jquery图片裁剪

2026-02-03 19:10:49jquery

jQuery 图片裁剪实现方法

使用 jQuery 实现图片裁剪功能可以通过多种方式完成，以下是几种常见的方法：

使用 Cropper.js 插件

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

引入 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>

初始化 Cropper：

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

获取裁剪数据：

jquery图片裁剪

const cropper = $image.data('cropper');
const canvas = cropper.getCroppedCanvas();
const croppedImageUrl = canvas.toDataURL('image/jpeg');

使用 jQuery UI 实现基础裁剪

对于简单的裁剪需求，可以结合 jQuery UI 实现：

$(function() {
  $("#crop-area").draggable();
  $("#crop-area").resizable({
    aspectRatio: true,
    handles: 'n, e, s, w, ne, se, sw, nw'
  });
});

通过获取元素位置和尺寸计算裁剪区域：

const cropX = $("#crop-area").position().left;
const cropY = $("#crop-area").position().top;
const cropWidth = $("#crop-area").width();
const cropHeight = $("#crop-area").height();

使用 Canvas API 进行最终裁剪

获取裁剪区域后，使用 Canvas 完成实际裁剪：

jquery图片裁剪

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = cropWidth;
canvas.height = cropHeight;

ctx.drawImage(
  originalImage,
  cropX, cropY, cropWidth, cropHeight,
  0, 0, cropWidth, cropHeight
);

const croppedImage = canvas.toDataURL('image/png');

响应式裁剪实现

确保裁剪功能在响应式布局中正常工作：

.img-container {
  position: relative;
  max-width: 100%;
}
.crop-box {
  position: absolute;
  border: 2px dashed #fff;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}

调整裁剪框大小：

$(window).resize(function() {
  const containerWidth = $('.img-container').width();
  const newWidth = containerWidth * 0.8;
  $('.crop-box').width(newWidth).height(newWidth * ratio);
});

服务器端处理

将裁剪坐标发送到服务器进行精确处理：

$.ajax({
  url: '/crop-image',
  type: 'POST',
  data: {
    x: cropX,
    y: cropY,
    width: cropWidth,
    height: cropHeight,
    image: originalImageSrc
  }
});

这些方法提供了从简单到复杂的图片裁剪解决方案，可以根据项目需求选择适合的实现方式。