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

目录结构

fabric.js相关
fabric 文档地址 http://fabricjs.com/ 由于中文资料很少,使用过程中也遇到了很多问题,找了好多资料总算是把功能都实现了,如果有在使用这个的小伙伴有什么问题可以找我沟通.首先需要熟悉canvas的基础,然后在去使用这个库会很容易上手.
写在最后
这个是项目中做的功能,由于过程比较坎坷,fabric.js库很强大,但是中文资料很少,导致解决问题的时候花费了很多功夫,所以摘出来供需要的人使用,由于有些东西需要后端配合,所以把一部分功能砍掉了,所有代码中有一些冗余代码,大家有需要那些功能的也可以宅后台配合把这些功能也做起来,前端的逻辑都已经实现了.
原文地址 https://juejin.im/post/5d400732e51d45620c1c5337
JS实现在线ps功能的更多相关文章
- Atitit.在线充值功能的设计
Atitit.在线充值功能的设计 1. 流程1 2. Js sdk api 增加订单1 3. Java api 返回servlet处理1 3.1. 返回网址的本地host测试2 1. 流程 本地增 ...
- 05传智_jbpm与OA项目_部门模块中增加部门的jsp页面增加一个在线编辑器功能
这篇文章讲的是在线编辑器功能,之前的部门模块中,增加部门的功能jsp页面起先是这么做的.
- 纯JS Web在线可拖拽的流程设计器
F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...
- dedecms网站如何做在线订单功能
做网站的时候经常会遇到做在线订单的这个功能,而且这个功能会在企业网站的建设中经常的遇到,今天51模板集就拿物流网的在线订单功能做一个详细的介绍. 第一步:自定义表单 打开后台:核心-->自定义表 ...
- 使用websocket实现在线聊天功能
很早以前为了快速达到效果,使用轮询实现了在线聊天功能,后来无意接触了socket,关于socket我的理解是进程间通信,首先要有服务器跟客户端,服务的启动监听某ip端口定位该进程,客户端开启socke ...
- 让你的微信小程序具有在线支付功能
前言 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过 ...
- js插件---在线类似excel生成图表插件解决方案
js插件---在线类似excel生成图表插件解决方案 一.总结 一句话总结:google比百度好用多了,多用google google js editable table jquery 双向绑定 这种 ...
- 微信小程序在线支付功能使用总结
最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出 ...
- 基于PHP实现一个简单的在线聊天功能(轮询ajax )
基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...
随机推荐
- 16 input默认样式清除
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- 高并发 Nginx+Lua OpenResty系列(10)——商品详情页
本章以京东商品详情页为例,京东商品详情页虽然仅是单个页面,但是其数据聚合源是非常多的,除了一些实时性要求比较高的如价格.库存.服务支持等通过AJAX异步加载加载之外,其他的数据都是在后端做数据聚合然后 ...
- Android 即时通讯开发小结(二)
<Android 即时通讯开发小结>基于IM Andriod 开发的各种常见问题,结合网易云信即时通讯技术的实践,对IM 开发做一个全面的总结. 相关推荐阅读:. Android 即时通讯 ...
- RocketMQ(6)---发送普通消息(三种方式)
发送普通消息(三种方式) RocketMQ 发送普通消息有三种实现方式:可靠同步发送.可靠异步发送.单向(Oneway)发送. 注意 :顺序消息只支持可靠同步发送. GitHub地址: https:/ ...
- laravel-admin(自定义表单视图)
前言: 在上一遍文章(https://www.cnblogs.com/shiwenhu/p/10271013.html)中写到可以使用自定义form组建来创建表单,几乎能满足我们大部分要求,而且不用我 ...
- Java基础篇01
01. 面向对象 --> 什么是面向对象 面向对象 面向对象程序设计,简称OOP(Object Oriented Programming). 对象: 指人们要研究的任何事物,不管是物理上具体的事 ...
- 哈工大计算机网络Week1-网络应用
目录 哈工大计算机网络Week1-网络应用 2.1网络应用的体系结构 特点 应采取什么结构 C/S结构 客户机/服务器 P2P CS vs P2P 混合结构 思考题目 2.2网络应用的基本原理 网络应 ...
- Mysql CPU使用率长期100%的解决思路备忘
最近一台服务器的CPU使用率长期保持在100%的状态,查看进程发现是Mysql服务导致的.于是搜索各方资料,终于成功解决问题.备忘以及分享一下,希望可以帮助各位新手朋友. (服务器运行环境是Windo ...
- linux应用程序设计--GDB调试
GDB简介:GDB是GNU发布的一款功能强大的程序调试工具,GDB主要完成下面三个方面功能: 一.GDB的使用操作 1.启动被调试程序. 2.让被调试的程序在指定的位置停住. 3.当程序被停住时,可以 ...
- [原创]SSH Tunnel for UDP
SSH Tunnel for UDP UDP port forwarding is a bit more complicated. We will need to convert the packet ...