Canvas识别相似图片
<!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识别相似图片的更多相关文章
- 基于HTML5 Canvas实现的图片马赛克模糊特效
效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...
- Android实现OCR扫描识别数字图片之图片扫描识别
[Android实例] Android实现OCR扫描识别数字图片之图片扫描识别 Android可以识别和扫描二维码,但是识别字符串呢? google提供了以下解决方案用的是原来HP的相关资料. 可以吧 ...
- canvas生成遮罩图片
首先我们知道css3中增加了不少好用.好玩的css3样式可以使用.今天我们要说到是遮罩. 它的使用方式也不复杂,和background使用方式差不多.使用mask-image就 ...
- HTML5 Canvas前台压缩图片并上传到服务器
1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
- 以API方式调用C# dll,使用OneNote2013 sp1实现OCR识别本地图片
http://www.cnblogs.com/Charltsing/p/OneNoteOCRAPI.html OneNote2013 OCR API调用使用说明2019.4.17 使用说明:1.安装干 ...
- 用canvas给视频图片添加特效
Canvas制作视频图片特效 1. Canvas介绍 1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能. 具体 ...
- 微信小程序--canvas画布实现图片的编辑
技术:微信小程序 概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...
- canvas 2.0 图片绘制
绘制图片drawImage 2013.02.21 by 十年灯·一条评论 本文属于<html5 Canvas画图系列教程> 这里的绘制图片是指把一张现成的图片,绘制到Canvas上面. 有 ...
随机推荐
- poj1459 Power Network (多源多汇最大流)
Description A power network consists of nodes (power stations, consumers and dispatchers) connected ...
- Codeforces Round #274 Div.1 C Riding in a Lift --DP
题意:给定n个楼层,初始在a层,b层不可停留,每次选一个楼层x,当|x-now| < |x-b| 且 x != now 时可达(now表示当前位置),此时记录下x到序列中,走k步,最后问有多少种 ...
- 新手须知 C、C++和VC++之间的区别
本文目地 本文介绍的是C.C++.VC++ 三者之间的区别,也许作为初学者来说,会很容易混淆.希望通过本文的介绍,能够给你带来帮助. C语言 C语言是一种古老而又经久不衰的计算机程序设计语言,大约诞生 ...
- mysqli预处理和事务处理
1 应用环境 mysqli预处理功能(大量数据处理时使用) 2 步骤 a)mysqli连接数据库 $mysqli = new mysqli('localhost','root','root','chu ...
- React Native iOS环境搭建
前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废 ...
- 【转】【C++】ShellExecute, WinExec, CreateProcess 三者的区别
ShellExecute ShellExecute的功能是运行一个外部程序(或者是打开一个已注册的文件.打开一个目录.打印一个文件等等),并对外部程序有一定的控制. 有几个API函数都可以实现这些功能 ...
- 利用ViewHolder优化自定义Adapter的典型写法
1 public class MarkerItemAdapter extends BaseAdapter { private Context mContext = null; private List ...
- Redmine 项目管理工具----完全攻略
摘要: 此篇博客涉及 安装,插件修改,插件安装,代码显示,中文乱码,SVN配置等内容,几乎覆盖所有redmine基本功能. 本机环境: Redmine 版本: 3.2.0 本机环境: win7 64位 ...
- 基于Html5的移动端开发框架的研究
下面统计信息部分来自网络,不代表个人观点.请大家参考. 基于Html5移动端开发框架调查 序号 框架 简介 优点 缺 ...
- Web消息主体风格(Message Body Style)
对于Web HTTP编程模型来说,服务契约中作为操作的方法无须应用OperationContractAttribute特性,只需要根据需要应用WebGetAttribute与WebInvokeAttr ...