JS实现在线ps功能详解


Posted in Javascript onJuly 31, 2019

前言

本系统是基于fabric.js实现的canvas版图片,文本编辑器,支持对图片的放大,缩小,旋转,镜面翻转,拖动,显示/隐藏图层,删除图层,替换图层等操作,对文本支持修改文本内容,颜色,字体,加粗,斜体,下划线,背景色等,同时支持图片已有的操作,拖动图层有辅助线功能,可对画布做放大缩小功能,多操作可撤销/回退功能,可直接导出图片,ps基本操作都已支持,欢迎star.

项目地址https://github.com/Jeff-Bee/onLinePS

功能预览图

JS实现在线ps功能详解

目录结构

JS实现在线ps功能详解

fabric.js相关

fabric 文档地址 由于中文资料很少,使用过程中也遇到了很多问题,找了好多资料总算是把功能都实现了,如果有在使用这个的小伙伴有什么问题可以找我沟通.首先需要熟悉canvas的基础,然后在去使用这个库会很容易上手.

结语

这个是项目中做的功能,由于过程比较坎坷,fabric.js库很强大,但是中文资料很少,导致解决问题的时候花费了很多功夫,所以摘出来供需要的人使用,由于有些东西需要后端配合,所以把一部分功能砍掉了,所有代码中有一些冗余代码,大家有需要那些功能的也可以宅后台配合把这些功能也做起来,前端的逻辑都已经实现了.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
中止javascript执行的方法
Feb 14 Javascript
Underscore源码分析
Dec 30 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 Javascript
ES6中定义类和对象的方法示例
Jul 31 #Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 #Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 #Javascript
vue实现中部导航栏布局功能
Jul 30 #Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 #Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 #Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 #Javascript
You might like
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
PHP Token(令牌)设计
2008/03/15 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
Python算法之栈(stack)的实现
2014/08/18 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
改进Django中的表单的简单方法
2015/07/17 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
Django学习之文件上传与下载
2019/10/06 Python
详解python statistics模块及函数用法
2019/10/27 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
艺术系应届生的自我评价
2013/10/19 职场文书
教师党员公开承诺书
2014/03/25 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
《我是什么》教学反思
2016/02/16 职场文书