canvas图像像素处理-createImageData()(二)

旧城等待， 2021-09-12 01:18 482阅读 0赞

一.知识点

1.[getImageData() 从Canvas画板上取得所选区域的像素数据][getImageData_ _Canvas]

2.[putImageData() 方法函数则表示将所得到的像素数据描画到Canvas画板上形成图形][getImageData_ _Canvas]

3.[createImageData() 方法][createImageData_]创建新的空白 ImageData 对象。新对象的默认像素值

createImageData函数有两种函数原型，其语法分别如下所示

(1).createImageData(sw, sh);   
其一，返回指定大小的imageData对象。  
(2).createImageData(imagedata);   
其二，返回与指定对象相同大小的imageData对象。

首先需要知道的是，通过createImageData返回的是一个空的imageData对象，必须要针对其像素进行赋值才能显示到Canvas画板上。

具体步骤：

(1).利用createImageData新建像素

①使用createImageData创建新的空白 ImageData 对象

var imgData=ctx.createImageData(100,100);   
②对imgData进行赋值。  
for (i=0; i<imgData.width\*imgData.height\*4;i+=4)\{    
 imgData.data\[i+0\]=255;    
 imgData.data\[i+1\]=0;    
 imgData.data\[i+2\]=0;    
 imgData.data\[i+3\]=155;    
\}   
③利用putImageData将imgData画到Canvas画板上。  
ctx.putImageData(imgData,220,260);

(2).createImageData(imagedata);

①图片数据读取完成后，首先将图片数据绘制到Canvas画板上。  
ctx.drawImage(image,10,10);

②然后用getImageData函数从画板上取得像素数据。  
var imgData=ctx.getImageData(50,50,200,200);

③使用createImageData返回与imgData相同大小的ImageData对象。  
var imgData01=ctx.createImageData(imgData);

var imgData=ctx.createImageData(100,100);  
ctx.putImageData(imgData,10,10);

二.注意

用getImageData()获取像素值，可以不用考虑alpha，但是createImageData()创建像素时，需要考虑alpha值

三.例子

(1).简单的列子

![20170303160104476][]

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
            您的浏览器尚不支持canvas
        </canvas>
        <script>
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
    
            window.onload = function(){
    
                canvas.width = 800;
                canvas.height = 800;
    
                var imageData = context.createImageData( canvas.width/2 , canvas.height/2 );
                var pixelData = imageData.data;
                //二维循环来遍历每一个像素
                for (var i=0;i<canvas.width/2 * canvas.height/2;i++){
                    pixelData[i*4+0]=0;
                    pixelData[i*4+1]=0;
                    pixelData[i*4+2]=0;
                    pixelData[i*4+3]=55;
                }
                context.putImageData(imageData,0,0,50,50,canvas.width/2 , canvas.height/2);
            }
        </script>
    </body>
    </html>

(2).颜色快

![20170303154026542][]

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
            您的浏览器尚不支持canvas
        </canvas>
        <script>
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
    
            window.onload = function(){
    
                canvas.width = 800;
                canvas.height = 800;
    
                var imageData = context.createImageData( canvas.width , canvas.height );
                var pixelData = imageData.data;
                //二维循环来遍历每一个像素
                for( var i = 0 ; i < canvas.height ; i ++ )
                    for( var j = 0 ; j < canvas.width ; j ++ ){
    
                        var p = i*canvas.width+j;
    
                        pixelData[4*p+0] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2),2)*255);
                        pixelData[4*p+1] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2-2*Math.acos(-1)/3),2)*255);
                        pixelData[4*p+2] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2+2*Math.acos(-1)/3),2)*255);
                        pixelData[4*p+3] = 255;//a对象的赋值
                    }
    
                context.putImageData( imageData , 0 , 0 , 0 , 0 , canvas.width , canvas.height );
            }
        </script>
    </body>
    </html>

[getImageData_ _Canvas]: http://blog.csdn.net/gao_xu_520/article/details/59539774
[createImageData_]: http://book.51cto.com/art/201304/389322.htm
[20170303160104476]: /images/20210813/36f8815b6c254927a57b0ccade75379f.png
[20170303154026542]: /images/20210813/3558cc24be5749228eda8b833ea471ec.png