js 图片裁剪上传源码

图片裁剪上传是一个常见的前端功能，它允许用户在上传图片之前对其进行裁剪，以确保图片符合特定的尺寸或格式要求。以下是一个简单的JavaScript实现，使用了HTML5的Canvas API和FileReader API来实现图片的裁剪和上传。

基础概念

Canvas API: 提供了一个可以通过JavaScript脚本来绘制图形、动画等的HTML元素。
FileReader API: 允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。
Blob: 表示不可变的原始数据的类文件对象。

优势

用户体验: 用户可以在上传前预览和调整图片，提高上传的准确性。
服务器负载: 减少不必要的数据传输，只上传裁剪后的图片。
灵活性: 可以根据需要裁剪成不同的尺寸和比例。

类型

固定尺寸裁剪: 用户必须按照预设的尺寸裁剪图片。
自由裁剪: 用户可以自由选择裁剪区域。
比例裁剪: 用户必须按照特定的宽高比裁剪图片。

应用场景

社交媒体: 用户上传头像或封面图时。
电商平台: 商品图片上传时。
新闻网站: 新闻图片上传时。

示例代码

以下是一个简单的图片裁剪上传的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片裁剪上传</title>
<style>
  #imagePreview {
    max-width: 100%;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>

<input type="file" id="fileInput" accept="image/*">
<img id="imagePreview" src="#" alt="图片预览" style="display:none;">
<button onclick="uploadImage()">上传图片</button>

<script>
let startX, startY, endX, endY;
let image = new Image();
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');

document.getElementById('fileInput').addEventListener('change', function(event) {
  let file = event.target.files[0];
  let reader = new FileReader();
  
  reader.onload = function(e) {
    image.src = e.target.result;
    image.onload = function() {
      document.getElementById('imagePreview').src = this.src;
      document.getElementById('imagePreview').style.display = 'block';
    };
  };
  
  reader.readAsDataURL(file);
});

document.getElementById('imagePreview').addEventListener('mousedown', function(event) {
  startX = event.offsetX;
  startY = event.offsetY;
});

document.getElementById('imagePreview').addEventListener('mouseup', function(event) {
  endX = event.offsetX;
  endY = event.offsetY;
});

function uploadImage() {
  let width = Math.abs(endX - startX);
  let height = Math.abs(endY - startY);
  canvas.width = width;
  canvas.height = height;
  
  ctx.drawImage(image, startX < endX ? startX : endX, startY < endY ? startY : endY, width, height, 0, 0, width, height);
  
  let croppedImage = canvas.toDataURL('image/jpeg');
  
  // 这里可以添加代码将croppedImage发送到服务器
  console.log(croppedImage);
}
</script>

</body>
</html>