html5＜canvas操作像素之反相、窗帘、模糊特效＞

来源：互联网发布：xbox软件是什么编辑：程序博客网时间：2024/06/10 07:48

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            canvas{
                background:#eee;
            }
        </style>
        <script>
            window.onload = function(){
                var canvas = document.getElementById('canvas');
                var cobj = canvas.getContext('2d');//获取绘图环境
                var img = document.getElementById('img');
                cobj.drawImage(img,0,0,200,240);//画图片
                var imgData=cobj.getImageData(0,0,200,240);//得到图片信息
                //复制出同样规格，颜色为红色的图片
                // for (var i=0; i<imgData.width*imgData.height; i++) {
                //     imgData.data[i*4+0]=255;
                //     imgData.data[i*4+1]=0;
                //     imgData.data[i*4+2]=0;
                //     imgData.data[i*4+3]=255;
                // }
                //反向
                // for (var i=0; i<imgData.width*imgData.height; i++) {
                //     imgData.data[i*4+0] = 255 - imgData.data[i*4+0];
                //     imgData.data[i*4+1] = 255 - imgData.data[i*4+1];
                //     imgData.data[i*4+2] = 255 - imgData.data[i*4+2];
                //     imgData.data[i*4+3] = imgData.data[i*4+3];
                // }
                // cobj.putImageData(imgData,200,240);//复制出新的图片

                // fanxiang(imgData);//调用反向函数
                // menlian(imgData,4);//调用门帘函数
                vague(imgData,1000);//调用模糊函数
                //封装反向函数
                function fanxiang(imgData){
                    for (var i=0; i<imgData.width*imgData.height; i++) {
                        imgData.data[i*4+0] = 255 - imgData.data[i*4+0];
                        imgData.data[i*4+1] = 255 - imgData.data[i*4+1];
                        imgData.data[i*4+2] = 255 - imgData.data[i*4+2];
                        imgData.data[i*4+3] = imgData.data[i*4+3];
                    }
                    cobj.putImageData(imgData,200,240);
                }

                //门帘效果
                function menlian(imgData,num){
                    for (var i=0; i<imgData.width*imgData.height; i++) {
                        if(i%num == 0){
                            imgData.data[i*4+0] = 0;
                            imgData.data[i*4+1] = 0;
                            imgData.data[i*4+2] = 0;
                            imgData.data[i*4+3] = 0;
                        }
                    }
                    cobj.putImageData(imgData,200,240);
                }

                //模糊效果
                function vague(imgData,num){
                    for(var j=0;j<num;j++){
                        for (var i=0; i<imgData.width*imgData.height; i++) {
                            imgData.data[i*4+0] = (imgData.data[(i-1)*4+0]+imgData.data[i*4+0]+imgData.data[(i+1)*4+0])/3;
                            imgData.data[i*4+1] = (imgData.data[(i-1)*4+1]+imgData.data[i*4+1]+imgData.data[(i+1)*4+1])/3;
                            imgData.data[i*4+2] = (imgData.data[(i-1)*4+2]+imgData.data[i*4+2]+imgData.data[(i+1)*4+2])/3;
                            imgData.data[i*4+3] = imgData.data[i*4+3];
                        }
                    }
                    cobj.putImageData(imgData,200,240);
                }
            }
        </script>
    </head>
    <body>
    <canvas id="canvas" width=500 height=500>
    </canvas>
    <img src="./1.jpg" height="330" width="268" id="img" hidden/>
    </body>

</html>

阅读全文

0 0