<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>识别相似图片</title>

<style>

html { background:#F0F0F0; }

body { margin:0; padding:0; }

img { display:block; }

.panel { width:300px; height:200px; border:1px solid #CCC; background:#F5F5F5; float:left; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; color:#CCC; font-size:14px; position:relative; -webkit-transition:.5s opacity ease; margin:20px; margin-right:0; }

.panel img { width:100%; position:absolute; left:0; top:0; width:100%; }

.on { border:1px dashed #FFF; background-color:#369; color:#FFF; }

.similar { float:left; margin:20px; border:1px solid #4896D5; background:#D3EEFA; color:#4896D5; font-size:14px; border-radius:5px; padding:10px; opacity:.9; display:none; }

</style>

<script>

window.onload = function () {

    var panel1 = document.querySelectorAll('.panel')[0];

    var panel2 = document.querySelectorAll('.panel')[1];

    panel1.ondragover = panel2.ondragover = function (ev) {

      return false;

    };

    panel1.ondragenter = panel2.ondragenter = function (ev) {

        var span = this.querySelectorAll('span')[0];

        span.innerHTML = '松开按键将图片放入此框';

        this.style.opacity = .8;

        var re = /\bon\b/;

        if (!re.test(this.className)) this.className += ' on';

    };

    panel1.ondragleave = panel2.ondragleave = function (ev) {

        var span = this.querySelectorAll('span')[0];

        span.innerHTML = '请拖拽原始图片至此框内';

        this.style.opacity = 1;

        var re = /\bon\b/;

        if (re.test(this.className)) this.className = this.className.replace(re, '');

    };

    panel1.ondrop = panel2.ondrop = function (ev) {

        var re = /\bon\b/;

        if (re.test(this.className)) this.className = this.className.replace(re, '');

        this.style.opacity = 1;

        var self = this,

              file = ev.dataTransfer.files[0],

              reader = new FileReader();

        reader.onload = function (ev) {

            var img = self.querySelectorAll('img')[0];

            if (!img) {

                img = new Image();

              self.appendChild(img);

            }

            img.onload = function () {

                self.style.width = this.width + 'px';

                self.style.height = this.height + 'px';

                var img1 = panel1.querySelectorAll('img')[0];

                var img2 = panel2.querySelectorAll('img')[0];

                if (img1 && img2) {

                    document.querySelectorAll('.similar')[0].innerHTML = '相似度：' + searchImage(img1, img2) + '%';

                    document.querySelectorAll('.similar')[0].style.display = 'block';

                }

            };

            img.src = this.result;

        };

        reader.readAsDataURL(file);

        return false;

    };

};

function searchImage(image1, image2, tmplw, tmplh) {

    var canvas = document.createElement('canvas'),

        ctx = canvas.getContext('2d'),

            sw = image1.width,  // 原图宽度

            sh = image1.height,  // 原图高度

            tw = tmplw || 8,  // 模板宽度

            th = tmplh || 8;  // 模板高度

    canvas.width = tw;

    canvas.height = th;

    ctx.drawImage(image1, 0, 0, sw, sh, 0, 0, tw, th);

  var pixels = ctx.getImageData(0, 0, tw, th);

    pixels = toGrayBinary(pixels, true, null, true);

    var canvas2 = document.createElement('canvas');

    var ctx2 = canvas2.getContext('2d');

    canvas2.width = tw;

    canvas2.height = th;

    ctx2.drawImage(image2, 0, 0, image2.width, image2.height, 0, 0, tw, th);

    var pixels2 = ctx2.getImageData(0, 0, tw, th);

    pixels2 = toGrayBinary(pixels2, true, null, true);

    var similar = 0;

    for (var i = 0, len = tw * th; i < len; i++) {

        if (pixels[i] == pixels2[i]) similar++;

    }

    similar = (similar / (tw * th)) * 100;

    return similar;

}

// 像素数据，是否二值化（bool），二值化闵值（0-255），是否返回二值化后序列（bool）

function toGrayBinary(pixels, binary, value, sn) {

    var r, g, b, g, avg = 0, len = pixels.data.length, s = '';

    for (var i = 0; i < len; i += 4) {

        avg += (.299 * pixels.data[i] + .587 * pixels.data[i + 1] + .114 * pixels.data[i + 2]);

    }

    avg /= (len / 4);

    for (var i = 0; i < len; i += 4) {

        r = .299 * pixels.data[i], g = .587 * pixels.data[i + 1], b = .114 * pixels.data[i + 2];

        if (binary) {

            if ((r + g + b) >= (value || avg)) {

                g = 255;

                if (sn) s += '1';

            } else {

                g = 0;

                if (sn) s += '0';

            }

            g = (r + g + b) > (value || avg) ? 255 : 0;

        } else {

            g = r + g + b;

        }

        pixels.data[i] = g, pixels.data[i + 1] = g, pixels.data[i + 2] = g;

    }

    if (sn) return s;

    else return pixels;

}

</script>

</head>

<body>

<div class="panel"><span>请拖拽图片一至此框内</span></div>

<div class="panel"><span>请拖拽图片二至此框内</span></div>

<div class="similar"></div>

</body>

</html>

Canvas识别相似图片的更多相关文章

  1. 基于HTML5 Canvas实现的图片马赛克模糊特效

    效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...

  2. Android实现OCR扫描识别数字图片之图片扫描识别

    [Android实例] Android实现OCR扫描识别数字图片之图片扫描识别 Android可以识别和扫描二维码,但是识别字符串呢? google提供了以下解决方案用的是原来HP的相关资料. 可以吧 ...

  3. canvas生成遮罩图片

         首先我们知道css3中增加了不少好用.好玩的css3样式可以使用.今天我们要说到是遮罩.        它的使用方式也不复杂,和background使用方式差不多.使用mask-image就 ...

  4. HTML5 Canvas前台压缩图片并上传到服务器

    1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...

  5. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  6. 以API方式调用C# dll，使用OneNote2013 sp1实现OCR识别本地图片

    http://www.cnblogs.com/Charltsing/p/OneNoteOCRAPI.html OneNote2013 OCR API调用使用说明2019.4.17 使用说明:1.安装干 ...

  7. 用canvas给视频图片添加特效

    Canvas制作视频图片特效 1. Canvas介绍 1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能. 具体 ...

  8. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  9. canvas 2.0 图片绘制

    绘制图片drawImage 2013.02.21 by 十年灯·一条评论 本文属于<html5 Canvas画图系列教程> 这里的绘制图片是指把一张现成的图片,绘制到Canvas上面. 有 ...

随机推荐

  1. 递归：codevs 1251 括号

    codevs 1251 括号  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold   题目描述 Description 计算乘法时,我们可以添加括号,来改变相乘的顺 ...

  2. 2014 Super Training #1 C Ice-sugar Gourd 模拟，扫描线

    原题 HDU 3363 http://acm.hdu.edu.cn/showproblem.php?pid=3363 给你一个串,串中有H跟T两种字符,然后切任意刀,使得能把H跟T各自分为原来的一半. ...

  3. js模拟手机触摸屏

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. mysql高可用方案总结性说明

    MySQL的各种高可用方案,大多是基于以下几种基础来部署的(也可参考:Mysql优化系列(0)--总结性梳理   该文后面有提到)1)基于主从复制:2)基于Galera协议(PXC):3)基于NDB引 ...

  5. 纯CSS3实现兔斯基简单害羞表情

    前言 很不巧前天突然就感冒了,都怪自己吃太多饼干导致上火了.整个人都无精打采.本来想多做几个兔斯基表情的,但身体发热很难受.所以就只完成一个简单点的表情耍一耍. 正文 先看一下这个简单到不能再简单的小 ...

  6. Lua windows环境搭建

    Lua语言的小巧和功能强大在朋友做的一个项目中得以验证,自己也尝试着了解一下,首先在window系统上搭建一个学习环境. 官网:https://www.lua.org/ 搭建运行环境提供2种方式,源码 ...

  7. Managing the Lifecycle of a Service

    service的生命周期,从它被创建开始,到它被销毁为止,可以有两条不同的路径: A started service 被开启的service通过其他组件调用 startService()被创建. 这种 ...

  8. Navi.Soft20.WinCE使用手册

    1.概述 1.1应用场景 随着物联网的普及,越来越多的制造商对货品从原料配备,加工生产,销售出库等环节的要求和把控越来越高.在此情况之下,传统的ERP软件已经无法满足现有的流程. 移动设备的应用,在很 ...

  9. Oracle11G 卸载步骤

    (之前因为不知道偶电脑是因为安装了oracle后,才导致的长达两周的开机速度要足足10分钟,以前只有一分钟不到!可以想象oracle的服务启动的强大,知道后,偶果断立即卸载掉!) 一.在oracle1 ...

  10. 怎么用JS截取字符串中第一个和第二个字母间的部分？

    一.JS中用正则判断字符串是否有匹配正则的字符串部分,格式如下: /[a-zA-Z](.*?)[a-zA-Z]/.test('1a123d45678901a2') “.test”前面的部分是正则表达式 ...