JS實現(xiàn)在線ps功能詳解
前言
本系統(tǒng)是基于fabric.js實現(xiàn)的canvas版圖片,文本編輯器,支持對圖片的放大,縮小,旋轉(zhuǎn),鏡面翻轉(zhuǎn),拖動,顯示/隱藏圖層,刪除圖層,替換圖層等操作,對文本支持修改文本內(nèi)容,顏色,字體,加粗,斜體,下劃線,背景色等,同時支持圖片已有的操作,拖動圖層有輔助線功能,可對畫布做放大縮小功能,多操作可撤銷/回退功能,可直接導(dǎo)出圖片,ps基本操作都已支持,歡迎star.
項目地址https://github.com/Jeff-Bee/onLinePS
功能預(yù)覽圖
目錄結(jié)構(gòu)
fabric.js相關(guān)
fabric 文檔地址 由于中文資料很少,使用過程中也遇到了很多問題,找了好多資料總算是把功能都實現(xiàn)了,如果有在使用這個的小伙伴有什么問題可以找我溝通.首先需要熟悉canvas的基礎(chǔ),然后在去使用這個庫會很容易上手.
結(jié)語
這個是項目中做的功能,由于過程比較坎坷,fabric.js庫很強(qiáng)大,但是中文資料很少,導(dǎo)致解決問題的時候花費了很多功夫,所以摘出來供需要的人使用,由于有些東西需要后端配合,所以把一部分功能砍掉了,所有代碼中有一些冗余代碼,大家有需要那些功能的也可以宅后臺配合把這些功能也做起來,前端的邏輯都已經(jīng)實現(xiàn)了.
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js驗證模型自我實現(xiàn)的具體方法，需要的朋友可以參考一下2013-06-06
iis6+javascript Add an Extension File
iis6+javascript Add an Extension File...2007-06-06
這篇文章主要介紹了JS更改select內(nèi)option屬性的方法,涉及JavaScript動態(tài)操作頁面select元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
IE9+已經(jīng)不對document.createElement向下兼容的解決方法
這篇文章主要介紹了IE9+已經(jīng)不對document.createElement向下兼容的解決方法,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了JS中this上下文對象使用方式,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了JavaScript防抖案例講解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
用JavaScript對JSON進(jìn)行模式匹配(Part 1-設(shè)計)
在《從 if else 到 switch case 再到抽象》這篇文章里面說到，解決 if else 和 switch case 分支過多的一個方法，就是做一個專用的 dispatcher ，讓它來負(fù)責(zé)進(jìn)行篩選與轉(zhuǎn)發(fā)。2010-07-07
下面小編就為大家?guī)硪黄狫S實現(xiàn)回到頁面頂部動畫效果的簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
解決layui使用layui-icon出現(xiàn)默認(rèn)圖標(biāo)的問題
今天小編就為大家分享一篇解決layui使用layui-icon出現(xiàn)默認(rèn)圖標(biāo)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JS寄快遞地址智能解析,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07