day-6-像素操作

最新推荐文章于 2024-08-23 18:36:14 发布

铭心NTeen

最新推荐文章于 2024-08-23 18:36:14 发布

阅读量137

点赞数 1

分类专栏： HTML5 文章标签： HTML5 canvas

本文链接：https://blog.csdn.net/qq_25238675/article/details/103473681

版权

HTML5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

注意：谷歌下无问题，其他浏览器因跨域出错，暂未解决！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        canvas{
            display: block;
            border:2px solid blue;
            margin:0 auto;
        }

    </style>
</head>
<body>
    <canvas width="500" height="400" id="canvas"></canvas>
    <canvas width="500" height="400" id="canvas1"></canvas>
<script>
    var canvas=document.getElementById('canvas');
    var cxt=canvas.getContext('2d');

    var canvas1=document.getElementById('canvas1');
    var cxt1=canvas1.getContext('2d');

    var oimg=new Image();
    oimg.src='./1.jpg';
    oimg.onload=function(){
        cxt.drawImage(this,0,0,500,400);


        var imageData=cxt.getImageData(0,0,500,400);
        //获取像素信息500*400=200000个像素
        /*
        x，y，color重要信息
        * */

        var num=40;
        /*
              *   马赛克
              *       每十个像素点的r g b a都一样
              *       0-10  r g b a都一样
              *       11-20 r g b a都一样
              *       21-30 r g b a都一样
              * */
        for(var i=0;i<imageData.data.length;i+=num) {
            for(var j=1;j<num/4;j++){
                imageData.data[i+4*j]=imageData.data[i];
                imageData.data[i+1+4*j]=imageData.data[i+1];
                imageData.data[i+2+4*j]=imageData.data[i+2];
                imageData.data[i+3+4*j]=imageData.data[i+3];
            }
        }
        cxt1.putImageData(imageData,0,0);//显示像素
        //cxt1.drawImage(oimg,0,0,canvas.width,canvas.height);//画图片
       //cxt1.drawImage(oimg,100,40,100,100,100,100,100,150);//截图
    }
</script>
</body>
</html>

铭心NTeen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day-6-像素操作

注意：谷歌下无问题，其他浏览器因跨域出错，暂未解决！！！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas</title> <style> canvas{ ...
复制链接

扫一扫

专栏目录