微信开发+百度AI学习：植物识别

Posted 2020-11-06 小太阳Sunny

直接上代码

服务端代码如下

private static readonly Baidu.Aip.ImageClassify.ImageClassify client = new Baidu.Aip.ImageClassify.ImageClassify(ApiConfig.APIKey, ApiConfig.SecretKey);
/// <summary>
/// 植物识别
/// </summary>
/// <param name="filesrc"></param>
public PlantModel PlantDetect(string filesrc)
{
    var image = File.ReadAllBytes(filesrc);
    var result = client.PlantDetect(image);
    return GetPlant(result);
}

/// <summary>
/// 植物识别
/// </summary>
/// <param name="serverId"></param>
/// <returns></returns>
public JsonResult PlantDetect(string serverId = "")
{
    string filename = System.Web.HttpContext.Current.Server.MapPath("/Static/img/demoplant.jpg");
    if (!string.IsNullOrWhiteSpace(serverId))
    {
        filename = GetFileName(serverId);
    }
    var data = imageClassify.PlantDetect(filename);
    return Json(data, JsonRequestBehavior.AllowGet);
}
/// <summary>
/// 下载微信图片
/// </summary>
/// <param name="serverId">微信返回的图片的服务器端ID</param>
/// <returns></returns>
private string GetFileName(string serverId)
{
    string filename = System.Web.HttpContext.Current.Server.MapPath("/upload/img/");
    if (!System.IO.Directory.Exists(filename))
        System.IO.Directory.CreateDirectory(filename);

    string date = DateTime.Now.ToString("yyyy-MM-dd");
    filename += date + "/";

    if (!System.IO.Directory.Exists(filename))
        System.IO.Directory.CreateDirectory(filename);

    string guid = Guid.NewGuid().ToString();
    filename += $"/{guid}.jpg";

    WeixinUtility.GetVoice(serverId, filename);
    return filename;
}

前端代码如下

@{
    if (ViewData["type"].ToString() == "1")
    {
        ViewBag.Title = "植物识别";
    }else if (ViewData["type"].ToString() == "2")
    {
        ViewBag.Title = "动物识别";
    }
    else if (ViewData["type"].ToString() == "3")
    {
        ViewBag.Title = "车型识别";
    }
    Layout = "~/Views/Shared/_LayoutWeUI.cshtml";
}

<div class="page js_show" id="app" v-cloak>
    <div class="page__bd">
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <img v-if="localId.length>0" :src="localId" style="max-width:300px;max-height:300px;" />
                    <img v-else :src="imgsrc" style="max-width:300px;max-height:300px;" />
                </div>
            </div>
        </div>
        <div class="weui-cells__title">识别结果</div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>名称</p>
                </div>
                <div class="weui-cell__ft">置信度</div>
            </div>
            <div class="weui-cell" v-for="(k,index) in result">
                <div class="weui-cell__bd">
                    <p>{{k.name}}</p>
                </div>
                <div class="weui-cell__ft">{{getscore(k.score)}}</div>
            </div>
        </div>
        <div style="margin-bottom:60px;"></div>
        <div style="display: flex;position: fixed;z-index: 500;bottom: 0px;width: 100%;margin: 5px 0px;">
            <a class="weui-btn weui-btn_primary" href="javascript:" @@click="uploader">上传{{title}}图片</a>
        </div>
    </div>
</div>
@section PageJS{
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                imgsrc: "",
                localId: "",
                serverId: "",
                flag: 1,
                recorder: null,
                title: "",
                url: "",
                result:[]
            },
            mounted: function () {
                var that = this;
                var type =@ViewData["type"];
                if (type == 1) {
                    this.title = "植物";
                    this.imgsrc = "/Static/img/demoplant.jpg";
                    this.url = \'@Url.Action("PlantDetect", "ImageRecognition")\';
                }
                else if (type == 2) {
                    this.title = "动物";
                    this.imgsrc = "/Static/img/demoanimal.jpg";
                    this.url = \'@Url.Action("AnimalDetect", "ImageRecognition")\';
                }
                else if (type == 3) {
                    this.title = "车型";
                    this.imgsrc = "/Static/img/democar.jpg";
                    this.url = \'@Url.Action("CarDetect", "ImageRecognition")\';
                }
                this.detect();
            },
            methods: {
                detect() {
                    var that = this;
                    $.sunloading.show("正在识别");
                    $.ajax({
                        url: this.url,
                        dataType: "json",
                        type: "post",
                        data: { serverId: this.serverId },
                        success: function (result) {
                            $.sunloading.close();
                            console.log("识别结果：" + result);
                            that.result = result.result;
                        },
                        error: function (e) {
                            console.log(e);
                        }
                    });
                },
                getscore(score) {
                    return (score * 100).toFixed(2) + "%";
                },
                uploader() {
                    var that = this;
                    wx.chooseImage({
                        count: 1, // 默认9
                        sizeType: [\'compressed\'], // 可以指定是原图还是压缩图，默认二者都有
                        sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机，默认二者都有
                        success: function (res) {
                            console.log(res.localIds);
                            that.localId = res.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                            that.uploadImage();
                        }
                    });
                },
                uploadImage() {
                    var that = this;
                    wx.uploadImage({
                        localId: that.localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            that.serverId = res.serverId; // 返回图片的服务器端ID
                            that.detect();
                        }
                    });
                }
            }
        });
    </script>
}

运行效果如下

Git源码查看请移步https://github.com/yliml/BaiduAI/wiki