首页 > 编程语言 > 详细

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

时间:2020-07-03 15:44:37      阅读:116      评论:0      收藏:0      [点我收藏+]
获取图片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()

 

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

原文:https://www.cnblogs.com/SYJ1205/p/13230715.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!