【猫图识别】【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



目录
打赏
0
0
0
0
0
分享
相关文章
VS Code中将 “ .art “ 文件识别为 “ .html “ 文件
VS Code中将 “ .art “ 文件识别为 “ .html “ 文件
134 0
HTML资讯页识别算法
目前爬虫会爬取很多国际站点的HTML页面,包含各种不同类型的站点,如站点首页、论坛页、资讯页、列表页、视频页、下载页、图集页等等。
896 0
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问