vue-select-avatar

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

说明

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

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

演示地址

gitee

安装

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 | 图片尺寸过小 |

支持选择的图片类型

• jpg
• jpeg
• png
• svg
• svgz
• webp
• ico
• xbm
• tif
• jfif
• tiff
• bmp
• pjp
• apng
• pjpeg
• avif