纯JS轻量级图片编辑器：GenOptimizer框架实现与使用指南

介绍

针对特定工作场景，撰写文章时常需对图片进行批量处理，例如添加说明文字或图形标注。

初期采用PPT进行手动处理，需逐一复制图片、添加边框阴影及图形，导出后再复制至目标位置。此过程不仅繁琐，且导出后的图片若不再使用，还需额外清理。

随着图片数量增加，重复操作步骤显著增多，流程显得尤为繁琐。经搜索发现，现有解决方案要么过于厚重且专业，要么不符合批量处理的需求。

核心场景可概括为：接收一批图片，均需进行“轻量级处理”，包括添加文字或箭头等简单元素。

关键在于“轻量”，无需长时间等待启动，避免繁琐的处理流程。
无需下载安装即可直接使用，使用完毕后关闭即可。
操作简便、易用且可视化，无需复杂操作，通过鼠标点击即可完成。

一款纯 JS 实现的轻量化图片编辑器

若上述场景符合您的需求，且希望轻量快速地处理图片，本项目正是为您设计的解决方案。

GenOptimizer 在线演示地址

支持多图操作
支持图片拖拽添加
支持所有属性的动态配置
支持一键复制修改后的结果
支持画笔、文字、矩形、圆形、箭头、线条、图像的添加

该项目未依赖任何第三方框架，完全以纯 JS 实现。

最终抽象出一个框架（GenOptimizer），以简洁易用的方式完成了整个项目的开发。

以下是项目的 git 地址，笔者初学前端，还请多多指教

Github 地址

Gitee 地址

下文将介绍框架的一些技术总结，其特别轻量化，后续将对具体实现方案进行揭秘。

Optimizer 框架特点

事件、画图、交互全局管理
支持注册自定义组件, 可自定义配置管理
基于面向对象, 高度抽象代码
简单易用, 能快速开发出各种效果

Optimizer 框架使用

启动

首先需要场景管理器，通过继承 GenScene 来创建场景，场景内对页面中的多个控制器进行管理。

class MainScene extends GenScene {
    constructor(optimizer) {
        super(optimizer)
    }
}

全局使用 instance 获取实例，加载场景管理器，最简单的 Optimizer 程序就启动了

GenOptimizer.instance(function(o){
    let scene = MainScene.new(o)
    o.runWithScene(scene)
})

场景管理器 (Scene)

页面事件Event

...
<div class='gen-auto-button-area'>
    <button class='gen-auto-button' data-value='config.arg1'>text</button>
</div>
...

// 注册页面 class, 全局可用
this.registerPageClass({
    "buttonArea": 'gen-auto-button-area',
    ...
})
// 注册全局事件       
this.registerGlobalEvents([     
    {
        eventName: "click",
        // 事件绑定的元素区域
        className: sc.pageClass.buttonArea,
        // 在 所有 configToEvents 响应之 前 触发
        after: function(bindVar, target) {
            // bindVar: 绑定的变量
            // target: 事件触发的目标
        },        
        // 在 所有 configToEvents 响应之 后 触发
        before: function(bindVar, target) {
            // bindVar: 绑定的变量
            // target: 事件触发的目标
        },
        // 事件响应
        configToEvents: {
            // 自定义绑定的变量: 事件触发后的响应
            "config.arg1": function(target) {
            },
            "action.arg1": function(target) {
            },
            ...
        }
    },
    ...
])

鼠标事件

this.resgisterMouse(function(event, action) { 
    // event 是鼠标点击的事件
    // action 为鼠标点击的事件名称    
    if (action == 'mouseleave') {
        console.log('mouseleave canvas')
    } else if (action == 'up') {
        console.log('up canvas')
    } else if (action == 'down') {
        console.log('down canvas')
    } else if (action == 'move') {
        console.log('move canvas')
    }
})

键盘事件

this.registerAction("Backspace", status => {
    // status 为 'down' 时, 表示按下, 为 'up' 时, 表示松开
    console.log("Backspace", status)
})
this.registerAction("s", status => {
    // status 为 'down' 时, 表示按下, 为 'up' 时, 表示松开
    console.log("s", status)
})

注册组件 Component

class MyComponent extends GenComponent {
    constructor(control) {
        super(control.scene)
        this.control = control
    }
    ...
}
this.bindComponent('attribute', MyComponent.new(this))

使用组件

// 全局可使用组件
let data = ...
this.getComponent('attribute').buildWith(data)

总结

本文介绍了笔者实现的一款可拖拽、低代码、轻量化的图片编辑器，解决了繁琐处理图片的问题

有时候一些小的操作, 都可能引发我们的思考, 如何才能更方便的处理这一类的问题?

这个例子就是我的思考, 希望能给于你一点灵感或启发，更多关于纯JS轻量化图片编辑器的资料请关注本站其它相关文章！

纯JS实现的轻量化图片编辑器实例详解

介绍