imgeditor-js

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()