vue3中有什么方法可以实现图片裁剪？

Question

就类似这种
使用场景就是上传的图片只能是72X72的 如果不是就弹出页面 让用户自行裁剪

Answer 1

1、使用第三方库
可以使用一些流行的第三方库来实现图片裁剪，例如 cropperjs 和 vue-cropperjs。这些库提供了一个可交互的用户界面，让用户可以在网页上直接选择要裁剪的区域，然后输出裁剪后的图片。您可以通过安装这些库的npm包来使用它们。

2、使用canvas元素
您可以使用HTML5中的canvas元素来裁剪图片。首先，将图片加载到canvas元素中，然后使用drawImage()方法绘制它。然后，使用getImageData()方法获取要裁剪的像素数据，并将其存储在一个新的canvas元素中。最后，使用toDataURL()方法将新的canvas元素转换为base64编码的图像数据。您可以使用Vue的ref属性来访问canvas元素。

3、使用CSS样式
您可以使用CSS样式中的clip属性来裁剪图片。这种方法需要将图片作为背景图像放置在一个具有裁剪效果的元素中。您可以使用clip-path属性来创建一个裁剪路径，并将其应用于图像容器元素。然后，使用background-position属性将图像放置在裁剪路径的正确位置。此方法的优点是，它可以通过CSS样式来处理，并且无需使用JavaScript

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

直接用 cropper.js 不就好了？

社区里面还有一大堆相关的食用教程：

• Vue3头像选择器
• 移动端cropper.js 裁剪图片并上传
• 用Vue.js在浏览器中裁剪图像

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。