Imgeditor-js NPM

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	Arraystring	可选	rectangle 矩形圆形circle draw画笔 text文字 revoke 撤销 download 保存
customStyle	object	可选	自定义工具栏及按钮样式

option.customStyle 内可配置各个按钮各自的样式

    customStyle:{
        toolbar:{},
        rectangle:{},
        circle:{}
        .....
    }

option.customStyletoolbarMenu可配置如下

属性	类型	可/必选	说明
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()

canvas image editor

@infinitebrahmanuniverse/nolb-img @everything-registry/sub-chunk-1905

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago