JavaScript结合canvas获取图片某一区域的rgba平均值的方法

获取图片rgba的平均值
        function getcolor() {
            //js创建一个canvas元素
            var canvas = document.createElement('canvas');
            //设置canvas的大小,动态获取也是可以的。
            canvas.width = 600;
            canvas.height = 350;
            //表示绘制一个2d图
            var context = canvas.getContext("2d");
            //获取图片元素
            // var img = document.getElementById('img');
            //创建图片元素用来加载图片地址        
            var nimg = new Image();
            nimg.onload = function () {
                var r = 0;
                var g = 0;
                var b = 0;
                var a = 0;
                var fxs = 600 * 300;
                //设置要绘制的图片
                context.drawImage(nimg, 0, 0);
                //获取图片的像素信息,并.data获得数组
                var data = context.getImageData(0, 0, 600, 300).data;
                //获取所有的rgba的和
                for (var i = 0; i < data.length / 4; i++) {
                    r += data[i * 4];
                    g += data[i * 4 + 1];
                    b += data[i * 4 + 2];
                    a += data[i * 4 + 3];
                }
                //获得平均值
                var rgba = 'rgba(' + parseInt(r / fxs) + ',' + parseInt(g / fxs) + ',' + parseInt(b / fxs) +
                    ',' + parseInt(a / fxs) + ')';

                console.log(rgba)

                if (parseInt(r / fxs) > 60 || parseInt(g / fxs) > 60 || parseInt(b / fxs) > 60) {
                    console.log("成功")
                    // console.log(nimg.src)
                    // console.log(img.src)
                    return true;
                    //true
                    // nimg.src = img.src;    
                } else {
                    console.log("失败")
                    return false;
                    //false                            
                }
            }
            //将图片地址传给nimg
            nimg.src = img.src;
        }
        getcolor()

 

posted @ 2020-07-03 15:31  ujung苏  阅读(965)  评论(0编辑  收藏  举报