<!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. Alipay秘钥问题

    有三种秘钥一个是应用公钥 一个是支付宝公钥 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco } span.s1 { text-d ...

  2. WinForm跨窗体传值

    1.另一窗体建公共变量listdataRow public List<DataGridViewRow> listdataRow = new List<DataGridViewRow& ...

  3. monkey之三：monkey测试测略（摘抄）

    一.分类 Monkey测试针对不同的对象,不同的目的,采用不同的测略方案. 测试类型分为: 应用程序的稳定性测试和压力测试 测试对象分为: 单个APK和多个APK集合 测试目的分为: 解决问题的测试( ...

  4. Android Studio导入项目问题小结

    1. import project 之后一直停留在 building 界面 解决方案: 1.随便找一个你能运行的as项目 2.打开gradle-wrapper.properties,文件目录:项目/g ...

  5. Android 登录界面与首页的设计

    全屏效果 //取消标题,取消状态栏 this.requestWindowFeature(Window.FEATURE_NO_TITLE); this.getWindow().setFlags(Wind ...

  6. Log4Net记录日志的使用

    Log4net 基本样式: <log4net> <appender name="LogFileAppender" type="log4net.Appen ...

  7. 安装Kafka

    1.默认安装好zookeeper和scala2.下载安装包,解压 tar -zxvf kafka_2.11-0.9.0.1.tgz kafka_2.11-0.9.0.13.配置环境变量 vim /et ...

  8. BZOJ2342 Manacher + set

    题一:别人介绍的一道题,题意是给出一个序列,我们要求出一段最常的连续子序列,满足:该子序列能够被平分为三段,第一段和第二段形成回文串,第二段和第三段形成回文串. 题二:BZOJ2342和这题非常的相似 ...

  9. wpf，能够复制文字 及自动识别URL超链接的TextBlock

    using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...

  10. http错误代码含义中英文对照

    Http错误代码含义中文 概要当用户试图通过 HTTP 或文件传输协议 (FTP) 访问一台正在运行 Internet 信息服务 (IIS) 的服务器上的内容时,IIS 返回一个表示该请求的状态的数字 ...