--- 内嵌图像

- 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之图像处理的更多相关文章

  1. HTML5图形图像处理技术研究

    摘要:图形图像处理平台大部分是传统的C/S架构的桌面应用程序,维护困难,共享性差,而B/S架构的Web程序具有易维护.易共享的优点.本文研究了基于HTML5的Web图形图像处理技术,用HTML5实现了 ...

  2. html5 canvas 图像处理

    1.图像放大缩小 <script> var cvs = document.getElementById("canvas"); cvs.width = cvs.heigh ...

  3. HTML5技术实现Web图形图像处理——WebPhotoshop精简版

    WebPhotoshop精简版是利用HTML5技术在Web上实现对图形图像的处理,构建易维护.易共享.易于拓展.实时性的Web图形图像处理平台. 精简版功能包括:图形绘制.图像处理.图像操作.完整版包 ...

  4. 区域医疗移动医疗影像解决方案--基于HTML5的PACS--HTML5图像处理【转】

    基于HTML5的PACS--图像伪彩 摘要: 要查看此系统更多的图像处理功能请参考:区域医疗移动医疗影像解决方案--基于HTML5的PACS--HTML5图像处理套用句广告语:哪里不会点哪里,so e ...

  5. HTML5标签canvas图像处理

    摘要: canvas可以读取图片后,使用drawImage方法在画布内进行重绘.本文介绍canvas的图像处理 drawImage drawImage() 方法在画布上绘制图像.画布或视频.drawI ...

  6. 基于HTML5的PACS--HTML5图像处理

    在此之前,此系统是结合DICOM的WADO标准,在浏览器里通过javascript操作返回的JPG图片.这种服务器端解析,客户端展现的方式,对实现图像的移动.缩放.旋转.测量等图像操作能够实现实时的交 ...

  7. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  8. HTML5 学习总结(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  9. HTML5 学习笔记(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

随机推荐

  1. linux下hexdump和od命令:显示文件十六进制格式

    Linux指令: od 示例用法:  od -c hello Linux指令:      od od命令用户通常使用od命令查看特殊格式的文件内容.通过指定该命令的不同选项可以以十进制.八进制.十六进 ...

  2. iOS调用系统通讯录获取姓名电话号码(转)

    原文地址:http://blog.csdn.net/idoshi201109/article/details/46007125 OS调用系统通讯录获取姓名电话号码 (iOS 8.0 Xcode6.3可 ...

  3. 【转】如何从零开始学会 Ruby on Rails?

    文章转自:http://huacnlee.com/blog/how-to-start-learning-ruby-on-rails/ 这个话题曾经给身边的很多朋友说过同样的话题,这里整理以下. 如果你 ...

  4. ibdata文件增大的原因

    http://blog.itpub.net/22664653/viewspace-1994016/

  5. 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.问题 ...

  6. Android(java)学习笔记154:使用GridView以及重写BaseAdapter

    1.BaseAdapter: 对于ListView.GridView.Gallery.Spinner等等,它是它们的适配器,直接继承自接口类Adapter的,使用BaseAdapter时需要重写很多方 ...

  7. NAT技术基本原理与应用

    转载自:http://www.cnblogs.com/derrick/p/4052401.html?utm_source=tuicool&utm_medium=referral#undefin ...

  8. Content-type 对照表

    Content-Type,内容类型,一般是指网页中存在的Content-Type,用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式.什么编码读取这个文件,比如用PHP输出图片文件.JSON数 ...

  9. 学习opencv中文版教程——第二章

    学习opencv中文版教程——第二章 所有案例,跑起来~~~然而并没有都跑起来...我只把我能跑的都尽量跑了,毕竟看书还是很生硬,能运行能出结果,才比较好. 越着急,心越慌,越是着急,越要慢,越是陌生 ...

  10. <item name="android:windowNoTitle">true</item> 不起作用。标题栏未被隐藏

    改变style.xml 加入 <item name="android:windowNoTitle">true</item> 按理说可以把标题栏隐藏,但是当s ...