HTML5技术实现Web图形图像处理——WebPhotoshop精简版
WebPhotoshop精简版是利用HTML5技术在Web上实现对图形图像的处理,构建易维护、易共享、易于拓展、实时性的Web图形图像处理平台。 精简版功能包括:图形绘制、图像处理、图像操作。完整版包括多人协作操作图像、实时交流、图片搜索,同时实现实时的多人协作处理图形图像技术。(完整版后续上传)
一、功能说明:
1、图形绘制
实现铅笔、画笔(书法画笔、喷枪、蜡笔、记号笔、水彩画笔)的绘制效果。实现直线、曲线、椭圆(圆)、矩形(圆角矩形)、三角形(直角三角形、等边三角形、任意三角形)、多边形的绘制。绘制过程中,可以选择颜色,选择颜色有两种方式:颜色选择、颜色拾取。可以进行颜色填充,即对选定区域,用选择的颜色进行填充。
2、图像处理
能够实现的效果有:黑白、模糊、亮度/透明度、反色、雾化、锐化、浮雕、雕刻、柔化、油画、积木、怀旧、蒙版,蒙版包括:红色蒙版、蓝色蒙版、绿色蒙版。
3、图像操作
能够对图像进行的操作有:图像选择,包括区域选择、对象选择。图像移动,即对选择区域或对象的移动。图像裁剪,包括矩形裁剪(保留裁剪区内、保留裁剪区外)。图像的旋转,即将画布或者选择的区域对象向右90度、向左90度、180度、垂直旋转、水平旋转、任意度数。橡皮擦效果,能够擦除绘制的图像。图像的缩小放大,包括图像的局部缩放和图像的整体缩放。插入文本,即在图像上插入文本,能够改变文本颜色、字体、大小,实现加粗、倾斜、下划线、删除线效果。将图像保存为图片。将图像存到服务器。将图像另存为其他格式。图像保存为下次可以再进行编辑的自定义格式。能够实现多图层,即添加图层、删除图层、图层层次改变。
二、操作流程:
1) 进入系统后,显示主工作区,包括菜单栏、选项栏、工具箱、主画板、历史记录、图层管理。
2) 默认为铅笔,可以在主工作区画图。可以选择颜色等属性。
3) 打开图片,进行图片编辑。
主界面截图:

github位置:https://github.com/yangtzeyufei/WebPhotoshop-Simple
HTML5技术实现Web图形图像处理——WebPhotoshop精简版的更多相关文章
- 《黑客攻防技术宝典Web实战篇@第2版》读书笔记1:了解Web应用程序
读书笔记第一部分对应原书的第一章,主要介绍了Web应用程序的发展,功能,安全状况. Web应用程序的发展历程 早期的万维网仅由Web站点构成,只是包含静态文档的信息库,随后人们发明了Web浏览器用来检 ...
- 用HTML5 Canvas为Web图形创建特效
HTML5 Canvas 将使用像素在屏幕上绘制图形图像. 本节演示了五种用于操作像素以创建摄影特效的 Canvas 技术. 您可使用这些技术来生成独具特色的图像,为您的网站.博客.视频游戏画面.广告 ...
- HTML5图形图像处理技术研究
摘要:图形图像处理平台大部分是传统的C/S架构的桌面应用程序,维护困难,共享性差,而B/S架构的Web程序具有易维护.易共享的优点.本文研究了基于HTML5的Web图形图像处理技术,用HTML5实现了 ...
- Web 开发中应用 HTML5 技术的10个实例教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
- GDI+图形图像处理技术中Pen和Brush的简单使用和简单图形的绘制(C#)
1.Graphics Graphics对象是GDI+绘图表面,因此在Windows窗体应用程序中要使用GDI+创建绘图,必须要先创建Graphics.在给窗体注册一个Paint事件后,Graphics ...
- HTML5中的Web Worker技术
为了让后台程序更好的执行,在HTML5中设计了Web Worker技术.Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的,一旦前面的脚本花费 ...
- php图形图像处理技术
图形图像处理技术,gd库的强大支持,PHP的图像可以是PHP的强项,PHP图形化类库,jpgraph是一款非常好用的强大的图形处理工具. 在PHP中加载GD库 gd官方网址下载: http://www ...
- 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇
<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...
- 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇
HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...
随机推荐
- zhenai
1.2=http://files.cnblogs.com/files/bqh10086/zhenai_1.2_pack.zip
- 卷积神经网络(CNN)模型结构
在前面我们讲述了DNN的模型与前向反向传播算法.而在DNN大类中,卷积神经网络(Convolutional Neural Networks,以下简称CNN)是最为成功的DNN特例之一.CNN广泛的应用 ...
- JavaScript基础——变量、语句、注释
一.变量的命名规则 1.变量名由数字.字母.下划线组成 2.变量名的首字母不能是数字,只能是字母或者下划线 3.不能使用关键字和保留字作为变量名 4.变量严格区分大小写,例如在JavaScript中o ...
- JS传值和传引用
之前看<javascript高级程序设计>时就遇到过一个问题,就是函数传参的问题,书上说是按值传递,而非按引用传递.很多人都会认为js里面有两种传值方式,一种是复制,另一种是数组.对象等按 ...
- Kubernetes运维生态-cAdvisor分析
Kubernetes的生态中,cAdvisor是作为容器监控数据采集的Agent,其部署在每个节点上,内部代码结构大致如下:代码结构很良好,collector和storage部分基本可做到增量扩展开发 ...
- 在.NET Core 上运行的 WordPress
在.NET Core 上运行的 WordPress,无需安装PHP既可跨平台运行WordPress. 在Peachpie中实现PHP所需的功能数月后,现在终于可以运行一个真实的应用程序:WordPre ...
- vuejs数据双向绑定原理(get & set)
前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...
- BigInteger和BigDecimal的练习
前言: BigInteger用于处理大数据的计算,它继承自java.math.BigInteger.用法相对来说比较简单,掌握几个基本运算即可. 初始化: BigInteger sum=new Big ...
- category类别中添加属性
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #c91b13 } p.p2 { margin: 0.0px 0. ...
- spring知识点全部复习
一. 专业术语 侵入式设计 引入框架,对现有的类的结构有影响,即需要实现或继承某些特定类.如:Struts框架 非侵入式设计 引入框架,对现有的类结构没有影响.如:Hibernate.Spring 控 ...