# imgeditor-js

> 基于canvas实现的图片编辑器

Latest version **1.1.0** (published 2022-06-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install imgeditor-js
pnpm add imgeditor-js
yarn add imgeditor-js
bun add imgeditor-js
```

## 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.1.0 |
| Published | 2022-06-21 |
| First published | 2022-05-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 21.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wlzs |
| Maintainers | wlzs93 |
| Keywords | canvas, image, editor |

## Links

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

## 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.1.0 (latest) — 2022-06-21
- 1.0.3 — 2022-05-23
- 1.0.2 — 2022-05-23

## README

## imageEditor ##
简介：基于canvas 实现的 图片编辑及下载

### 在线体验  
  [体验地址](http://wlown.com/plugin/imageEditor/index.html)

### 使用方式 ###   

* 安装插件  
```javascript
  npm i imgeditor-js
```
   

* 引入插件  
```js
  import { ImgEditor } from ImageEditor 
```

* 实例化   
```
    let imgEditorInstance = new ImgEditor('imgContent', option)
   ```

* 使用  
```js
    let option = {
        imgUrl: 'https:alifei02.cfp.cn/creative/vcg/veer/800/new/VCG41N177546665.jpg',
        imgWidth: 550,
        imgHeight: 450,
        toolBarPosition: 'bottom', //top bottom  left  right ,
        toolbarMenu: ['rectangle', 'circle', 'draw', 'text', 'revoke', 'download']   rectangle 矩形  圆形circle   draw画笔   text文字  
    }
    let imgEditorInstance = new ImgEditor('imgContent', option)
```

* 参数说明  
```js
    new ImgEditor(id, opiton) 接受2个参数
        params1:图片编辑器父级容器id，params2:配置项 
```   

   option配置  
 
|属性      |   类型    | 可/必选 |   说明 | 
| -------: | ------- | --------- | ------- |
| imgurl    | string  | 必选    | 图片地址    |
| imgWidth    | int  |  必选    |被编辑的图片宽度 
| imgHeight   | int  |  必选    |被编辑的图片高度 
| toolbarMenu| Array[string] | 可选 | rectangle 矩形  圆形circle  draw画笔  text文字   revoke 撤销 download 保存 
| customStyle | object  | 可选 | 自定义工具栏及按钮样式
     
    

option.customStyle 内可配置各个按钮各自的样式  
```js
    customStyle:{
        toolbar:{},
        rectangle:{},
        circle:{}
        .....
    }
```   
  

option.customStyle[toolbarMenu]可配置如下  

  | 属性      |   类型    | 可/必选 |   说明 | 
  | -------: | ------- | --------- | ------- |
  | className    | string  | 可选    | 自定义类名，可自行追加style 覆盖原有的icon样式    |
  | background    | strinig  |  可选    | 自定义 默认的背景色 
  | padding   | sting  |  可选    |   自定义 padding值
  | margin | string  | 可选    | 自定义 margin值
  | cokor | string | 可选 | 自定义 字体颜色
  | fontSize | string | 可选 | 自定义 字体大小
  | hoverColor | string  | 可选 | 自定义 鼠标滑过的字体颜色
  | selectedColor | string  | 可选 | 自定义 按钮选中状态的字体颜色
  | selectedBgColor | string  | 可选 | 自定义 按钮选中状态的背景颜色  
  


  完整示例  

```js
        let option = {
        imgUrl: 'https:alifei02.cfp.cn/creative/vcg/veer/800/new/VCG41N177546665.jpg',
        imgWidth: 600,
        imgHeight: 500,
        toolBarPosition: 'bottom', top bottom  left  right ,
        toolbarMenu: ['rectangle', 'circle', 'draw', 'text', 'revoke', 'download'],   //square 矩形  圆形circle   draw画笔   text文字 
         customStyle: {
             toolbar: {
                 className: 'bar-AAA',
                 background: 'yellow',
                 padding: '4px',
                 margin: '5px',
             },
             'rectangle': {
                 className: 'AAA',
                 fontSize: '30px',
                 hoverColor: '#409efd',
                 selectedColor: '#fff',
                 selectedBgColor: 'red'
             },
             'draw': {
                 color: 'green',
                 fontSize: '24px',
                 hoverColor: 'yellow',
                 selectedColor: '#fff',
                 selectedBgColor: 'red'
             }
         }
    }
```

### 内置方法  

 ```js
    //1 获取当前画布图片数据,返回 blob()数据 
    imgEditorInstance._getCurtCanvasImage()

    //2 画布重新加载
    imgEditorInstance._reload()

    //3 实例销毁
    imgEditorInstance._distory()

```

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