Canvas玩转图像处理_技术问答

无价脂宝

像素计算问题: 表示出来的结果是一样吗，你换一下都对比一下就知道了; 2020-11-19 1回答·802浏览

何时才能成大佬

for循环的遍历与图中每个像素点在一维数组中的下标

for (var i=0;i<5;i++){

for (var j=0;j<3;j++){

var p = i*3+j;

document.write(p+' ');

}

document.write("<br />");

for (var i=0;i<5;i++){

for (var j=0;j<3;j++){

var p = j*3+i;

document.write(p+' ');

}

2019-04-03 1回答·1578浏览

何时才能成大佬

for循环

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
 .btn{
            text-decoration: none;
            border: 1px solid black;
            border-radius: 5px;
            background: white;
            color: black;
            padding: 10px;
            box-shadow: 5px 5px 5px #b7b7b7;
        }
    </style>
</head>
<body>

<div style="margin:20px auto;width:1168px;">
    <canvas id="canvasa" width="582" height="388" style="display:block;float:left;border:1px solid #aaa;"></canvas>
    <canvas id="canvasb" width="582" height="388" style="display:block;float:right;border:1px solid #aaa;"></canvas>
    <div style="clear:both;"></div>

    <div style="text-align:center;margin-top:50px;font-size:20px;">
        <a href="javascript:blurEffect()" class="btn">Blur Effect</a>
    </div>
</div>


<script>
 var cnvA=document.getElementById("canvasa");
    var cxtA=cnvA.getContext("2d");

    var cnvB=document.getElementById("canvasb");
    var cxtB=cnvB.getContext("2d");

    var image=new Image();
    window.onload=function(){
        image.src="images/02.jpg";
        image.onload=function(){
            cxtA.drawImage(image,0,0,cnvA.width,cnvA.height);
        }

    };







    function blurEffect(){
        var imageData=cxtA.getImageData(0,0,cnvA.width,cnvA.height);
        var data=imageData.data;

        var tempImageData=cxtA.getImageData(0,0,cnvA.width,cnvA.height);
        var tempData=tempImageData.data;

        var blurR=3;
        var number=(blurR+1+blurR)*(blurR+1+blurR);
        for(var i=blurR;i<.height-blurR;i++){
            for(var j=blurR;j<cnvB.width-blurR;j++){

                var sumR=0,sumG= 0,sumB=0;
                for(var dx=-blurR;dx<=blurR;dx++){
                    for(var dy=-blurR;dy<=blurR;dy++){
                        var x=i+dx;
                        var y=j+dy;

                        var index=x*cnvB.width+y;
                        sumR+=tempData[index*4+0];
                        sumG+=tempData[index*4+1];
                        sumB+=tempData[index*4+2];
                    }
                }
                var index=i*cnvB.width+j;
                data[index*4+0]=sumR/number;
                data[index*4+1]=sumG/number;
                data[index*4+2]=sumB/number;
            }
        }

        cxtB.putImageData(imageData,0,0,0,0,cnvB.width,cnvB.height);
    }



</script>
</body>
</html>

2019-04-02 3回答·1556浏览

慕用0489808

请问这个怎么解决呀: 是因为没有服务器环境吧，不要用本地图片再试一下; 2019-03-24 1回答·1012浏览

猫猫猫尾草

是不是有点小问题: 这哪是什么小问题呀，这; 2018-12-14 0回答·1126浏览

幕布斯6573378

橡皮筋框选获取坐标: onmousedown()和onmouseup()获取鼠标按下和松开的坐标，再计算一下相对于canvas画布位置的坐标应该就可以算出来了; 2018-08-23 1回答·1248浏览

x米多米拉

blurR越大，未被处理的像素点越多

改成下面这样了，不知道还有没有问题，欢迎交流~

var blurR = 50;

for(var i = 0; i < canvasA.height; i++){

for(var j = 0; j < canvasA.width; j++ ){

var r = 0,g = 0,b = 0,totalNum = 0;

for(var m = -blurR; m <= blurR; m++){

for(var n = -blurR; n <= blurR;n++){

var x = i + m;

var y = j + n;

if(x<0||y<0||x >= canvasA.height ||y >= canvasA.width)

continue;

totalNum++;

var p = x*canvasA.width+y;

r += tmpData[4*p+0];

g += tmpData[4*p+1];

b += tmpData[4*p+2];

}

var p = i*canvasA.width+j;

tmpData[4*p+0] = r/totalNum;

tmpData[4*p+1] = g/totalNum;

tmpData[4*p+2] = b/totalNum;

}

2018-08-08 1回答·548浏览

qq_A風love銘_0

请问如何解决canvas 在高清屏下的模糊问题

我是先将 canvas的大小与图片大小调成一致然后在渲染过后的canva用 css的手段将其限制大小这样就不会失帧了

2017-11-10 4回答·1951浏览

TalorCC

没什么

so what

2017-08-23 1回答·1235浏览

qq_快乐小2B_0

灰色滤镜的问题

var a = pixelData[i*4+2]

var grey = r*0.3 + g*0.59 + b*0.11

声明a却用b计算

2017-05-04 1回答·1561浏览

Willie_Jiang

chrome不兼容: 已采纳厉害Sin 的回答; chrome底层决定的吧，用chrome的话需要打开存在服务器的网页才能使用getImageData()方法。用firefox、edge等就不用; 2017-02-16 1回答·1590浏览

慕粉4042427

马赛克中部设置

已采纳风声碎雨的回答

//从dx,dy开始，使w,h区域马赛克
for(var i=dy;i<(dy+h);i+=size)
    for(var j=dx;j<(dx+w);j+=size){
        
    }

2016-12-19 1回答·1436浏览

白肚子狗熊半本书

一些边缘像素遍历不了，总是不会模糊怎么么办，总是一边有一条和原图一样的: 已采纳 m慕光的回答; 这是正常的，因为根据代码最边上的像素没有被遍历到，也就是没有做处理，人眼的注意力一般集中在图片中心，所以对实际效果影响不大。; 2016-11-03 1回答·1860浏览

comlejade

for循环里那个 p = i*canvasb.width + j是什么: 在canvas中，像素点是以一维数组的形式呈现的，所以当你获取了二维坐标以后，需要转成一维数组。; 2016-02-28 1回答·1148浏览

cesiya23

马赛克滤镜的size问题

当你将j的初始值设置为size的时候，即你不马赛克化x方向下前size值的图片，但是你会发现图片处理后的情况如下

可以得出结论，如果j+size的值大于图片的width时，即（j+dy）的值在大于图片的width，他就会从头开始获取像素值,所以才会出现三段图像，而不是我们预料的两段图像

2015-12-08 3回答·1641浏览

cesiya23

for循环里的条件 i < canvasb.width * canvasb.height: 其实你的说法是严谨的做法，但是因为canvasa和canvasb两个canvas其实是相同大小的，所以两种条件都成立; 2015-12-07 1回答·1106浏览

平凡璐

putImageData 制作滤镜效果谷歌不兼容啊: 2015-09-08 4回答·1135浏览

我仍旧在这里

模糊效果的问题: 图像边缘的1个像素是保持不变的，相对于整个图像来说可以忽略; 2015-08-26 1回答·1076浏览

中古

黑白滤镜中，如果图片发白或发黑，那完成的黑白图片，就没有理想中的那么好了: 试过了，不行的，他的最高和最底相差很大的，用Ps去做，也做不了一个满意的效果。; 2015-08-25 2回答·1052浏览