imageEditor

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

在线体验

体验地址

使用方式

• 安装插件

  npm i imgeditor-js

• 引入插件

  import { ImgEditor } from ImageEditor 

• 实例化

    let imgEditorInstance = new ImgEditor('imgContent', option)

• 使用

    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)

• 参数说明

    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 内可配置各个按钮各自的样式

    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 | 可选 | 自定义 按钮选中状态的背景颜色

完整示例

        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'
             }
         }
    }

内置方法

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

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

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