🎉 Vue 实现图片预览、裁剪并获取被裁剪区域的Base64(无组件) 📸
在 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 数据啦!✨
免责声明:本答案或内容为用户上传,不代表本网观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。 如遇侵权请及时联系本站删除。