# vue签名板 vue3-online-signature
**Repository Path**: awfifnypm/vue3-online-signature
## Basic Information
- **Project Name**: vue签名板 vue3-online-signature
- **Description**: ## 功能
1. 兼容 PC 和 Mobile;
2. 屏幕旋转自适应自定义画布屏幕大小(屏幕旋转后竖屏与横屏数据互通);
3. 自定义画布尺寸(尺寸可通过获取id元素,幕屏尺寸,自定义宽高),画笔粗细、颜色,画布背景色;
4. 支持裁剪 (针对需求:有的签字需要裁剪掉四周空白)。
5. 自定义导出图旋转角度
6. 自定义画布背景(支持图片及图片背景重复)
7. 自定义导出图背景(支持图片及图片背
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-18
- **Last Updated**: 2024-02-25
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# vue3-online-signature
> Canvas 手写签字/签名板
> 本组件使用Vue3.x版本开发,Vue3.x必须使用vue3-online-signature,如果使用Vue2.x版本的项目,请使用Vue2.x版本组件
## 版本提示
1. Vue2.x npm链接 或 npm install vue-online-signature --save
2. Vue2.x gitee链接 https://gitee.com/awfifnypm/vue-online-signature
## 功能
1. 兼容 PC 和 Mobile;
2. 屏幕旋转自适应自定义画布屏幕大小(屏幕旋转后竖屏与横屏数据互通);
3. 自定义画布尺寸(尺寸可通过获取id元素,幕屏尺寸,自定义宽高),画笔粗细、颜色,画布背景色;
4. 支持裁剪 (针对需求:有的签字需要裁剪掉四周空白)。
5. 自定义导出图旋转角度
6. 自定义画布背景(支持图片及图片背景重复)
7. 自定义导出图背景(支持图片及图片背景重复,可生成与画布背景不一样背景的图片)
8. 导出图片格式为 `base64`;
9. 初始化布画恢复历史绘制数据或在已经的画布上恢复历史绘制数据
[示例demo](http://b.wujiang.pro/)
注: 本组件是基于vue-esign插件基础上进行二开和修改,使用方法与vue-esign插件有差异,建议查看本插件文档
## 安装
``` bash
npm install vue3-online-signature --save
```
## 使用
1. 引入 main.js 获vue页面引入
```js
import vueSignature from 'vue3-online-signature'
```
2. 页面中使用
**必须设置 `ref` ,用来调用组件内暴露的内置方法 `reset()` 和 `confirm()`**
自定义的宽度超出屏幕宽度的话,组件样式宽度则是父元素的100%;
组件所有参数都非必填,组件emit出部份内置方法,具体查看下面说明文档
```html
```
```js
const resultImg = ''
const params = reactive