站長資訊網
本文給大家介紹一款純 JS 實現的輕量化圖片編輯器，希望對需要的朋友有所幫助！
前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具：點擊使用
介紹
因為一些特點的工作場景, 寫文章的需要每次處理一些圖片, 在上面加說明文字, 或者加一些圖形
剛開始使用 PPT 來處理, 一張張復制過去, 做一些邊框陰影處理, 再加一些圖形, 然后再導出來復制到需要的地方, 而且導出后的圖片之后可能不會再使用了還要清理.
圖片多了重復操作的步驟就多了, 比較的繁瑣, 想想是否有個工具去解決這個問題, 搜了一下, 要么就是太重的專業的軟件, 要么就是不太符合批量的要求的軟件.【推薦：JavaScript視頻教程】
簡單總結一下我的場景就是: 來了一堆圖片, 都需要做一些 "輕處理", 有些需要加文字, 或者加個箭頭等.
-
關鍵就是 "輕", 不需要去等待幾十秒去打開, 進行繁瑣的處理
-
不需要下載就能使用, 用完關閉即可
-
簡單, 易用, 可視化, 不需要一些復雜的操作, 鼠標點擊就能完成
一款純 JS 實現的輕量化圖片編輯器
如果上面的場景是你所遇見的, 也想輕量快速的處理一些圖片, 這個項目就是為你而準備的
GenOptimizer 在線演示地址:https://genoptimizer.cn/
-
支持多圖操作
-
支持圖片拖拽添加
-
支持所有屬性的動態配置
-
支持一鍵復制修改后的結果
-
支持畫筆、文字、矩形、圓形、箭頭、線條、圖像的添加
這個項目沒有依賴于任何的第三方框架, 以純 JS 實現
最后抽象出了一個框架 (GenOptimizer), 以一種十分簡潔易用的方式寫出了整個項目
下面是項目的 git 地址, 筆者初學前端, 還請多多指教
-
Github 地址:https://github.com/hellojuantu/image_border_optimizer
-
Gitee 地址:https://gitee.com/sanbuqu/image_border_optimizer
下面是介紹框架的一些技術總結, 特別的輕量化, 后序會對揭秘一下具體的實現方案
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)
總結
本文介紹了筆者實現的一款可拖拽、低代碼、輕量化的圖片編輯器, 解決了繁瑣處理圖片的問題
有時候一些小的操作, 都可能引發我們的思考, 如何才能更方便的處理這一類的問題?
這個例子就是我的思考, 希望能給于你一點靈感或啟發.
