纯JS实现的轻量级图片编辑器
介绍工作场景，因为有一些特点。作者每次都需要对一些图片进行处理，在上面添加说明文字，或者添加一些图形。刚开始用PPT处理，一张一张复制，做一些边框阴影处理，加上一些Graphics，然后导出复制到需要的地方，导出的图片可能不能再用，需要清理向上。如果图片太多，重复操作的步骤会比较多，比较繁琐。想想有没有什么工具可以解决这个问题，搜索了一下，发现要么是专业软件太重，要么是软件不符合批量要求。我的场景简单总结就是：来了一堆图片，都需要“轻处理”，有的需要加文字，或者加箭头等，关键是“轻”，不需要等待几十秒打开，繁琐处理无需下载即可使用，用完即可关闭。简单易用，可视化，无需一些复杂的操作，一个纯JS实现的轻量级图片编辑器，点击鼠标即可完成准备好的GenOptimizer在线演示地址支持多图操作支持图片拖拽添加支持动态配置所有属性支持一键复制修改结果支持添加画笔、文字、矩形、圆、箭头、线条、图片本项目无依赖对于任何第三方框架，最终用纯JS抽象出一个框架（GenOptimizer），整个项目的编写非常简洁易用。下面是项目的git地址。本人前端初学者，多多指教Github地址Gitee地址以下是介绍框架的一些技术总结，特别是轻量级，下面依次揭晓具体实现方案Optimizer框架的特点Events,drawing,交互全局管理支持注册自定义组件，基于面向对象的自定义配置管理，高度抽象的代码简单易用，可以快速开发各种效果。Optimizer框架首先需要一个场景管理器来启动，通过继承GenScene来创建场景。场景管理页面上的多个控制器。classMainSceneextendsGenScene{constructor(optimizer){super(optimizer)}}全局使用instance获取实例，加载场景管理器，最简单的Optimizer程序启动GenOptimizer.instance(function(o){letscene=MainScene.new(o)o.runWithScene(scene)})场景管理器(Scene)事件(Event)页面事件...text
...//注册页面类，全局可用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){},...}},...])mouseeventthis.resgisterMouse(function(event,action){//event是鼠标点击事件//action是鼠标点击事件名称='down'){console.log('downcanvas')}elseif(action=='move'){console.log('movecanvas')}})键盘事件this.registerAction("Backspace",status=>{//当状态为'down'时表示按下，当它为'up'时表示释放console.log("Backspace",status)})this.registerAction("s",status=>{/当/status为'down'时，表示按下，当为'up'时，表示释放{super(control.scene)这个。control=control}...}这个。bindComponent('一个ttribute',MyComponent.new(this))usecomponents//全局可用的组件letdata=...this.getComponent('attribute').buildWith(data)总结本文介绍了一个可拖动的、低代码的、轻量级的图像编辑器解决了图片处理繁琐的问题。有时候一些小操作可能会引发我们的思考。我们怎样才能更方便地处理这类问题呢？这个例子是我的思考，希望能给大家一些启发或启迪。
