# galaxy-canvas-sign

> 银河集团Canvas签名sdk

Latest version **0.0.5** (published 2023-02-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install galaxy-canvas-sign
pnpm add galaxy-canvas-sign
yarn add galaxy-canvas-sign
bun add galaxy-canvas-sign
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2023-02-07 |
| First published | 2023-02-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 27.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | xngbb |
| Keywords | canvas, sign, canvas-sign |

## Links

- npm: https://www.npmjs.com/package/galaxy-canvas-sign
- npm.io page: https://npm.io/package/galaxy-canvas-sign

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2023-02-07
- 0.0.4 — 2023-02-06
- 0.0.3 — 2023-02-06
- 0.0.2 — 2023-02-06
- 0.0.1 — 2023-02-06

## README

## galaxy-canvas-sign
一款支持 PC 端，移动端 Canvas 签名插件。

## 安装使用
```
npm i galaxy-canvas-sign -s
```

html:
```
<div id="canvas-sign">
</div>
```
js
```
 const vm = new CanvasSign({
    el:'#signCanvas',        // 在某个节点下插入画板
    width:800,               // canvas 宽度
    height:400,              // canvas 高度
    crop:true,               // 是否裁剪出签名区域
    cropPaddingX:10,         // 裁剪出签名区域水平 padding
    cropPaddingY:10,         // 裁剪出签名区域垂直 padding
    color:'#000',             // 画笔颜色
    lineWidth:2,             // 画笔宽度
    lineCap:'round',         // 笔尖类型
})
vm.init()
```
## 属性配置
|  属性   | 属性说明 |是否必传|默认值|
|  ----  | ----  |---|---|
| el  | 画布挂载在哪个节点下，需保证唯一 |是|-|
| width  | 画布宽度 |是|800|
| height  | 画布高度 |是|400|
| crop |是否裁剪出实际签名区域|否|false|
| cropPaddingX |裁剪区域水平留边|否|10|
| cropPaddingY |裁剪区域垂直留边|否|10|
| color |画笔颜色|否|#000|
| lineWidth |画笔宽度|否|2|
| lineCap |画笔末端类型，同 canvas lineCap|否|round|

## 实例方法
|  方法   | 方法说明 |
|  ----  | ----  |
| init  | 初始化画布实例之后必须手动调用 |
| clear  | 清空画布 |
| exportCanvas  | 导出画布元素方法,返回 canvas，可以调用 toDataURL 等方法 |
| getPoints |返回所有绘制点的坐标数组，可以通过此方法判断用户是否签名|


## example
```
npm run dev
PC端：http://localhost:8000/example/pc.html
移动端：http://localhost:8000/example/h5.html
```

html:
```html
 <div class="container">
        <p>请在下面区域签字</p>
        <div id="signCanvas"></div>
        <div>
            <button class="btn btn-warning" onclick="clearSign()">清空</button>
            <button class="btn btn-primary" onclick="getBase64()">确定</button>
        </div>
    </div>
    <div style="margin-top:8px">
        <img id="imgPreview" style="border: 1px solid gray;"/>
    </div>
```
js:
```js
const vm = new CanvasSign({
    el:'#signCanvas',        // 在某个节点下插入画板
    width:800,               // canvas 宽度
    height:400,              // canvas 高度
    crop:true,               // 是否裁剪出签名区域
    cropPaddingX:10,         // 裁剪出签名区域水平 padding
    cropPaddingY:10,         // 裁剪出签名区域垂直 padding
    borderStyle:'dashed',    // canvas 边框类型
    color:'red',             // 画笔颜色
    lineWidth:2,             // 画笔宽度
    lineCap:'round',         // 笔尖类型
})

vm.init()

function clearSign(){
    vm.clear()
    const el = document.getElementById("imgPreview")
    el.src = ""
}

function getBase64(){
    if(vm.getPoints().length <=3){
        alert('请先签名！')
        return
    }
    const base64 = vm.exportCanvas().toDataURL("image/png")
    const el = document.getElementById("imgPreview")
    el.src = base64
}
```

## License
Released under MIT LICENSE。

---
_Source: https://npm.io/package/galaxy-canvas-sign · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._