zoukankan      html  css  js  c++  java
  • 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()
  • 相关阅读:
    IIC时序和24C02读写字节时序
    Labview-vi的可重入性
    Labview笔记-创建自定义控件
    非院校科研机构如何查阅下载文献?
    【转】经典的图像去噪算法NLM和BM3D算法
    【转载】计算机科学最重要的32个算法
    图像存储方式
    二维物体形状识别方法比较
    论static关键词
    论引用
  • 原文地址:https://www.cnblogs.com/SYJ1205/p/13230715.html
Copyright © 2011-2022 走看看