--- 内嵌图像

- 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. 强烈推荐android studio用的几个插件,androidstudio

    不懂安装studio插件,看参考博文:android stuido插件安装:http://blog.csdn.net/liang5630/article/details/46372447 1.Butt ...

  2. 64位Ubuntu配置android环境报错(...adb": error=2, 没有那个文件或目录)

    Failed to get the adb version: Cannot run program "/home/jayhomzhou/android/android-sdk/platfor ...

  3. Lync安装随笔

    使用域管理员权限扩展架构 1.iis角色安装 2.net3.5,消息队列服务器.目录服务集成.桌面体验.AD DS和AD LDS工具(远程服务管理工具中),启用WindowsFirewall服务 3. ...

  4. 最全面的Android Intent机制讲解

    对于大型软件开发经验较少的程序员来说,这可能是一个不太容易理解的抽象概念,因为它与我们平常使用的简单函数调用,或者通过库调用接口的方式不太一样.在 Intent 的使用中你看不到直接的函数调用,相对函 ...

  5. GoF的23个经典设计模式

    以文本和思维导图的方式简明扼要的介绍了GoF的23个经典设计模式,可当成学习设计模式的一个小手册,偶尔看一下,说不定会对大师的思想精髓有新的领悟. GoF(“四人帮”,又称Gang of Four,即 ...

  6. svn学习总结

    安装svn subversion服务参考博客http://huihai.iteye.com/blog/1985238 一:svn版本管理的作用 a:备份程序   项目开发过程中,防止不可控因素造成的资 ...

  7. 详细讲解Android对自己的应用代码进行混淆加密防止反编译

    1.查看项目中有没有proguard.cfg. 2.如果没有那就看看这个文件中写的什么吧,看完后将他复制到你的项目中. -optimizationpasses 5 -dontusemixedcasec ...

  8. uiatuomator命令启动apk,与查找多个相同控件

    背景:在做项目时,发现使用uiatuomator中遇到了一些问题,现在把解决方法和思路分享出来 案列1:使用命令去启动要运用的apk包 在做自动化时,需要通过命令去启动APK的包,我使用的是sdk中自 ...

  9. DEDECMS 获取当前栏目及所有子栏目的文章数量

    因DEDEV5起,加强了对SQL注入和安全的检查,导致无法查询一些正常的子查询的SQL. 以下代码用来解决查询当前栏目及当前栏目下所有子栏目的文章总数,添加到/include/common.func. ...

  10. TortoiseGit记住用户名和密码

    1.将项目从服务器Clone下来 2.然后在Repository上右键,打开设置 3.选择凭证 4.为当前Repository创建一个凭证,然后确定退出即可 5.然后再pull下,会直接提示你输入密码 ...