几个用于前端canvas图片查看编辑的js插件

几个用于前端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实现的全功能照片图像编辑器,配有很棒的过滤器。示例:
在这里插入图片描述

2 Konva

https://gitee.com/sdsxfjh/konva
https://github.com/konvajs/konva
Konva是一个HTML5 Canvas JavaScript框架,它支持高性能动画、过渡、节点嵌套、分层、过滤、缓存、桌面和移动应用程序的事件处理等等。
您可以在画布或舞台上绘制东西,向它们添加事件监听器,移动它们,缩放它们,并独立于其他形状旋转它们,以支持高性能动画,即使您的应用程序使用数千个形状。

3 AlloyImage

http://alloyteam.github.io/AlloyImage/docs.html#mutiThread
AlloyImage(AI)是一个基于html5技术的JS图像处理库,集成了一些方便快捷的图像处理API,您可以将它引用到您的网页中,结合css3等技术,做出一些之前无法做到的优美效果,或者,提供一个用JS编写的在线图像处理工具等。
设计理念
简单代码做复杂事情
1.接口调用简单
2.提供进一步封装的组合效果方便调用
3.基于AI编写的alloyPhoto,完整展示AI的能力与接口,以及调用方法Demo展示,更易于学习
特点
1.图层功能,提供图层的添加,删除,交换图层顺序等功能,且包含与PS相对应的17种图层混合模式
2.图像的基本调节功能,包括亮度、对比度,色相、饱和度、明度调节
3.多种滤镜功能,去色、反相、高斯模糊、锐化、浮雕效果、查找边缘、马赛克、腐蚀等
4.处理后文件的保存,处理完成之后,可以将文件输出为base64形式间接使用和保存
5.高级组合效果,如素描,lomo,复古,素描等复合效果 如一个素描效果的实现。示例:
在这里插入图片描述

4 zwibbler

https://zwibbler.com/docs/#introduction
zwibbler(特别提示这玩意儿不是开源的,不过源码可以在浏览器开发者工具中找到) 是一个外国人开发的一款在线画板工具。
1、官网 zwibbler.com (里面是对工具的简介,一些 demo,一些解决方案,开发者邮箱地址等)
2、Demo zwibbler.com/demo (一个完整的demo)
3、Api zwibbler.com/docs (非常详细的英文文档)
zwibbler 是用原生的js结合html5开发的,支持电脑和手机端,使用非常简单,而且开发者对zwibbler的更新非常频繁。
在这里插入图片描述

5 canvasPS

https://gitee.com/jhpw/canvasPS
基于canvas 图片编辑器,裁剪,抠图,简单调色常用功能等等 功能列表:
1 -多边形选区
2 -拾色器
3 -画笔快速删除
4 -裁剪工具
5 -铅笔
6 -刷子
7 -画布移动缩放
8 -橡皮擦
9 -RGBA颜色调节器
10 -填充工具
11 -多图片格式保存
12 -支持文件拖放
13 -颜色选择工具
在这里插入图片描述

6 Photo Editor

http://alloyteam.github.io/AlloyImage/docs.html#mutiThread
Photo Editor 一个简单的照片编辑器,具有移动、剪切、缩放、旋转、翻转等功能的实现
在这里插入图片描述

  • 4
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值