# canvas-sign-online

> canvas在线签名

Latest version **1.2.3** (published 2022-09-05) · ISC license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.3 |
| Published | 2022-09-05 |
| First published | 2022-03-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 33.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | langwei |
| Maintainers | langwei |
| Keywords | canvas, sign |

## Links

- npm: https://www.npmjs.com/package/canvas-sign-online
- Repository: https://github.com/javascript-wei/canvas-sign
- Homepage: https://github.com/javascript-wei/canvas-sign#readme
- Issues: https://github.com/javascript-wei/canvas-sign/issues
- npm.io page: https://npm.io/package/canvas-sign-online

## 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

- 1.2.3 (latest) — 2022-09-05
- 1.2.2 — 2022-09-05
- 1.2.1 — 2022-03-13
- 1.2.0 — 2022-03-13

## README

# canvas-sign
## Use
```js
npm run canvas-sign-online --save
```
第一步初始化并且设置容器大小：
```js
import CanvasSign from "canvas-sign-online";

const cv = document.getElementById("canvas");
const canvas = new CanvasSign(cv);
cv.width = '500';
cv.height = '500';
```
第二步画笔设置样式：
```js
canvas.setLineStyle({
    strokeStyle: "black",
    lineWidth: 2,
    shadowBlur: '1',
    lineCap: 'round',
    shadowColor: 'black',
    lineJoin: 'round',
})
```
接下来就是自由绘制了。  
绘制完成后导出：
```js
// 导出json
const dataJson = canvas.toJson().dataJson;
// 导出图片
const img = document.createElement("a");
img.href = canvas.getPNGImage();
img.download = "canvas-sign.png";
img.style.display = "none";
document.body.appendChild(img);
img.click();
document.body.removeChild(img);
```
导入json：
```js
canvas.loadJson(dataJson);
```
api列表：  

api | Description | Note
--- | --- | ---
`getPNGImage` | png格式导出 |
`getJPGImage` | jpg格式导出 |
`clear` | 清除画板 |
`setLineStyle` | 设置画笔样式 | 同原生canvas 样式和颜色
`toJson` | 导出json |
`loadJson` | 加载已经导出的json | toJson().dataJson

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