微信開發+百度AI學習:植物識別
阿新 • • 發佈:2018-05-17
map 上傳 image function for http else if his behavior
直接上代碼
服務端代碼如下
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學習:植物識別