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

一起用代码吸猫!本文正在参与【喵星人征文活动】

一、前言

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

二、准备工作

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

三、准备工作的流程

旷视Face 使用API流程

官方教程:场景与物体识别的API使用教程 注册并登录控制台
——》创建应用API Key(应用管理)——》获取API Key、API Secret image.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 image.png 请求地址:

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

其他工作流程

自行找一张猫咪照片,也可使用笔者提供的猫咪照片地址:nanfangzhe.gitee.io/cat-picture…. image.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>
复制代码

测试情况

image.png

【最后】

  感谢你看到最后,如果你持有不同的看法,欢迎你在文章下方进行留言、评论。
我是南方者,一个热爱计算机更热爱祖国的南方人。
  如果文章内容仅供学习参考,如有侵权,非常抱歉,请立即联系作者删除。

猜你喜欢

转载自juejin.im/post/7032670502858686495
今日推荐