使用JavaScript实现图片裁剪功能的完美教程

9 min read

在前端实现图片剪裁的功能可以使用现有的库，比如 popular 的插件之一 cropper.js。使用 cropper.js 插件可以轻松地在网页上创建一个可交互的图片剪裁器。

  1. 首先，需要引入 cropper.js 库以及它的样式文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" integrity="sha512-lkZ21oqvhoJF3k+pLh11+5J3JpzvRk46PuVFkbYKkQPDeGd/4tNdU7hjfwOwA/kak0wroWsZQHyAAjMbzGzRhg==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js" integrity="sha512-6pzG65rrWVY/5popXqLkKAjELVnWbLhLVkf/eCyxpMSeEZXvQ3cCpk3DFIQ+VSgTcYYzQ9XsKH033GH+nD+5tg==" crossorigin="anonymous"></script>
  1. 在 HTML 中，创建一个用于显示图片的 img 标签和一个剪裁区域的 DOM 元素。
<img id="image" src="path/to/image.jpg" />

<div id="cropper"></div>
  1. 在 JavaScript 中，创建一个新的 Cropper 对象，并将其关联到 img 标签和剪裁区域的 DOM 元素上。
const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 1 / 1, // 剪裁比例
  viewMode: 1, // 显示模式
  guides: true // 显示剪裁指导线
});

const cropperElement = document.getElementById('cropper');
cropper.replace(cropperElement);
  1. 在需要保存剪裁后的图片时，使用 Cropper 的 getCroppedCanvas 方法获取剪裁后的 canvas 元素，可以使用它将图片转换为 base64 格式或上传到服务器。
const croppedCanvas = cropper.getCroppedCanvas();
const croppedImage = croppedCanvas.toDataURL('image/jpeg');
console.log(croppedImage);

这样，就可以在网页上实现图片剪裁的功能。具体实现还需要根据自己的要求和场景来调整参数和样式。