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. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...
随机推荐
- MySQL 5.7 安装完成后,立即要调整的性能选项
原文:MySQL 5.7 Performance Tuning Immediately After Installation 本文是对上一篇<安装 MySQL 后,需要调整的 10 个性能配置项 ...
- jquery.datetimepicker.js 当鼠标离开时,不选中当前时间,以达到清空的目的
validateOnBlur:true 当鼠标离开时,不选中当前时间,以达到清空的目的 使用方法: // 时间设置 $('#BankProduct_sale_begin'). ...
- AlloyFinger.js 源码 学习笔记及原理说明
此手势库利用了手机端touchstart, touchmove, touchend, touchcancel原生事件模拟出了 rotate touchStart multipointStart ...
- 数据库-增删改查操作SQL实现
一.数据插入-Insert 1. 插入单条记录 insert into 表名(字段名,字段名,字段名) //当插入所有字段时,字段名可以省略 values('值1','值2','值3'); 2. 插入 ...
- 一个可以将 json 字符串 直接绑定到 view 上的Android库
android-data-binding 这是一个可以将 json 字符串 直接绑定到 view 上的库, 不用先将 json 转换为 model 类. 传送门(https://github.com/ ...
- 浅谈Java的集合框架
浅谈Java的集合框架 一. 初识集合 重所周知,Java有四大集合框架群,Set.List.Queue和Map.四种集合的关注点不同,Set 关注事物的唯一性,List 关注事物的索引列表,Q ...
- 自学 iOS - 三十天三十个 Swift 项目 第一天
最近公司项目不是很忙,偶然间看到编程语言排行榜,看到swift 已经排到前10了,然OC排名也越来越后了,感觉要上车了,虽然现在项目都是用OC写的,但是swift是一种趋势.在网上看到"自学 ...
- 《jQuery实战(第二版)》读书笔记
第一部分 jQuery核心 1.jQuery基础 第一章总结了jquery的大致功能,基本原理,使用方式. point: (1).引入:<script type="text/javas ...
- Android ORMLite 框架的入门用法
大家在Android项目中或多或少的都会使用数据库,为了提高我们的开发效率,当然少不了数据库ORM框架了,尤其是某些数据库操作特别频繁的app:本篇博客将详细介绍ORMLite的简易用法. 下面开始介 ...
- spring切面编程AOP 范例一
参照网上的spring AOP编程实例进行配置,但是碰到了几个坑.这篇文章重点讲解一下我踩过的两个坑: 1.使用@Service自动装配的时候,基础扫描包配置要正确: 2.xml中切面配置中的exec ...