Vue-select-avatar NPM

vue-select-avatar

这是一个基于 vue 选择头像的包，用户可以通过简单的鼠标操作对图片实现缩放、移动的效果，从而得到一张符合用户预期的头像。

说明

2 版本相比 1 版本取消支持了移动端，而 2 版本使用 ts + vue2 + sass 进行了重构

未来的 3 版本，将采用 ts + vite + vue3 + sass 进行开发

演示地址

安装

npm i vue-select-avatar

注意：vue2 的项目请安装 "2.x.x" 版本，vue3 的项目暂时还不支持

使用

// 导入
import selectAvatar from 'vue-select-avatar';

selectAvatars({
	// 配置项……
})
	.then((data) => {
		console.log('返回数据：', data);
	})
	.catch((err) => {
		// 错误处理
		switch (err.code) {
			case 0:
				console.log('图片格式错误');
				break;
			case 1:
				console.log('图片文件过大');
				break;
			case 2:
				console.log('图片尺寸过小');
				break;
		}
	});

options

参数	类型	可选值	默认值	说明
`title`	string		'选择头像'	标题
`confirmButtonText`	string		'确定'	确定按钮文本
`cancelButtonText`	string		'取消'	取消按钮文本
`themeColor`	string		'#409EFF'	主题色('#409EFF' / '64, 158, 255')
`edgeLine`	boolean		true	是否展示边缘线
`overlay`	boolean		true	是否展示遮罩层
`top`	string			对话框距离顶部的距离，接受 css 长度值(10px, 10vh)，不传就是垂直居中
`dark`	boolean		false	是否为暗色模式
`gridBackground`	boolean		true	是否使用网格背景
`dataType`	string	'base64' / 'file' / 'all'	'all'	返回数据格式
`ext`	string	'png' / 'jpg' / 'webp'	'png'	返回图片格式
`filename`	string			返回图片格式为 file 的文件名，默认为选择图片的文件名（注意不要加扩展名）
`maxZoomRatio`	number		6	最大缩放比（需要大于 0）
`viewportSize`	number		300	取景器/视口大小
`fileSizeLimit`	number		2048	选择图片文件的大小限制，单位：KB
`maxAvatarSize`	number		0	返回头像最大值，当选择区域的头像大小(宽高)超过这个值时，则按照设置的宽高值返回（大于 0 生效）
`minAvatarSize`	number		0	选择的图片宽高的最小值（当用户选择的图片小于设置的值，则进入错误处理）（大于 0 生效）
`minAvatarSizeLimit`	boolean		false	当这个为 true 且设置了 `minAvatarSize` 时，图片放大时宽高的最小值就不能超过 `minAvatarSize`
`cropperSize`	number		60	遮挡区宽度
`closeOnClickOverlay`	boolean		true	是否可以通过点击遮罩层关闭
`closeOnPressEscape`	boolean		true	是否可以通过按下 ESC 关闭
`beforeClose`	(done: Function) => void			关闭前的回调，回调函数内执行 done 参数方法的时候才是真正关闭的时候（当点击遮罩层、按下 ESC 键、点击关闭按钮的时候触发）
`arrowKeys`	boolean		true	是否可以通过方向键和 w、a、s、d 键调整位置

ext 选项建议选择 webp，因为 webp 格式在同等大小的图片下 webp 格式占用空间更小

result

根据 dataType 的值返回不同的结果

设置值	返回类型
base64	string
file	File
all	{ base64: string, file: File; }

error

错误类型	name	code	说明
ImageTypeError	ImageTypeError	0	"vue-select-avatar"几乎支持所有常见图片类型（除了 gif）
TmageFileTooLarge	TmageFileTooLarge	1	图片文件过大
ImageDimensionsTooSmall	ImageDimensionsTooSmall	2	图片尺寸过小