直接上代碼

服務端代碼如下

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

微信開發+百度AI學習：植物識別