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. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...
随机推荐
- Linux实战教学笔记18:linux三剑客之awk精讲
Linux三剑客之awk精讲(基础与进阶) 标签(空格分隔): Linux实战教学笔记-陈思齐 快捷跳转目录: * 第1章:awk基础入门 * 1.1:awk简介 * 1.2:学完awk你可以掌握: ...
- 规范 : jobbox 中英文
中英文是为了candidate 可以看到不同的post job 语言. e.g. 如果是contact person 的“designation” ,这个不会显示在post job 里,目的只是给em ...
- 每天一个Linux命令(22)--find命令详解
find 一些常用参数的一些常用实例和一些具体用法和注意事项. 1.使用 name 选项: 文件名选项是 find 命令最常用的选项,要么单独使用该选项,要么和其他选项一起使用. 可以使用某种文件名模 ...
- QQ微信刷屏助手 FlashScreenAssist 1.2发布
主要功能 文字刷屏 图片刷屏 简易教程 文字刷屏 打开软件之后输入要刷屏的文字,点击[开始],然后点一下微信或者QQ的输入框,就会开始刷屏了,注意[时间间隔]不要调太小,越小越快. 要注意的是.必须在 ...
- [PKU2389]Bull Math (大数运算)
Description Bulls are so much better at math than the cows. They can multiply huge integers together ...
- 如何理解jQuery中的ajaxSubmit方法
版权声明:本文为博主原创文章,转载请标注:www.cnblogs.com/gdsblog 刚刚学习中,使用到了ajaxSubmit,犹豫以前没有接触㢧这个,所以刚开始是一脸懵逼状态,最后通过查找资料的 ...
- JDBC整合c3p0数据库连接池 解决Too many connections错误
前段时间,接手一个项目使用的是原始的jdbc作为数据库的访问,发布到服务器上在运行了一段时间之后总是会出现无法访问的情况,登录到服务器,查看tomcat日志发现总是报如下的错误. Caused by: ...
- 队列工厂之RedisMQ
本次和大家分享的是RedisMQ队列的用法,前两篇文章队列工厂之(MSMQ)和队列工厂之RabbitMQ分别简单介绍对应队列环境的搭建和常用方法的使用,加上本篇分享的RedisMQ那么就完成了咋们队列 ...
- JavaScript重新介绍
本文转载自 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript 引言 为什么 ...
- C++STL的简单使用
#include <iostream>#include <vector>#include<deque>#include <list>#include&l ...