純?JS?實現(xiàn)的輕量化圖片編輯器實例詳解
更新時間：2022年10月13日 16:21:38 作者：卷土的土
這篇文章主要為大家介紹了純JS實現(xiàn)的輕量化圖片編輯器實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
介紹
因為一些特點的工作場景, 寫文章的需要每次處理一些圖片, 在上面加說明文字, 或者加一些圖形
剛開始使用 PPT 來處理, 一張張復制過去, 做一些邊框陰影處理, 再加一些圖形, 然后再導出來復制到需要的地方, 而且導出后的圖片之后可能不會再使用了還要清理.
圖片多了重復操作的步驟就多了, 比較的繁瑣, 想想是否有個工具去解決這個問題, 搜了一下, 要么就是太重的專業(yè)的軟件, 要么就是不太符合批量的要求的軟件.
簡單總結一下我的場景就是: 來了一堆圖片, 都需要做一些 "輕處理", 有些需要加文字, 或者加個箭頭等.
- 關鍵就是 "輕", 不需要去等待幾十秒去打開, 進行繁瑣的處理
- 不需要下載就能使用, 用完關閉即可
- 簡單, 易用, 可視化, 不需要一些復雜的操作, 鼠標點擊就能完成
一款純 JS 實現(xiàn)的輕量化圖片編輯器
如果上面的場景是你所遇見的, 也想輕量快速的處理一些圖片, 這個項目就是為你而準備的
- 支持多圖操作
- 支持圖片拖拽添加
- 支持所有屬性的動態(tài)配置
- 支持一鍵復制修改后的結果
- 支持畫筆、文字、矩形、圓形、箭頭、線條、圖像的添加
這個項目沒有依賴于任何的第三方框架, 以純 JS 實現(xiàn)
最后抽象出了一個框架 (GenOptimizer), 以一種十分簡潔易用的方式寫出了整個項目
下面是項目的 git 地址, 筆者初學前端, 還請多多指教
下面是介紹框架的一些技術總結, 特別的輕量化, 后序會對揭秘一下具體的實現(xiàn)方案
Optimizer 框架特點
- 事件、畫圖、交互 全局管理
- 支持注冊自定義組件, 可自定義配置管理
- 基于面向對象, 高度抽象代碼
- 簡單易用, 能快速開發(fā)出各種效果
Optimizer 框架使用
啟動
首先需要場景管理器, 通過繼承 GenScene 來創(chuàng)建場景, 場景里對于頁面中的多個控制器進行管理
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",
// 事件綁定的元素區(qū)域
className: sc.pageClass.buttonArea,
// 在 所有 configToEvents 響應之 前 觸發(fā)
after: function(bindVar, target) {
// bindVar: 綁定的變量
// target: 事件觸發(fā)的目標
},
// 在 所有 configToEvents 響應之 后 觸發(fā)
before: function(bindVar, target) {
// bindVar: 綁定的變量
// target: 事件觸發(fā)的目標
},
// 事件響應
configToEvents: {
// 自定義綁定的變量: 事件觸發(fā)后的響應
"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)
總結
本文介紹了筆者實現(xiàn)的一款可拖拽、低代碼、輕量化的圖片編輯器, 解決了繁瑣處理圖片的問題
有時候一些小的操作, 都可能引發(fā)我們的思考, 如何才能更方便的處理這一類的問題?
這個例子就是我的思考, 希望能給于你一點靈感或啟發(fā)，更多關于純JS輕量化圖片編輯器的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了Node.js API詳解之 zlib模塊用法,結合實例形式分析了Node.js API中zlib模塊基本功能、函數(shù)使用方法與操作注意事項,需要的朋友可以參考下2020-05-05
js 動態(tài)修改css文件，循環(huán)用的underscore，在使用cssRule只能使用cssRule.style.padding=0px，詳細示例如下2014-08-08
本文通過實例代碼給大家介紹了JS構造一個html文本內容成文件流形式發(fā)送到后臺的相關資料,需要的朋友可以參考下2018-07-07
所有整數(shù)字變量默認都是有符號整數(shù)，JavaScript 進行位操作時，是采用32位有符號整型，這意味著其轉換的結果也是32位有符號整型2013-12-12
這篇文章主要介紹了JavaScript 接口原理與用法,結合實例形式詳細分析了JavaScript 接口原理、優(yōu)缺點、用法及操作注意事項,需要的朋友可以參考下2020-05-05
純JavaScript創(chuàng)建一個簡單的待辦事項列表
這篇文章主要給大家介紹了關于純JavaScript創(chuàng)建一個簡單的待辦事項列表的相關資料,清單通常用于記錄我們在某一天需要完成的所有事項,將最關鍵的任務放在最上方,將最不重要的事項放在最下方,需要的朋友可以參考下2024-01-01
javascript for循環(huán)從入門到偏門(效率優(yōu)化+奇特用法)
for循環(huán)是非?；A的javascript知識，但由于JS太靈活了，所以可能出現(xiàn)一些讓初學者崩潰的寫法。我決定由淺入深的解釋一下for循環(huán)，算是給比我還新手的新手解惑吧，少走彎路2012-08-08
這篇文章主要給大家介紹了關于如何利用JS檢查元素是否在視口內的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
在現(xiàn)代 Web 開發(fā)中,JavaScript 提供了多種方法來與瀏覽器窗口進行交互,包括最大化和最小化瀏覽器窗口,雖然瀏覽器通常會限制對窗口尺寸的直接控制,但我們依然可以實現(xiàn)一些常見的行為,本文將探討如何使用 JavaScript 實現(xiàn)窗口的最大化和最小化效果2024-12-12
這篇文章主要為大家詳細介紹了bootstrapValidator自定驗證方法寫法，研究bootstrapValidator驗證,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12