<!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>