幾個用于前端canvas圖片查看編輯的js插件

1 tui.image-editor
2 Konva
3 AlloyImage
4 zwibbler
5 canvasPS
6 Photo Editor

1 tui.image-editor

https://nhn.github.io/tui.image-editor/latest/
tui.image-editor： 使用HTML5 Canvas實現(xiàn)的全功能照片圖像編輯器，配有很棒的過濾器。示例：

2 Konva

https://gitee.com/sdsxfjh/konva
https://github.com/konvajs/konva
Konva是一個HTML5 Canvas JavaScript框架，它支持高性能動畫、過渡、節(jié)點嵌套、分層、過濾、緩存、桌面和移動應(yīng)用程序的事件處理等等。
您可以在畫布或舞臺上繪制東西，向它們添加事件監(jiān)聽器，移動它們，縮放它們，并獨立于其他形狀旋轉(zhuǎn)它們，以支持高性能動畫，即使您的應(yīng)用程序使用數(shù)千個形狀。

3 AlloyImage

http://alloyteam.github.io/AlloyImage/docs.html#mutiThread
AlloyImage（AI)是一個基于html5技術(shù)的JS圖像處理庫，集成了一些方便快捷的圖像處理API，您可以將它引用到您的網(wǎng)頁中，結(jié)合css3等技術(shù)，做出一些之前無法做到的優(yōu)美效果，或者，提供一個用JS編寫的在線圖像處理工具等。
設(shè)計理念
簡單代碼做復(fù)雜事情
1.接口調(diào)用簡單
2.提供進(jìn)一步封裝的組合效果方便調(diào)用
3.基于AI編寫的alloyPhoto，完整展示AI的能力與接口，以及調(diào)用方法Demo展示，更易于學(xué)習(xí)
特點
1.圖層功能，提供圖層的添加，刪除，交換圖層順序等功能，且包含與PS相對應(yīng)的17種圖層混合模式
2.圖像的基本調(diào)節(jié)功能，包括亮度、對比度，色相、飽和度、明度調(diào)節(jié)
3.多種濾鏡功能，去色、反相、高斯模糊、銳化、浮雕效果、查找邊緣、馬賽克、腐蝕等
4.處理后文件的保存，處理完成之后，可以將文件輸出為base64形式間接使用和保存
5.高級組合效果，如素描，lomo，復(fù)古，素描等復(fù)合效果 如一個素描效果的實現(xiàn)。示例：

4 zwibbler

https://zwibbler.com/docs/#introduction
zwibbler（特別提示這玩意兒不是開源的，不過源碼可以在瀏覽器開發(fā)者工具中找到） 是一個外國人開發(fā)的一款在線畫板工具。
1、官網(wǎng) zwibbler.com (里面是對工具的簡介，一些 demo，一些解決方案，開發(fā)者郵箱地址等)
2、Demo zwibbler.com/demo (一個完整的demo)
3、Api zwibbler.com/docs (非常詳細(xì)的英文文檔)
zwibbler 是用原生的js結(jié)合html5開發(fā)的，支持電腦和手機端，使用非常簡單，而且開發(fā)者對zwibbler的更新非常頻繁。

5 canvasPS

https://gitee.com/jhpw/canvasPS
基于canvas 圖片編輯器，裁剪，摳圖，簡單調(diào)色常用功能等等 功能列表：
1 -多邊形選區(qū)
2 -拾色器
3 -畫筆快速刪除
4 -裁剪工具
5 -鉛筆
6 -刷子
7 -畫布移動縮放
8 -橡皮擦
9 -RGBA顏色調(diào)節(jié)器
10 -填充工具
11 -多圖片格式保存
12 -支持文件拖放
13 -顏色選擇工具

6 Photo Editor

http://alloyteam.github.io/AlloyImage/docs.html#mutiThread
Photo Editor 一個簡單的照片編輯器，具有移動、剪切、縮放、旋轉(zhuǎn)、翻轉(zhuǎn)等功能的實現(xiàn)

總結(jié)

以上是生活随笔為你收集整理的几个用于前端canvas图片查看编辑的js插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。