功能介绍

本系统是基于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功能的更多相关文章

  1. Atitit.在线充值功能的设计

    Atitit.在线充值功能的设计 1. 流程1 2. Js sdk api   增加订单1 3. Java api 返回servlet处理1 3.1. 返回网址的本地host测试2 1. 流程 本地增 ...

  2. 05传智_jbpm与OA项目_部门模块中增加部门的jsp页面增加一个在线编辑器功能

    这篇文章讲的是在线编辑器功能,之前的部门模块中,增加部门的功能jsp页面起先是这么做的.

  3. 纯JS Web在线可拖拽的流程设计器

    F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...

  4. dedecms网站如何做在线订单功能

    做网站的时候经常会遇到做在线订单的这个功能,而且这个功能会在企业网站的建设中经常的遇到,今天51模板集就拿物流网的在线订单功能做一个详细的介绍. 第一步:自定义表单 打开后台:核心-->自定义表 ...

  5. 使用websocket实现在线聊天功能

    很早以前为了快速达到效果,使用轮询实现了在线聊天功能,后来无意接触了socket,关于socket我的理解是进程间通信,首先要有服务器跟客户端,服务的启动监听某ip端口定位该进程,客户端开启socke ...

  6. 让你的微信小程序具有在线支付功能

    前言 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过 ...

  7. js插件---在线类似excel生成图表插件解决方案

    js插件---在线类似excel生成图表插件解决方案 一.总结 一句话总结:google比百度好用多了,多用google google js editable table jquery 双向绑定 这种 ...

  8. 微信小程序在线支付功能使用总结

    最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出 ...

  9. 基于PHP实现一个简单的在线聊天功能(轮询ajax )

    基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...

随机推荐

  1. 高并发 Nginx+Lua OpenResty系列(2)——Nginx Lua API

    Nginx Lua API 和一般的Web Server类似,我们需要接收请求.处理并输出响应.而对于请求我们需要获取如请求参数.请求头.Body体等信息:而对于处理就是调用相应的Lua代码即可:输出 ...

  2. NET中级开发工程师职责要求

    NET中级开发工程师岗位职责1.熟练掌握 WebApi, ASP.NET MVC, Entity Framework,.NET CORE等技术,精通JQuery.Vue.Bootstrap等前端开发框 ...

  3. php7中异常

    php7中新增异常错误处理 在PHP7之前的版本,对于一些错误异常是没有办法捕获的. php7中新增throwable接口,可以用来捕获一些错误 Exception,Error这实现了Throwabl ...

  4. centos安装netcat TCP UDP测试工具 简称 nc,安全界叫它瑞士军刀

    centos安装netcat 今天安装swoole后,测试UDP服务需要用到netcat,然而百度了很多安装方法,并没有一个好用的.几经尝试,终于安装成功,现在就分享给大家,以供参考. 配置环境:ce ...

  5. 西安7月21日「拥抱开源,又见.NET:壹周年Party」线下交流活动

    本次活动既是.NET西安社区的第四次线下交流活动,也是.NET西安社区成立一周年庆活动..NET西安社区2018年7月20日成立,经过一年时间的发展,社区共举办过3次大型线下交流活动,社区人数由最初的 ...

  6. C++ 洛谷 P2921 [USACO08DEC]在农场万圣节Trick or Treat on the Farm 题解

    P2921 [USACO08DEC]在农场万圣节Trick or Treat on the Farm 分析: 这棵树上有且仅有一个环 两种情况: 1.讨论一个点在环上,如果在则答案与它指向点相同, 2 ...

  7. JavaScript面试核心考点(精华)

    引言 Javascript是前端面试的重点,本文重点梳理下 Javascript 中的常考基础知识点,然后就一些容易出现的题目进行解析.限于文章的篇幅,无法将知识点讲解的面面俱到,本文只罗列了一些重难 ...

  8. 设计模式-享元模式(Flyweight)

    享元模式是构造型模式之一,它通过与其他类似对象共享数据来减少内存占用 角色和职责: 1.抽象享元角色()-Person:   享元角色的公共接口 2.具体享元角色()-Teacher: 抽象享元角色的 ...

  9. MySQL错误:The user specified as a definer (XXX@XXX) does not exist (1449错误)最简解决方案

    背景:从同事处通过备份和还原备份方法导入mysql数据库,导入成功后启动项目,发现出现以下错误:The user specified as a definer (XXX@XXX) does not e ...

  10. c++学习书籍推荐《C++ Primer Plus中文版(第6版)》下载

    百度云及其他网盘下载地址:点我 编辑推荐 一本经久不衰的C++畅销经典教程:一本支持C++11新标准的程序设计图书.  它被誉为“开发人员学习C++的教程,没有之一”! Amazon网站“Langua ...