HTML5之图像处理
--- 内嵌图像
- drawImage可以绘制图像
context.drawImage(image,dx,dy)
context.drawImage(image,dx,dy,dw,dh)
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
- 基本绘制 图片根据尺寸自动截取左上角
image.onload = function(){
context.drawImage(image,0,0)
}
- 自动调整 调整图片加载尺寸
image.onload = function(){
context.drawImage(image,0,0,600,400);
}
- 选择一部分区域贴到目标区域
image.onload = function(){
context.drawImage(image,0,0);
context.drawImage(image,620,300,300,375,390,10,200,250);
}
---- 绘制像素
- getImageData() // 获取一个Canvas的像素数组
- putImageData() // 将ImageData写入到Canvas中
- createImageData() // 创建一个ImageData
- ImageData对象
context.filStyle = 'navy';
context.fillRect(0,0,1,1);
context.fillStyle = 'teal';
context.fillRect(1,0,1,1);
context.fillStyle = 'lime';
context.fillRect(0,1,1,1);
context.fillStyle = 'yellow';
context.fillRect(1,1,1,1); ImageData = context.getImageData(0,0,canvas.width,canvas.heigt);
- ImageData.width // 图像宽度
- ImageData.heigth // 图像高度
- ImageData.data // 图像信息
for(var i=0; i<ImageData.data.length; i+= 4)
{
var r = ImageData.data[i];
var g = ImageData.data[i+1];
var b = ImageData.data[i+2];
var a = ImageData.data[i+3];
alert(r+" "+g+" "+b+" "+a);
}
---- 修改像素
- 使用putImageData回写
for (var i=0; i<ImageData.data.length; i+=4)
{
ImageData.data[i] = parseInt(Math.random()*255);
ImageData.data[i+1] = parseInt(Math.random()*255);
ImageData.data[i+2] = parseInt(Math.random()*255);
} context.putImageData(ImageData,dx,dy,[dirtyX,dirtY,dirtyWidth,dirtyHeight])
---- 创建ImageData
var imagedata = context.createImageData(2,2); for(var i=0; i<ImageData.data.length; i+=4){
imagedata.data[i] = parseInt(Math.random()*255);
imagedata.data[i+1] = parseInt(Math.random()*255);
imagedata.data[i+2] = parseInt(Math.random()*255);
} context.putImageData(imagedata,0,0);
---- 操作像素
var image = new Image();
image.src = 'images/yosemite.jpg';
image.onload = function() {
context.drawImage(image,0,0,360,240);
var modified = context.createImag eData(360,240);
var imagedata = context.getImageData(0,0,360,240);
for (var i=0; i<imagedata.data.length; i+=4) {
var rgba = grayLuminosity(
imagedata.data[i+0],
imagedata.data[i+1],
imagedata.data[i+2],
imagedata.data[i+3]
);
modified.data[i+0] = rgba[0];
modified.data[i+1] = rgba[1];
modified.data[i+2] = rgba[2];
modified.data[i+3] = rgba[3];
}
context.putImageDa ta(modified,0,0);
};
----- 滤镜效果代码
var grayLightness = function(r,g,b,a) {
var val = parseInt(
(Math.max(r,g,b)+Math.min(r,g,b))*0.5
);
return [val,val,val,a];
}; var grayLuminosity = function(r,g,b,a) {
var val = parseInt(
(r*0.21)+(g*0.71)+(b*0.07)
);
return [val,val,val,a];
}; var grayAverage = function(r,g,b,a) {
var val = parseInt((r+g+b)/3.0
);
return [val,val,val,a];
}; var sepiaTone = function(r,g,b,a) {
var rS = (r*0.393)+(g*0.769)+(b*0.189);
var gS = (r*0.349)+(g*0.686)+(b*0.168);
var bS = (r*0.272)+(g*0.534)+(b*0.131);
return [
(rS>255) ? 255 : parseInt(rS),
(gS>255) ? 255 : parseInt(gS),
(bS>255) ? 255 : parseInt(bS),a];
}; var invertColor = function(r,g,b,a) {
return [
(255‐r),
(255‐g),
(255‐b),a];
}; var swapChannels = function(r,g,b,a,order) {
var rgba = [r,g,b,a];
return [
rgba[order[0]],
rgba[order[1]],
rgba[order[2]],
rgba[order[3]]];
}; var monoColor = function(r,g,b,a,color) {
return [
color[0],
color[1],
color[2],
255 ‐(parseInt((r+g+b)/3.0))];
};
----- 合成影像
- 当图形重叠时的绘制方法
context.globalCompositeOperation = 'source-over';
属性:
source-over/source-in/source-out/source-atop
destination-over/destination-in/destination-out/destination-atop
lighter/copy/xor
----- Patterns 复用模式
- createPattern()类似于drawImage()
context.createPattern(image,repetition)
- 复用模式
var cvs = document.createElement("CANVAS");
cvs.width = 20;
cvs.height = 20;
var ctx = cvs.getContext('2d');
ctx.fillStyle = 'lime';
ctx.fillRect(0,0,10,10);
ctx.fillRect(10,10,10,10);
ctx.fillStyle = 'green';
ctx.fillRect(10,0,10,10);
ctx.fillRect(0,10,10,10);
context.fillStyle = context.createPattern(cvs,'repeat');
context.fillRect(0,0,220,220);
HTML5之图像处理的更多相关文章
- HTML5图形图像处理技术研究
摘要:图形图像处理平台大部分是传统的C/S架构的桌面应用程序,维护困难,共享性差,而B/S架构的Web程序具有易维护.易共享的优点.本文研究了基于HTML5的Web图形图像处理技术,用HTML5实现了 ...
- html5 canvas 图像处理
1.图像放大缩小 <script> var cvs = document.getElementById("canvas"); cvs.width = cvs.heigh ...
- HTML5技术实现Web图形图像处理——WebPhotoshop精简版
WebPhotoshop精简版是利用HTML5技术在Web上实现对图形图像的处理,构建易维护.易共享.易于拓展.实时性的Web图形图像处理平台. 精简版功能包括:图形绘制.图像处理.图像操作.完整版包 ...
- 区域医疗移动医疗影像解决方案--基于HTML5的PACS--HTML5图像处理【转】
基于HTML5的PACS--图像伪彩 摘要: 要查看此系统更多的图像处理功能请参考:区域医疗移动医疗影像解决方案--基于HTML5的PACS--HTML5图像处理套用句广告语:哪里不会点哪里,so e ...
- HTML5标签canvas图像处理
摘要: canvas可以读取图片后,使用drawImage方法在画布内进行重绘.本文介绍canvas的图像处理 drawImage drawImage() 方法在画布上绘制图像.画布或视频.drawI ...
- 基于HTML5的PACS--HTML5图像处理
在此之前,此系统是结合DICOM的WADO标准,在浏览器里通过javascript操作返回的JPG图片.这种服务器端解析,客户端展现的方式,对实现图像的移动.缩放.旋转.测量等图像操作能够实现实时的交 ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- HTML5 学习总结(四)——canvas绘图、WebGL、SVG
一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...
- HTML5 学习笔记(四)——canvas绘图、WebGL、SVG
一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...
随机推荐
- linux下hexdump和od命令:显示文件十六进制格式
Linux指令: od 示例用法: od -c hello Linux指令: od od命令用户通常使用od命令查看特殊格式的文件内容.通过指定该命令的不同选项可以以十进制.八进制.十六进 ...
- iOS调用系统通讯录获取姓名电话号码(转)
原文地址:http://blog.csdn.net/idoshi201109/article/details/46007125 OS调用系统通讯录获取姓名电话号码 (iOS 8.0 Xcode6.3可 ...
- 【转】如何从零开始学会 Ruby on Rails?
文章转自:http://huacnlee.com/blog/how-to-start-learning-ruby-on-rails/ 这个话题曾经给身边的很多朋友说过同样的话题,这里整理以下. 如果你 ...
- ibdata文件增大的原因
http://blog.itpub.net/22664653/viewspace-1994016/
- Debug 之 The state information is invalid for this page and might be corrupted
1.问题描述: 网站部署之后,排序或者搜索之后报错:The state information is invalid for this page and might be corrupted 2.问题 ...
- Android(java)学习笔记154:使用GridView以及重写BaseAdapter
1.BaseAdapter: 对于ListView.GridView.Gallery.Spinner等等,它是它们的适配器,直接继承自接口类Adapter的,使用BaseAdapter时需要重写很多方 ...
- NAT技术基本原理与应用
转载自:http://www.cnblogs.com/derrick/p/4052401.html?utm_source=tuicool&utm_medium=referral#undefin ...
- Content-type 对照表
Content-Type,内容类型,一般是指网页中存在的Content-Type,用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式.什么编码读取这个文件,比如用PHP输出图片文件.JSON数 ...
- 学习opencv中文版教程——第二章
学习opencv中文版教程——第二章 所有案例,跑起来~~~然而并没有都跑起来...我只把我能跑的都尽量跑了,毕竟看书还是很生硬,能运行能出结果,才比较好. 越着急,心越慌,越是着急,越要慢,越是陌生 ...
- <item name="android:windowNoTitle">true</item> 不起作用。标题栏未被隐藏
改变style.xml 加入 <item name="android:windowNoTitle">true</item> 按理说可以把标题栏隐藏,但是当s ...