在 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 数据啦！✨