基于原生JS实现图片裁剪

本文将详细讲解如何使用原生JS实现图片裁剪的过程，包含以下几个步骤：

1. 用JavaScript获取用户上传的图片文件并显示在页面上；
2. 借助HTML5的canvas元素进行图片裁剪；
3. 将裁剪后的图片以文件流的形式上传到服务器。

1. 获取图片文件并显示

用户上传图片文件后，需要通过JavaScript获取文件，并将其显示在页面上。

// 获取上传的图片文件
const file = document.querySelector('input[type=file]').files[0];

// 使用FileReader API将图片文件读取成DataURL
const reader = new FileReader();
reader.readAsDataURL(file);

// 当文件读取完成后，将图片显示在页面上
reader.onload = function() {
  const img = new Image();
  img.src = reader.result;
  document.body.appendChild(img);
};

2. 使用canvas进行裁剪

借助HTML5的canvas元素，可以对图片进行裁剪。首先需要在页面上创建一个canvas元素，然后将图片画到canvas上，接着利用canvas的API对图片进行裁剪。

// 创建canvas元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 确定裁剪区域的尺寸和位置
const cropInfo = {x: 100, y: 100, width: 300, height: 200};

// 将图片画到canvas上，并进行裁剪
const img = new Image();
img.src = reader.result;
img.onload = function() {
  canvas.width = cropInfo.width;
  canvas.height = cropInfo.height;
  ctx.drawImage(img, -cropInfo.x, -cropInfo.y);

  // 将裁剪后的图片显示在页面上
  const croppedImg = new Image();
  croppedImg.src = canvas.toDataURL();
  document.body.appendChild(croppedImg);
};

3. 上传裁剪后的图片

最后一步是将裁剪后的图片以文件流的形式上传到服务器。这里使用XMLHttpRequest对象来实现AJAX上传。

// 将裁剪后的图片转换为Blob对象
canvas.toBlob(function(blob) {

  // 创建XMLHttpRequest对象
  const xhr = new XMLHttpRequest();

  // 定义上传的路径和方法
  xhr.open('POST', '/upload');

  // 定义请求头内容
  xhr.setRequestHeader('Content-Type', blob.type);

  // 当上传完成时执行的操作
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      console.log('Upload completed!');
    }
  };

  // 发送文件流到服务器
  xhr.send(blob);
});

以上就是基于原生JS实现图片裁剪的完整攻略。下面还有两个示例说明。

示例1：使用拖拽上传图片

用户将图片文件拖拽到页面上后，可以通过JavaScript实现上传并进行裁剪。

// 获取拖拽区域，并监听拖拽事件
const dragArea = document.getElementById('dragarea');
dragArea.addEventListener('drop', function(evt) {

  // 阻止浏览器默认的拖拽行为
  evt.preventDefault();

  // 获取拖拽的文件并进行裁剪和上传
  const file = evt.dataTransfer.files[0];
  const reader = new FileReader();
  reader.readAsDataURL(file);

  // 剩下代码同前面的示例
  // ...
});

示例2：使用裁剪框进行预览

在页面上增加一个裁剪框，让用户可以实时预览裁剪后的图片。

// 创建裁剪框元素
const cropBox = document.createElement('div');
cropBox.style.position = 'absolute';
document.body.appendChild(cropBox);

// 鼠标移动时更新裁剪框的位置和尺寸
const previewCrop = function(evt) {
  const x = evt.clientX - cropInfo.width / 2;
  const y = evt.clientY - cropInfo.height / 2;
  cropBox.style.left = x + 'px';
  cropBox.style.top = y + 'px';
  cropBox.style.width = cropInfo.width + 'px';
  cropBox.style.height = cropInfo.height + 'px';
};

// 监听鼠标移动事件，实时预览裁剪框
document.addEventListener('mousemove', previewCrop);

以上就是基于原生JS实现图片裁剪的两个示例说明。