canvas上的像素操作(图像复制，细调)

总结

1、操作对象：ImageData 对象，其实是canvas的像素点集合

2、主要操作： var obj=ctx.getImageData(0,0,100,100); ctx.putImageData(obj,110,0)

3、操作图片要放在站点才能正常操作，可以是本地站点可以是外部站点

4、属性有三个：宽、高、data

5、for循环给每一个像素点添加或者修改

6、不同的公式可以绘制任意奇妙的图形

像素操作

属性
- width 返回 ImageData 对象的宽度(可以理解为一行像素的个数)
- height 返回 ImageData 对象的高度(可以理解为一列像素的个数)
- data 返回一个对象，其包含指定的 ImageData 对象的图像数据
  - 该对象包含每一个像素的四个rgba值，注意每个值都在0-255之间
  - 这个四个参数和CSS中讲的rgba颜色表示法原理相同，四个参数分别表示红、绿、蓝以及透明度。
  - 所不同的是这里的透明度取值也是0-255,255表示完全不透明，0表示完全透明
方法
- getImageData(x,y,w,h) 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
- putImageData(imgData,dx,dy,dirtyX,dirtyY,w,h) 把图像数据（从指定的 ImageData 对象）放回画布上
  首先讨论第一种最简单的putImageData用法，即putImageData(imgData,dirtyX,dirtyY)，在解释其他参数
  - imgData 规定要放回画布的 ImageData 对象。
  - dx/dy ImageData 对象左上角的 x/y坐标，以像素计。即准备绘制图像的起点坐标.
  - [dirtyX,dirtyY,w,h]为一组可选参数，该参数确定了一个以dx和dy坐标原点的矩形，分别表示矩形的起点和宽高，该矩形把将要绘制的图像限定在矩形区域内.
    
    温馨提示：如果用绘入外部图片的办法测试该属性，在本地测试会出错，这是由于javaScript的同源策略对context.getImageDate的影响，该策略是基于浏览器的安全，禁用会造成安全隐患。可以通过搭建一个本地站点，将文档放到站点的方法测试。对于这一点在本课程中不做过多讲解。
- createImageData() 创建新的、空白的 ImageData 对象
  - var imgData=context.createImageData(width,height);以指定的尺寸（以像素计）创建新的 ImageData 对象
  - var imgData=context.createImageData(imageData)创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）

代码

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>8-19 课堂演示</title>
 6 </head>
 7 <style type="text/css">
 8 </style>
 9 <body>
10     <canvas id="canvas" width="500" height="300" style="background: #A9A9A9">
11             很抱歉，您的浏览器暂不支持HTML5的canvas
12     </canvas>
13     <script>
14         var c=document.getElementById("canvas");
15         var ctx=c.getContext("2d");
16         ctx.fillStyle='rgba(255,55,5,0.6)'
17         ctx.fillRect(0,0,100,100)
18         var obj=ctx.getImageData(0,0,100,100);
19         // alert(obj.width)
20         // alert(obj.height)
21         // alert(obj.data.length)
22         //每一个像素包含四个颜色分量
23         // alert(obj.data[0])
24         // alert(obj.data[1])
25         // alert(obj.data[2])
26         // alert(obj.data[3])
27
28         ctx.putImageData(obj,110,0)
29         for (var i=0;i< obj.data.length; i++){
30             obj.data[0+4*i]=100;
31             obj.data[1+4*i]=20;
32             obj.data[2+4*i]=250;
33             obj.data[3+4*i]=255;
34         }
35
36         ctx.putImageData(obj,220,0)
37         for (var i=0;i< obj.data.length; i++) {
38             obj.data[0+4*i]=Math.floor(Math.random()*255)
39             obj.data[1+4*i]=Math.floor(Math.random()*255)
40             obj.data[2+4*i]=Math.floor(Math.random()*255)
41             obj.data[3+4*i]=Math.floor(Math.random()*255)
42         }
43         ctx.putImageData(obj,330,0)
44
45         for (var i=0;i< obj.data.length; i++) {
46             var rad=Math.floor(Math.random()*255)
47             obj.data[0+4*i]=rad
48             obj.data[1+4*i]=rad
49             obj.data[2+4*i]=rad
50             obj.data[3+4*i]=rad
51         }
52         ctx.putImageData(obj,330,150)
53
54
55     </script>
56
57 </body>
58 </html>

View Code

操作图片

放在站点才能正常操作

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>8-21 课堂演示</title>
 6 </head>
 7 <style type="text/css">
 8 </style>
 9 <body>
10     <canvas id="canvas" width="900" height="300" style="background: #A9A9A9">
11             很抱歉，您的浏览器暂不支持HTML5的canvas
12     </canvas>
13     <input type="button" value="像素操作" onclick="putImage()">
14     <input type="button" value="反色绘制" onclick="fs()">
15     <input id="ljxg" type="button" value="滤镜效果" onclick="lj()">
16     <script>
17         var c=document.getElementById("canvas");
18         var ctx=c.getContext("2d");
19         var img=new Image();
20         img.onload=function(){
21             ctx.drawImage(img,0,0,400,300)
22         }
23         img.src='../img/p3.jpg'
24         function putImage()    {
25             var imgData=ctx.getImageData(0,0,400,300) //用getImageData函数从画板上取得像素数据
26             //ctx.putImageData(imgData,500,0)  //将所取得的整个像素数据画到Canvas画板上
27             //将所取得的像素数据的一部分画到Canvas画板上。
28             //ctx.putImageData(imgData,500,0,150,0,130,300)
29             //ctx.putImageData(imgData,500,0,300,0,130,300)
30             ctx.putImageData(imgData,500,0,0,0,130,300)
31         }
32
33         //反色绘制
34         function fs(){
35             ctx.clearRect(500,0,400,300)
36             var imgData=ctx.getImageData(0,0,400,300)
37             for (var i=0;i<imgData.data.length ; i+=4) {
38                 imgData.data[i+0]=255-imgData.data[i+0];
39                 imgData.data[i+1]=255-imgData.data[i+1]
40                 imgData.data[i+2]=255-imgData.data[i+2]
41             }
42             ctx.putImageData(imgData,500,0)
43         }
44
45         //滤镜效果
46         function lj(){
47             ctx.clearRect(500,0,400,300)
48             var imgData=ctx.getImageData(0,0,400,300)
49             for (var i=0;i<imgData.data.length ; i+=4) {
50                 imgData.data[i+0]=0;
51                 //imgData.data[i+1]=0;
52                 // imgData.data[i+2]=0;
53             }
54             ctx.putImageData(imgData,500,0)
55         }
56     </script>
57
58 </body>
59 </html>

View Code

绘制背景

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>8-22 课堂演示</title>
 6 </head>
 7 <style type="text/css">
 8 </style>
 9 <body>
10     <canvas id="canvas" width="900" height="300" style="background: #A9A9A9">
11             很抱歉，您的浏览器暂不支持HTML5的canvas
12     </canvas>
13     <script>
14         var c=document.getElementById("canvas");
15         var ctx=c.getContext("2d");
16         var imgData=ctx.createImageData(300,300);
17         for (var i=0;i<imgData.data.length;i+=4){
18             var g=i*i*i*3%255
19               imgData.data[i+0]=g;
20               imgData.data[i+1]=g;
21              imgData.data[i+2]=g;
22               imgData.data[i+3]=255;
23         }
24         ctx.putImageData(imgData,0,0);
25
26         for (var i=0;i<imgData.data.length;i+=4)
27           {
28                     g=Math.floor((i*i+4*i+30)%255)
29                       imgData.data[i+0]=g;
30                       imgData.data[i+1]=g;
31                      imgData.data[i+2]=255;
32                       imgData.data[i+3]=255;
33         }
34         ctx.putImageData(imgData,300,0);
35
36         for (var i=0;i<imgData.data.length;i+=4)
37           {
38                     g=Math.floor(Math.sqrt(i*i*5)%255)
39                       imgData.data[i+0]=200;
40                       imgData.data[i+1]=g;
41                      imgData.data[i+2]=g;
42                       imgData.data[i+3]=255;
43         }
44         ctx.putImageData(imgData,600,0);
45     </script>
46
47 </body>
48 </html>

View Code

转载于:https://www.cnblogs.com/Renyi-Fan/p/8142346.html

canvas上的像素操作(图像复制，细调)相关推荐

OpenCV（二）逐像素的图像复制、图像边缘检测（自实现和API实现）
目录一.逐像素的图像复制 1.代码 2.效果二.简单的图像边缘检测(自实现) 0.图像处理的卷积运算 1.简单模糊处理 2.强化边缘处理 1.原理 2.代码 3.效果三.简单的图像边缘检测(调用 ...
html5 canvas系列教程-像素操作（反色，黑白，亮度，复古，蒙版，透明）
getImageData:获取一张图片的像素数据 cxt.getImageData( x, y, width, height ) x:图片所在的x坐标 y: 图片所在的y坐标 width,height ...
html5像素处理,HTML5 Canvas像素操作
本文介绍Canvas中强大的像素操作功能.这是非常有价值的一个功能,有了这一功能,就可以直接访问Canvas底层像素数据. 注意由于人们可以直接操纵像素数据,因此出现了某些人利用从Canvas直接获 ...
HTML5 Canvas操作图像像素
操作图像像素如果要对图像进行进一步的处理,就可以先通过getImageData()方法获取图像像素,进行处理后再通过putImageData()方法,把处理后的像素重新绘制到画布中. 1)getIm ...
canvas像素操作、save与restore、合成与变形
一.canvas像素操作 (1)获取图像像素 (2)写入像素数据 (3)创建像素数据 (4)小案例,将canvasA画布的图像复制到canvasB中二.canvas的save与restore 三.c ...
canvas 像素操作（图片像素操作）
canvas 图片像素/像素操作在 canvas 中的 drawImage() 方法允许在 canvas 中插入其他图像( img 和 canvas 元素都可以) .图片绘制上去后,我们可以通过 g ...
使用canvas操作图像
canvas 获取截图具体是使用 canvas 的 toDataURL 方法: var image = new Image(); image.src = canvas.toDataURL(&qu ...
canvas像素操作取色器写入像素数据缩放和反锯齿保存图片
博客简介 HTML5中的canvas允许我们直接对像素进行操作,我们可以通过ImageData对象操纵像素数据,读取或将数据数组写入该对象中.这里还会介绍如何控制图像使其平滑(反锯齿)以及如何从Can ...
canvas 像素操作
canvas 像素操作在 canvas 中可以使用 context.drawImage(image,dx,dy) 方法将图片绘制在 canvas 上.将图片绘制上去后,还可以使用 context.g ...

canvas上的像素操作(图像复制，细调)

canvas上的像素操作(图像复制，细调)

总结

像素操作

代码

操作图片

绘制背景

canvas上的像素操作(图像复制，细调)相关推荐

最新文章

热门文章