# elesign

> canvas 电子涂鸦，线上签名

Latest version **1.0.9** (published 2023-02-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install elesign
pnpm add elesign
yarn add elesign
bun add elesign
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2023-02-10 |
| First published | 2023-01-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 14.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | lishengqin |
| Keywords | canvas, 电子涂鸦, 线上签名 |

## Links

- npm: https://www.npmjs.com/package/elesign
- npm.io page: https://npm.io/package/elesign

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^3.2.45
- [vue-router](https://npm.io/package/vue-router.md) ^4.1.6
- [elesigncode](https://npm.io/package/elesigncode.md) ^1.1.9

## 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.0.9 (latest) — 2023-02-10
- 1.0.8 — 2023-02-10
- 1.0.7 — 2023-02-07
- 1.0.6 — 2023-01-17
- 1.0.5 — 2023-01-17
- 1.0.4 — 2023-01-17
- 1.0.3 — 2023-01-17
- 1.0.2 — 2023-01-17
- 1.0.1 — 2023-01-17
- 1.0.0 — 2023-01-17

## README

# elesign

通过 canvas 实现线上涂鸦，签名，清空，转为 png，橡皮擦，撤销回退，重做前进，可自定义画笔的颜色(或图片)、粗细。

## props 属性

| 属性名      | 说明                                                                        | 类型             | 默认值                         |
| ----------- | --------------------------------------------------------------------------- | ---------------- | ------------------------------ |
| width       | 画布宽度                                                                    | Number           | 500                            |
| height      | 画布高度                                                                    | Number           | 200                            |
| canvasStyle | 画布样式                                                                    | Object           | { border: '2px solid #6699cc'} |
| color       | 画笔颜色                                                                    | String           | #000                           |
| lineWidth   | 画笔粗细                                                                    | String 或 Number | 10                             |
| empty       | 空的文字内容                                                                | String           | 签名区域                       |
| defaultImg  | 画布初始的值，格式应该是 canvas 的 toDataURL() 方法，生成的是 base64 的图片 | String           | ""                             |
| isEraser    | 是否橡皮擦转状态                                                            | Boolean          | false                          |
| eraserSize  | 橡皮擦大小                                                                  | Number           | 25                             |

## expose 暴露的实例属性

| 属性名         | 说明              | 类型     |
| -------------- | ----------------- | -------- |
| redo           | 清空的方法        | function |
| toPng          | 转为 png 的的方法 | function |
| backward       | 撤销后退的方法    | function |
| forward        | 重做前进的的方法  | function |
| isEmpty        | 画布是否为空      | Boolean  |
| isBackwardAble | 是否可以撤销回退  | Boolean  |
| isForwardAble  | 是否可以重做前进  | Boolean  |

## 使用示例

```vue
<template>
  <div class="draw-wrap">
    <elesign ref="elesignRef" color="red" lineWidth="5" width="400" empty="请签名" />
    <div class="tool">
      <button @click="redo">重做</button>
      <button @click="toPng">打印png</button>
      <div>{{ '画布是否为空：' + isEmpty }}</div>
    </div>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue';
import elesign from 'elesign';
const elesignRef = ref('');
const isEmpty = computed(() => {
  return elesignRef.value?.isEmpty;
});
/* 清空 */
function redo() {
  elesignRef.value?.redo();
}
/* 打印图片 */
function toPng() {
  let pic = elesignRef.value?.toPng();
  console.log(pic);
}
</script>
<style>
.draw-wrap {
  background: #fff;
  color: #000;
  padding: 40px;
}
.tool div {
  margin-top: 16px;
}
.tool button {
  margin-top: 16px;
  margin-right: 8px;
}
</style>
```

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