【猫图识别】【HTML】一张猫图,告诉你猫咪在哪!

简介: 【猫图识别】【HTML】一张猫图,告诉你猫咪在哪!

一、前言


突发奇想,我能不能根据一张图片,就识别到图片是否有猫咪,并且这个地方是在哪里?


二、准备工作


旷视Face小牛翻译 所提供的API、一张猫咪图片!


三、准备工作的流程


旷视Face 使用API流程


官方教程:场景与物体识别的API使用教程注册并登录控制台


——》创建应用API Key(应用管理)——》获取API Key、API Secret


微信截图_20220519182756.png


请求地址:


<!-- 需要POST请求-->
https://api-cn.faceplusplus.com/imagepp/beta/detectsceneandobject?api_key=你旷视的API Key&api_secret=你旷视的API Secret&image_url=你的图片地址


小牛翻译 使用API流程


(ps:目的是翻译旷视返回的结果(英文) 进行翻译)


官方流程:注册流程获取APIKEY流程测试APIKEY流程


帐号注册并登录控制台——》按照流程获取流量——》拿到提供的apikey


微信截图_20220519182806.png


请求地址:


http://api.niutrans.com/NiuTransServer/translation?to=翻译方向语言&from=源方向语言&src_text=翻译内容&apikey=你的apikey


其他工作流程


自行找一张猫咪照片,也可使用笔者提供的猫咪照片地址:nanfangzhe.gitee.io/cat-picture….

微信截图_20220519182816.png


四、代码与测试


核心代码


var niutransUrl = "http://api.niutrans.com/NiuTransServer/translation";
    var faceUrl = "https://api-cn.faceplusplus.com/imagepp/beta/detectsceneandobject";
    var param = {
         // 这里的param为参数---键值对方式
        api_key:'HOTcabIupEcx19GrvVk_fpJpPmNeDAwz',    // 需要改的地方1️⃣
        api_secret:'MOvF_DapqoMhhMUxBuwYcfPtA4OY_kzG', // 需要改的地方2️⃣
        image_url:'https://nanfangzhe.gitee.io/cat-picture/database/images/cat3.png' // 测试的图片地址
    }
    $.ajaxSettings.async = true;
     $.post(faceUrl, param, function(data){
        // console.log("这是请求成功的");
        // console.log(data);
        // console.log(data.objects[0].value);
        // console.log(data.scenes[0].value);
        if(data.objects.length == 0){
            console.log("图片识别出错啦!");
            return;
        }
        var translateParam = {
            // 这里的param为参数---键值对方式
            to:'zh',
            from:'en',
            src_text:data.objects[0].value,
            apikey:'8ab87227fb9bedd396808aac58bb9257' // 需要改的地方3️⃣
        }
        $.getJSON(niutransUrl, translateParam, function(translateData){
            // console.log(translateData);
            if(translateData.tgt_text.indexOf("猫") == -1){
                console.log("你的图片不是猫,是:", translateData.tgt_text);
                return;
            }
            console.log("你的图片是猫");
        });
        if(data.scenes.length == 0){
            console.log("当前该场所,图片识别不出来:(");
            return;
        }
        translateParam.src_text = data.scenes[0].value;
        $.getJSON(niutransUrl, translateParam, function(translateData){
            // console.log(translateData);
            console.log("你的猫现在在:",translateData.tgt_text);
        });
    });
    $.ajaxSettings.async = false;


完整代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猫图识别   南方者 - 掘金</title>
</head>
<body>
    <center>
        <h1>猫图识别   南方者 - 掘金</h1>
    </center>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script>
    console.log("***************************************");
    console.log("*********测试Demo 南方者 - 掘金*********");
    console.log("https://juejin.cn/user/2840793779295133");
    console.log("***************************************");
    var niutransUrl = "http://api.niutrans.com/NiuTransServer/translation";
    var faceUrl = "https://api-cn.faceplusplus.com/imagepp/beta/detectsceneandobject";
    var param = {
         // 这里的param为参数---键值对方式
        api_key:'HOTcabIupEcx19GrvVk_fpJpPmNeDAwz',    // 需要改的地方1️⃣
        api_secret:'MOvF_DapqoMhhMUxBuwYcfPtA4OY_kzG', // 需要改的地方2️⃣
        image_url:'https://nanfangzhe.gitee.io/cat-picture/database/images/cat3.png'
    }
    $.ajaxSettings.async = true;
     $.post(faceUrl, param, function(data){
        // console.log("这是请求成功的");
        // console.log(data);
        // console.log(data.objects[0].value);
        // console.log(data.scenes[0].value);
        if(data.objects.length == 0){
            console.log("图片识别出错啦!");
            return;
        }
        var translateParam = {
            // 这里的param为参数---键值对方式
            to:'zh',
            from:'en',
            src_text:data.objects[0].value,
            apikey:'8ab87227fb9bedd396808aac58bb9257' // 需要改的地方3️⃣
        }
        $.getJSON(niutransUrl, translateParam, function(translateData){
            // console.log(translateData);
            if(translateData.tgt_text.indexOf("猫") == -1){
                console.log("你的图片不是猫,是:", translateData.tgt_text);
                return;
            }
            console.log("你的图片是猫");
        });
        if(data.scenes.length == 0){
            console.log("当前该场所,图片识别不出来:(");
            return;
        }
        translateParam.src_text = data.scenes[0].value;
        $.getJSON(niutransUrl, translateParam, function(translateData){
            // console.log(translateData);
            console.log("你的猫现在在:",translateData.tgt_text);
        });
    });
    $.ajaxSettings.async = false;
</script>
</html>


测试情况


微信截图_20220519182834.png



目录
相关文章
|
9天前
|
小程序
微信小程序中识别HTML标签的方法
微信小程序中识别HTML标签的方法
|
6月前
|
JSON C++ 数据格式
VS Code中将 “ .art “ 文件识别为 “ .html “ 文件
VS Code中将 “ .art “ 文件识别为 “ .html “ 文件
45 0
|
6月前
|
移动开发 前端开发
如何识别 String 里的 ‘\r\n‘ 让 HTML换行显示
如何识别 String 里的 ‘\r\n‘ 让 HTML换行显示
117 0
|
机器学习/深度学习 算法
HTML资讯页识别算法
目前爬虫会爬取很多国际站点的HTML页面,包含各种不同类型的站点,如站点首页、论坛页、资讯页、列表页、视频页、下载页、图集页等等。
757 0
|
1天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
4 1
|
9天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
23 0
HTML5/CSS3粒子效果进度条代码
|
9天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
28 1
|
9天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
9天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。