Vue Vue-Cropper支持图片和头像的裁剪功能

官方链接（github）：

GitHub - xyxiao001/vue-cropper: A simple picture clipping plugin for vue

相关知识：

1. 若生成的图像清晰度不足，可通过调整enlarge属性来优化裁剪质量。该参数默认设置为1，对应生成图像大小约为25k；若设为2，则生成图像大小约为900k。建议将数值设定为1.5，此时生成的图像大小约为400k。

一、安装。

执行命令安装 vue-cropper 模块：

以下测试代码建议采用特定版本进行安装：

通过指定版本号安装 vue-cropper：

若生成的图像存在位置偏移现象，通常与所使用的版本有关。此外，也可能受到样式设置的影响，例如：

img {max-width: 100%;}

上述样式代码可能会导致图像发生拉伸变形的问题。

二、项目使用。

关于头像裁剪的处理：

![](https://ad.itadn.com/