在 Vue 项目中实现图片预览与裁剪功能并不复杂，尤其是当你希望避免引入额外的组件时。这篇文章将带你一步步完成这个任务！首先，我们需要一个HTML `` 元素来上传图片，然后通过 ` FileReader ` 获取图片数据，并使用 Canvas 进行裁剪操作。
第一步是创建一个简单的文件选择器：
```html
```
接着，在 `uploadImage` 方法中，我们利用 `FileReader` 将图片转为 Base64 格式：
```javascript
const reader = new FileReader();
reader.onload = (e) => {
this.imageSrc = e.target.result;
};
reader.readAsDataURL(file);
```
接下来，使用 Canvas 对图片进行裁剪：
```javascript
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = this.imageSrc;
img.onload = () => {
canvas.width = targetWidth; // 设置裁剪宽度
canvas.height = targetHeight; // 设置裁剪高度
ctx.drawImage(img, startX, startY, targetWidth, targetHeight, 0, 0, targetWidth, targetHeight);
const base64 = canvas.toDataURL('image/png');
console.log(base64); // 输出裁剪后的Base64
};
```
通过以上步骤，你就可以轻松实现图片的预览、裁剪以及获取裁剪区域的 Base64 数据啦！✨
标签：
免责声明：本文由用户上传，如有侵权请联系删除！