純?JS?實(shí)現(xiàn)的輕量化圖片編輯器實(shí)例詳解
介紹
因?yàn)橐恍┨攸c(diǎn)的工作場景, 寫文章的需要每次處理一些圖片, 在上面加說明文字, 或者加一些圖形
剛開始使用 PPT 來處理, 一張張復(fù)制過去, 做一些邊框陰影處理, 再加一些圖形, 然后再導(dǎo)出來復(fù)制到需要的地方, 而且導(dǎo)出后的圖片之后可能不會再使用了還要清理.
圖片多了重復(fù)操作的步驟就多了, 比較的繁瑣, 想想是否有個(gè)工具去解決這個(gè)問題, 搜了一下, 要么就是太重的專業(yè)的軟件, 要么就是不太符合批量的要求的軟件.
簡單總結(jié)一下我的場景就是: 來了一堆圖片, 都需要做一些 "輕處理", 有些需要加文字, 或者加個(gè)箭頭等.
- 關(guān)鍵就是 "輕", 不需要去等待幾十秒去打開, 進(jìn)行繁瑣的處理
- 不需要下載就能使用, 用完關(guān)閉即可
- 簡單, 易用, 可視化, 不需要一些復(fù)雜的操作, 鼠標(biāo)點(diǎn)擊就能完成
一款純 JS 實(shí)現(xiàn)的輕量化圖片編輯器
如果上面的場景是你所遇見的, 也想輕量快速的處理一些圖片, 這個(gè)項(xiàng)目就是為你而準(zhǔn)備的
- 支持多圖操作
- 支持圖片拖拽添加
- 支持所有屬性的動(dòng)態(tài)配置
- 支持一鍵復(fù)制修改后的結(jié)果
- 支持畫筆、文字、矩形、圓形、箭頭、線條、圖像的添加
這個(gè)項(xiàng)目沒有依賴于任何的第三方框架, 以純 JS 實(shí)現(xiàn)
最后抽象出了一個(gè)框架 (GenOptimizer), 以一種十分簡潔易用的方式寫出了整個(gè)項(xiàng)目
下面是項(xiàng)目的 git 地址, 筆者初學(xué)前端, 還請多多指教
下面是介紹框架的一些技術(shù)總結(jié), 特別的輕量化, 后序會對揭秘一下具體的實(shí)現(xiàn)方案
Optimizer 框架特點(diǎn)
- 事件、畫圖、交互 全局管理
- 支持注冊自定義組件, 可自定義配置管理
- 基于面向?qū)ο? 高度抽象代碼
- 簡單易用, 能快速開發(fā)出各種效果
Optimizer 框架使用
啟動(dòng)
首先需要場景管理器, 通過繼承 GenScene 來創(chuàng)建場景, 場景里對于頁面中的多個(gè)控制器進(jìn)行管理
class MainScene extends GenScene { constructor(optimizer) { super(optimizer) } }
全局使用 instance 獲取實(shí)例, 加載場景管理器, 最簡單的 Optimizer 程序就啟動(dòng)了
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", // 事件綁定的元素區(qū)域 className: sc.pageClass.buttonArea, // 在 所有 configToEvents 響應(yīng)之 前 觸發(fā) after: function(bindVar, target) { // bindVar: 綁定的變量 // target: 事件觸發(fā)的目標(biāo) }, // 在 所有 configToEvents 響應(yīng)之 后 觸發(fā) before: function(bindVar, target) { // bindVar: 綁定的變量 // target: 事件觸發(fā)的目標(biāo) }, // 事件響應(yīng) configToEvents: { // 自定義綁定的變量: 事件觸發(fā)后的響應(yīng) "config.arg1": function(target) { }, "action.arg1": function(target) { }, ... } }, ... ])
鼠標(biāo)事件
this.resgisterMouse(function(event, action) { // event 是鼠標(biāo)點(diǎn)擊的事件 // action 為鼠標(biāo)點(diǎn)擊的事件名稱 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' 時(shí), 表示按下, 為 'up' 時(shí), 表示松開 console.log("Backspace", status) }) this.registerAction("s", status => { // status 為 'down' 時(shí), 表示按下, 為 'up' 時(shí), 表示松開 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)
總結(jié)
本文介紹了筆者實(shí)現(xiàn)的一款可拖拽、低代碼、輕量化的圖片編輯器, 解決了繁瑣處理圖片的問題
有時(shí)候一些小的操作, 都可能引發(fā)我們的思考, 如何才能更方便的處理這一類的問題?
這個(gè)例子就是我的思考, 希望能給于你一點(diǎn)靈感或啟發(fā),更多關(guān)于純JS輕量化圖片編輯器的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js實(shí)現(xiàn)統(tǒng)計(jì)字符串中特定字符出現(xiàn)個(gè)數(shù)的方法
這篇文章主要介紹了js實(shí)現(xiàn)統(tǒng)計(jì)字符串中特定字符出現(xiàn)個(gè)數(shù)的方法,涉及javascript針對字符串中字符運(yùn)算操作相關(guān)技巧,需要的朋友可以參考下2016-08-08javascript動(dòng)態(tài)添加、修改、刪除對象的屬性與方法詳解
本篇文章主要是對javascript動(dòng)態(tài)添加、修改、刪除對象的屬性與方法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01js/jQuery對象互轉(zhuǎn)(快速操作dom元素)
在操作js或者jquery方面相關(guān)的元素時(shí),可能會力不從心,因?yàn)樵谑褂梅椒〞r(shí)可能js的會更好一點(diǎn)又或者jquery的會更好一點(diǎn),真是無從選擇啊,接下來將介紹JS/jQuery對象互轉(zhuǎn)實(shí)現(xiàn),方便你快速操作dom元素,感興趣的朋友可以了解下啊2013-02-02全面兼容的javascript時(shí)間格式化函數(shù)(比較實(shí)用)
這篇文章主要介紹了全面兼容比較實(shí)用的javascript時(shí)間格式化函數(shù),需要的朋友可以參考下2014-05-05Javascript生成器(Generator)的介紹與使用
這篇文章主要給大家介紹了關(guān)于Javascript生成器(Generator)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01JS 添加網(wǎng)頁桌面快捷方式的代碼詳細(xì)整理
如何添加桌面快捷?很多網(wǎng)友都有這個(gè)疑問;JS 點(diǎn)擊添加網(wǎng)頁桌面快捷方式的代碼,需要的朋友可以參考下2012-12-12