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

素颜马尾好姑娘i 2022-06-15 07:27 322阅读 0赞

<!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>

![Center][]

![Image 1][]

[Center]: /images/20220615/c89d7190d7254771a679a57d768d6d5c.png
[Image 1]: