关于javascript:一款纯-JS-实现的轻量化图片编辑器

因为一些特点的工作场景, 写文章的须要每次解决一些图片, 在下面加阐明文字, 或者加一些图形

刚开始应用 PPT 来解决, 一张张复制过来, 做一些边框暗影解决, 再加一些图形, 而后再导出来复制到须要的中央, 而且导出后的图片之后可能不会再应用了还要清理.

图片多了反复操作的步骤就多了, 比拟的繁琐, 想想是否有个工具去解决这个问题, 搜了一下, 要么就是太重的业余的软件, 要么就是不太合乎批量的要求的软件.

简略总结一下我的场景就是: 来了一堆图片, 都须要做一些 “ 轻解决 ”, 有些须要加文字, 或者加个箭头等.

要害就是 “ 轻 ”, 不须要去期待几十秒去关上, 进行繁琐的解决
不须要下载就能应用, 用完敞开即可
简略, 易用, 可视化, 不须要一些简单的操作, 鼠标点击就能实现

如果下面的场景是你所遇见的, 也想轻量疾速的解决一些图片, 这个我的项目就是为你而筹备的

GenOptimizer 在线演示地址

反对多图操作
反对图片拖拽增加
反对所有属性的动静配置
反对一键复制批改后的后果
反对画笔、文字、矩形、圆形、箭头、线条、图像的增加

这个我的项目没有依赖于任何的第三方框架, 以纯 JS 实现

最初形象出了一个框架 (GenOptimizer), 以一种非常简洁易用的形式写出了整个我的项目

上面是我的项目的 git 地址, 笔者初学前端, 还请多多指教

Github 地址
Gitee 地址

上面是介绍框架的一些技术总结, 特地的轻量化, 后序会对揭秘一下具体的实现计划

事件、画图、交互全局治理
反对注册自定义组件, 可自定义配置管理
基于面向对象, 高度形象代码
简略易用, 能疾速开发出各种成果

首先须要场景管理器, 通过继承 GenScene 来创立场景, 场景里对于页面中的多个控制器进行治理

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

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

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

...
<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)
})

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)

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

有时候一些小的操作, 都可能引发咱们的思考, 如何能力更不便的解决这一类的问题?

这个例子就是我的思考, 心愿能给于你一点灵感或启发.

关于javascript:一款纯-JS-实现的轻量化图片编辑器

介绍

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

Optimizer 框架特点

Optimizer 框架应用

启动

场景管理器 (Scene)

事件 (Event)

页面事件

鼠标事件

键盘事件

组件 (Component)

注册组件

应用组件

总结