javascript图片相似度算法实现 js实现直方图和向量算法

代码如下:

function getHistogram(imageData) {
    var arr = [];
    for (var i = 0; i < 64; i++) {
        arr[i] = 0;
    }
    var data = imageData.data;
    var pow4 = Math.pow(4, 2);
    for (var i = 0, len = data.length; i < len; i += 4) {
        var red = (data[i] / 64) | 0;
        var green = (data[i + 1] / 64) | 0;
        var blue = (data[i + 2] / 64) | 0;
        var index = red * pow4 + green * 4 + blue;
        arr[index]++;
    }

return arr;
}

function cosine(arr1, arr2) {
    var axb = 0,
        a = 0,
        b = 0;
    for (var i = 0, len = arr1.length; i < len; i++) {
        axb += arr1[i] * arr2[i];
        a += arr1[i] * arr1[i];
        b += arr2[i] * arr2[i];
    }
    return axb / (Math.sqrt(a) * Math.sqrt(b));
}
function gray(imgData) {
    var data = imgData.data;
    for (var i = 0, len = data.length; i < len; i += 4) {
        var gray = parseInt((data[i] + data[i + 1] + data[i + 2]) / 3);
        data[i + 2] = data[i + 1] = data[i] = gray;
    }
    return imgData;
}

有个问题，假如图片是灰色的跟原图进行比较，那么要比较相似度，需要将图片都转成灰色的，即使用上面代码的gray函数来处理

赞 (0)

相关推荐

  • D3.js 从P元素的创建开始(显示可加载数据)

    D3.js 从P元素的创建开始(显示可加载数据)

    D3是一个基于数据操作的可视化js库,认识d3,就从最基础的显示可加载数据谈起. html的基本框架不多说,先上代码再解释: 新建一个test目录,在该目录下创建demo和d3两个文件夹.demo存放要编写的html文件 , d3存放d3.v3.js 在demo文件夹下新建indexP.html,将下面代码复制其中,双击在浏览器打开查看效果. <!DOCTYPE html> <html lang="en"> <head> <meta chars

  • D3.js实现折线图的方法详解

    D3.js实现折线图的方法详解

    前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>

  • D3.js实现雷达图的方法详解

    D3.js实现雷达图的方法详解

    前言 再简单介绍下D3.js,D3.js 是一个基于数据操作文档JavaScript库.D3帮助你给数据带来活力通过使用HTML.SVG和CSS.D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架.结合强大的可视化组件和数据驱动方式Dom操作.这里也可以看到它是用SVG来呈现图表的,所以使用D3.js是需要一定的SVG基础的. 本文依然是先把简单的画图框架搭起来,添加SVG画布.这里和饼图有点类似,为了方便后面的绘制,我们把组合这些元素的g元素移动到画布的中心: <!DOC

  • D3.js实现饼状图的方法详解

    D3.js实现饼状图的方法详解

    前言 小编在之前已经跟大家分享过关于怎样用柱状图和折线图这两种基本图表.这两种图表都是有坐标轴的,现在来说一种没有坐标轴的图表--饼图. 饼状图实现 还是和之前一样,我们先把简单的画图框架搭起来,添加SVG画布.但是这里需要注意的是,为了方便后面画饼图上的弧形,我们把组合这些元素的g元素移动到画布的中心: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

  • D3.js实现柱状图的方法详解

    D3.js实现柱状图的方法详解

    D3.js介绍 D3.js 是一个基于数据操作文档JavaScript库.D3帮助你给数据带来活力通过使用HTML.SVG和CSS.D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架.结合强大的可视化组件和数据驱动方式Dom操作.这里也可以看到它是用SVG来呈现图表的,所以使用D3.js是需要一定的SVG基础的. 如何用D3.js实现柱状图? 柱状图里面有坐标轴和柱子.然而我们还需要SVG画布来画这些东西.先把大概的画图框架搭起来,代码如下(请注意此时我在body标签里添加

  • D3.js实现直方图的方法详解

    D3.js实现直方图的方法详解

    一.直方图简介 直方图就是一种照片的分析方式,横向代表亮度,纵向代表像素数量.首先分析出照片中所有像素的亮度,然后计算出具体数值,再把它们映射到横轴上.这样的话,越高,这个亮度上的像素就越多. 直方图的观看规则就是"左黑右白",左边代表暗部,右边代表亮部,而中间则代表中间调. 纵向上的高度代表像素密集程度,越高,代表的就是分布在这个亮度上的像素很多. 直方图用于描述概率分布,D3 提供了直方图的布局 Histogram 用于转换数据. 假设有数组 a = [10, 11, 11.5,

  • D3.js实现散点图和气泡图的方法详解

    D3.js实现散点图和气泡图的方法详解

    前言 小编之前已经跟大家分享过了<D3.js实现柱状图的方法详解>和<D3.js实现折线图的方法详解>这两篇文章,已经介绍过柱状图和折线图了.下面就来说说和这两种非常相似的图表--散点图和气泡图.有需要的朋友们可以参考学习. 散点图和气泡图的实现 还是和之前一样,我们先把简单的画图框架搭起来,添加SVG画布: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

  • 基于d3.js实现实时刷新的折线图

    基于d3.js实现实时刷新的折线图

    先来看看效果图 下面直接上源代码,html文件 <html> <head> <meta charset="utf-8"> <title>实时刷新折线图</title> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-seri

  • D3.js中data(), enter() 和 exit()的问题详解

    D3的应用非常广泛,现在成为了主流数据可视化工具之一.大家在刚接触使用d3.js的时候,感到最吃力的地方是data(), enter(), exit()这几个操作. 在我接触一段时间,有了一些了解之后,简单说说我的理解. data() 先看一个例子: <body> <p></p> <p></p> <p></p> </body> 执行代码: d3.select("body").selectAl

  • php中使用Imagick实现图像直方图的实现代码

    php中使用Imagick实现图像直方图的实现代码

    我并不打算详细解释专业名词,有兴趣的读者可以查阅文章结尾处的参考链接,那里有通俗易懂的解释: 我们先找一个例子图像(用Canon 550D拍的): 例子图片:butterfly.jpg 下面看看如何使用Imagick实现图像直方图: 复制代码 代码如下: <?php $file = 'butterfly.jpg'; $size = array( 'width' => 256, 'height' => 100, ); $image = new Imagick($file); $histog

  • JavaScript可视化图表库D3.js API中文参考

    D3库所提供的所有 API 都在 d3 命名空间下.d3 库使用语义版本命名法(semantic versioning). 你可以用 d3.version 查看当前的版本信息. d3 (核心部分) 选择集 d3.select - 从当前文档中选择一系列元素. d3.selectAll - 从当前文档中选择多项元素. selection.attr - 设置或获取指定属性. selection.classed - 添加或删除选定元素的 CSS 类(CSS class). selection.styl

随机推荐