<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像识别</title>
<script src="../js/jquery.js"></script>
</head>
<body>
<canvas id="canvas" style="display: none;"></canvas>
<script>
function rgb(objs, fn) {
var obj = objs.obj || objs,
obj = obj || null,
fn = fn || new Function(),
_thisCanvas = document.createElement('canvas'),
canvas = _thisCanvas,
ctx = canvas.getContext('2d'),
img = null,
CY_index = objs.index || 100;//默认抽样数据未100;
if (obj == null) {
return new Error("参数不能为空");
} else {
switch (typeof obj) {
case "object":
img = obj;
break;
case "string":
img = new Image();
img.src = obj;
break;
};
};
img.onload = function (e) {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var w = objs.w || img.width,
h = objs.h || img.height;
var rgb = [];
var xy = [];
if(objs.xy){
for(var i = 0 ; i < objs.xy.length ; i++){//抽样数据匹配
var xs = objs.xy[i].x;
var ys = objs.xy[i].y;
xy.push({
x:xs,
y:ys
});
var imgData = ctx.getImageData(xs, ys, w, h).data;
imgData.forEach(function (e,i) {
rgb.push(e);
});
};
}else{
for(var i = 0 ; i < CY_index;i++){//CY_index:随机抽样100个像素点
var xs = parseInt(Math.random()*(img.width/2)+(img.width/4));
var ys = parseInt(Math.random()*(img.height/2)+(img.height/4));
xy.push({
x:xs,
y:ys
});
var imgData = ctx.getImageData(xs, ys, w, h).data;
imgData.forEach(function (e,i) {
rgb.push(e);
});
};
};
var index = 0,
key = 0,
bool = true,
newrgb = [];
rgb.forEach(function (i, e) {
if (bool) {
newrgb[key] = new Array();
bool = false;
};
newrgb[key].push(i);
if (index == 3) {
index = -1;
key++;
bool = true;
};
index++;
});
fn(newrgb,xy);
};
};
rgb.init = function (obj,fn) {
var _this = this;
obj = obj || {};
fn = fn || new Function();
obj.index = obj.index || 100;//默认抽样数据个数
obj.w = obj.w || 1;//像素大小
obj.h = obj.h || 1;//像素大小
_this({obj:obj.obj,w:obj.w,h:obj.h,index:obj.index
},function (e,xy) {
var data = e;
var V = obj.v || 80;//默认匹配率80
obj.objData.forEach(function (ed,ei) {
_this({obj:ed,w:obj.w,h:obj.h,xy:xy,index:obj.index},function (E) {
var dataB = E;
var index = 0;
data.forEach(function (A,i) {
if(A[0] == dataB[i][0] && A[1] == dataB[i][1] && A[2] == dataB[i][2]){
index ++;
};
});
retData = {};//回调数据
if(index >= V){//匹配率比较
retData.meg = "匹配成功.";
retData.obj = ed;
retData.code = 200;
}else{
retData.meg = "匹配失败.";
retData.code = 500;
}
fn(retData);
});
});
obj.fn = obj.fn || new Function();//匹配结束回调
obj.fn();
});
}
var imgData = [
"img/1.jpg",
"img/1-1.jpg",
"img/2.jpg",
"img/2-1.jpg",
"img/3.jpg",
"img/3-1.jpg",
"img/4.jpg",
"img/4-1.jpg",
"img/5.jpg",
"img/5-1.jpg",
"img/6.jpg",
"img/6-1.jpg",
"img/7.jpg",
"img/7-1.jpg",
"img/8.jpg",
"img/8-1.jpg",
"img/8-2.jpg",
"img/8-3.jpg",
"img/8-4.jpg",
"img/8-5.jpg",
"img/8-6.jpg",
"img/8-7.jpg",
"img/8-8.jpg",
"img/9.jpg",
"img/9-1.jpg",
"img/10.jpg",
"img/11.jpg",
];
rgb.init({
obj:"img/8.jpg",//需匹配对象,必填
objData:imgData,//查询数据,必填
w:1,//像素大小,可选
h:1,//像素大小,可选
v:100,//匹配率,可选
index:100,//匹配抽样,可选
fn:function () {//匹配完成回调,可选
//.....
}
},function (e) {//匹配回调
if(e.code == 200){
console.log(e.obj);
$("body").append('<img src="'+e.obj+'"/>');
};
}); </script>
</body>
</html>

web图片识别的更多相关文章

  1. 1个小时!从零制作一个! AI图片识别WEB应用!

    0 前言 近些年来,所谓的人工智能也就是AI. 在媒体的炒作下,变得神乎其神,但实际上,类似于图片识别的AI,其原理只不过是数学的应用. 线性代数,概率论,微积分(著名的反向传播算法). 大家觉得这些 ...

  2. 【基于WPF+OneNote+Oracle的中文图片识别系统阶段总结】之篇三:批量处理后的txt文件入库处理

    篇一:WPF常用知识以及本项目设计总结:http://www.cnblogs.com/baiboy/p/wpf.html 篇二:基于OneNote难点突破和批量识别:http://www.cnblog ...

  3. 初探机器学习之使用百度AI服务实现图片识别与相似图片

    一.百度云AI服务 最近在调研一些云服务平台的AI(人工智能)服务,了解了一下阿里云.腾讯云和百度云.其中,百度云提供了图像识别及图像搜索,而且还细分地提供了相似图片这项服务,比较符合我的需求,且百度 ...

  4. 使用阿里云的图片识别成表格ocr(将图片表格转换成excel)

    为了简便财务总是要对照着别人发来的表格图片制作成自己的表格 图片识别 识别成表格 表格识别 ocr 使用阿里云api 购买(印刷文字识别-表格识别) https://market.aliyun.com ...

  5. Python实现图片识别加翻译【高薪必学】

    Python使用百度AI接口实现图片识别加翻译 另外很多人在学习Python的过程中,往往因为没有好的教程或者没人指导从而导致自己容易放弃,为此我建了个Python交流.裙 :一久武其而而流一思(数字 ...

  6. 千呼万唤,web人脸识别登录完整版来了,这样式我爱了

    大家好,我是小富~ 在我最开始写文章的时候曾经写过一篇文章 基于 Java 实现的人脸识别功能,因为刚开始码字不知道写点什么,就简单弄了个人脸识别的Demo. 但让我没想到的是,在过去的一年里有好多好 ...

  7. 【Machine Learning】KNN算法虹膜图片识别

    K-近邻算法虹膜图片识别实战 作者:白宁超 2017年1月3日18:26:33 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...

  8. 【基于WPF+OneNote+Oracle的中文图片识别系统阶段总结】之篇一:WPF常用知识以及本项目设计总结

    篇一:WPF常用知识以及本项目设计总结:http://www.cnblogs.com/baiboy/p/wpf.html 篇二:基于OneNote难点突破和批量识别:http://www.cnblog ...

  9. 【基于WPF+OneNote+Oracle的中文图片识别系统阶段总结】之篇二:基于OneNote难点突破和批量识别

    篇一:WPF常用知识以及本项目设计总结:http://www.cnblogs.com/baiboy/p/wpf.html 篇二:基于OneNote难点突破和批量识别:http://www.cnblog ...

随机推荐

  1. 【转】Js获取当前日期时间及格式化操作

    (转自:http://www.cnblogs.com/qinpengming/archive/2012/12/03/2800002.html) var myDate = new Date(); myD ...

  2. python之路:Day03 --- Python基础3 >>函数

    本节内容 1.函数基本语法及特性 2.参数 3.局部变量与全局变量 4.返回值 嵌套函数 5.递归 6.匿名函数 7.高阶函数 8.内置函数 一.函数基本语法及特性 区别 面向过程编程:根据业务逻辑从 ...

  3. 【Java EE 学习 70 下】【数据采集系统第二天】【Action中User注入】【设计调查页面】【Action中模型赋值问题】【编辑调查】

    一.Action中User注入问题 Action中可能会经常用到已经登陆的User对象,如果每次都从Session中拿会显得非常繁琐.可以想一种方法,当Action想要获取User对象的时候直接使用, ...

  4. 【DWR系列06】- DWR日志及js压缩

    img { border: solid 1px } 一.日志 DWR依赖 Apache Commons Logging,可以使用log4j实现日志记录功能. 1.1 日志简介 和其他日志框架一样,当设 ...

  5. IMD中一些JS方法总结

    1,日期格式化(如格式成2013-12-27 15:30,new Date().format("yyyy-MM-dd hh:mm:ss"),这种格式在safari浏览器上会出问题, ...

  6. 【leetcode】Palindrome Number

    题目简述: Determine whether an integer is a palindrome. Do this without extra space. Some hints: Could n ...

  7. CentOS Linux服务器安全设置

    转自:http://www.osyunwei.com/archives/754.html 引言: 我们必须明白:最小的权限+最少的服务=最大的安全 所以,无论是配置任何服务器,我们都必须把不用的服务关 ...

  8. Unity IOS Build的Graphics API最好是固定Opengl ES 2.0

    不要选择Automatic也不要选择Metal,因为这个选项可能会导致app在Iphone6上出现crash. 一个类似的crash堆栈: http://stackoverflow.com/quest ...

  9. ubuntu14 备份

    备份命令 # tar cvpjf backup.tar.bz2 –exclude=/proc –exclude=/lost+found –exclude=/backup.tar.bz2 –exclud ...

  10. window10 office 手工完全卸载

    在地址栏输入itellyou,点击第一个搜索结果,可以从微软官方网站下载office安装. 一下是一点需要注意到的地方: 本次安装的是office2016其它类似 下载解压有的目录结构: 如果你是x6 ...