# chartlet

> 图片布局工具

Latest version **0.2.1** (published 2019-04-03) · ISC license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2019-04-03 |
| First published | 2019-03-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 65.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | russell-northeast |
| Keywords | chartlet, image, canvas |

## Links

- npm: https://www.npmjs.com/package/chartlet
- Repository: https://github.com/383514580/chartlet
- Homepage: https://github.com/383514580/chartlet#readme
- Issues: https://github.com/383514580/chartlet/issues
- npm.io page: https://npm.io/package/chartlet

## 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.2.1 (latest) — 2019-04-03
- 0.2.0 — 2019-04-02
- 0.1.4 — 2019-03-28
- 0.1.3 — 2019-03-28
- 0.1.1 — 2019-03-26
- 0.1.0 — 2019-03-19
- 0.0.1 — 2019-03-19

## README

# chartlet

:whale: 基于canvas实现的小巧的贴图工具

## 安装
```shell
npm i --save chartlet
```

## CDN
```shell
https://unpkg.com/chartlet/dist/chartlet.umd.js
```

## 基础示例
``` javascript
let cl = new Chartlet({
    backgroundImageURL: '../demo.jpg',
    items: [{
            top: 474,
            left: 1168,
            angle: 30,
            width: 569,
            height: 878,
            url: '../avatar.png'
        },
        {
            top: 1679,
            left: 1168,
            angle: 0,
            width: 569,
            height: 878,
            url: '../avatar.png'
        },
    ]
});
cl.on('loaded', () => {
    const dataURL = cl.toDataURL();
    console.log(dataURL);
})
```

## API

### constructor
构造函数参数:

|名称|类型|默认值|说明|
|---|---|---|---|
|backgroundImageURL|`String`|-|背景图|
|items|`Array`|[]|贴图组|

**items展开**

|名称|类型|说明|
|---|---|---|
|top|`Number`|与canvas左上角y距离|
|left|`Number`|与canvas左上角x距离|
|angle|`Number`|每个贴图的旋转角度|
|width|`Number`|每个贴图的宽度|
|height|`Number`|每个贴图的高度|
|url|`String`|图片地址|

### set
修改设置, 参数同构造函数参数

### on
监听方法, 比如监听图片是否加载完成
``` javascript
cl.on('loaded', ()=>{
    // 图片加载完成
    // 可以开始获取效果图的dataURL
})
```

### toDataURL
生成base64

|参数名称|类型|默认值|说明|
|---|---|---|---|
|type|`String`|image/png|图片类型|
|encoderOptions|`Number`|0.92|压缩比|
|width|`Number`|背景图的宽度|生成图片的宽度|
|height|`Number`|背景图的高度|生成图片的高度|

```javascript
cl.on('loaded', ()=>{
    const dataURL = cl.toDataURL();
    console.log(dataURL);
})
```

### getRate
获取canvas的宽/高比
``` javascript
cl.on('loaded', ()=>{
    const dataURL = cl.toDataURL({
        width: 100,
        height: 100 / cl.getRate()
    });
    console.log(dataURL);
})
```

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