js，canvas獲取圖片色值

時間 2019-11-13

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>獲取圖片的周邊的色值</title>
</head>
<body>
<style type="text/css">
    canvas{
        /* position:absolute;
        opacity:0; */
    }
</style>
<!-- <div style="width:0;overflow:hidden"> -->
    <canvas id="canvas">對不你，你的瀏覽器不支持Canvas</canvas>
<!-- </div> -->
<div id="upside">up</div>
<div id="rightside">right</div>
<div id="downside">down</div>
<div id="leftside">left</div>
<script>
function getImgColor(url){
    function add(side,data,i){
        side[0]+=data[i];
        side[1]+=data[i+1];
        side[2]+=data[i+2];
        side[3]+=1;
    }
    function getColor(side){
        var r = side[0]/side[3];
        var g = side[1]/side[3];
        var b = side[2]/side[3];
        var color='rgb('+r+','+g+','+b+')';
        return color;
    }
    var img = new Image;
    img.src = url;
    img.onload = function(){
        canvas.setAttribute('width',img.width+'px');
        canvas.setAttribute('height',img.height+'px');
        var ctxt = canvas.getContext('2d');
        ctxt.drawImage(img, 0, 0);
        var data = ctxt.getImageData(0, 0, img.width, img.height).data;//讀取整張圖片的像素。
        var w=img.width;
        var h=img.height;
        var gap=3;
        var up=[0,0,0,0];
        var down=[0,0,0,0];
        var left=[0,0,0,0];
        var right=[0,0,0,0];
        
        for(var i =0,len = data.length; i<len;i+=4){
            if(i/4<w*gap){
                add(up,data,i)
            }else if(i/4%w<gap){
                add(left,data,i)
            }else if(i/4%w>w-gap){
                add(right,data,i)
            }else if(i/4>w*h-w*gap && i/4<w*h){
                add(down,data,i)
            }
        }
        var upcolor=getColor(up);
        var rightcolor=getColor(right);
        var leftcolor=getColor(left);
        var downcolor=getColor(down);
        upside.setAttribute('style',"background:"+upcolor);
        rightside.setAttribute('style',"background:"+rightcolor);
        leftside.setAttribute('style',"background:"+leftcolor);
        downside.setAttribute('style',"background:"+downcolor);
        console.log([upcolor,rightcolor,downcolor,leftcolor].toString());
    };
};
getImgColor('../img/banner/qq_01.jpg');//只須要把這個圖片路徑改爲你本身的圖片路徑就好了
</script>

</body>
</html>