1.通过网址识别在线图片

前端代码：

 点击检测按钮，调用相应的方法，然后简单的发起个axios网络请求
axios({url: 'http://localhost:8080/distinguish/url?params='+网络图片网址,methods: "post",}).then(function (response) {console.log(response);/* 返回成功后将结果渲染在页面 */},function(err){console.log(err);})

后端代码：

百度识图提供的源码模板，我们要做的就是将前端传来的值拼接，然后调用api

@RequestMapping("distinguish")
@RestController
@CrossOrigin
public class UserController {@RequestMapping(value = "url")public String test1(String params){String path = "https://aip.baidubce.com/rest/2.0/image-classify/v1/plant";ApiExplorerRequest request = new ApiExplorerRequest(HttpMethodName.POST, path);System.out.println("params"+params);// 设置header参数request.addHeaderParameter("Content-Type", "application/json;charset=UTF-8");// 设置query参数request.addQueryParameter("access_token", "自己的access_token");// 设置jsonBody参数// 百度识图提供的源码模板，我们要做的就是将前端传来的值拼接，然后调用apiString jsonBody = "url="+params;request.setJsonBody(jsonBody);ApiExplorerClient client = new ApiExplorerClient();try {ApiExplorerResponse response = client.sendRequest(request);// 返回结果格式为Json字符串System.out.println(response.getResult());return response.getResult();} catch (Exception e) {e.printStackTrace();}return null;}
}

后端返回结果：

2.通过本地上传文件识图

前端代码：

页面按钮：<div><!-- 按钮标签遮盖input自带的本地上传文件的样式，并调起文件类型的input的事件 --><button onclick="upload.click()" class="SecondBtn" style="color: white;">本地上传</button><!-- 这里的ref在vue中当标签id用，调用loadUrl方法，只接受图片类型的文件 --><input  ref="inputFile" @change="loadUrl()" accept="image/png,image/gif,image/jpeg"type="file" name="upload" id="upload" method="post" enctype="multipart/form-data"style="display: none;" />
</div>vue代码：loadUrl(){let myHeaders = new Headers();//用User-Agent来发送头请求myHeaders.append("User-Agent", "apifox/1.0.0 (https://www.apifox.cn)");let formdata = new FormData();//console.log输出formdata，游览器控制台输出为空，正常现象formdata.append("file", this.$refs.inputFile.files[0]);let requestOptions = {method: 'POST',headers: myHeaders,body: formdata,redirect: 'follow'};fetch("http://localhost:8080/distinguish/urlPath", requestOptions).then(response => response.json()).then(test => {console.log('result',test.result[0].name)/* 将返回结果渲染页面 */}).catch(error => {console.log('error', error)});将图片背景变为用户上传的图片let uurl = new Image()if (window.createObjectURL != undefined) { // basic    uurl.src = window.createObjectURL(this.$refs.inputFile.files[0])} else if (window.URL != undefined) { // mozilla(firefox)    uurl.src = window.URL.createObjectURL(this.$refs.inputFile.files[0])} else if (window.webkitURL != undefined) { // webkit or chrome    uurl.src =      window.webkitURL.createObjectURL(this.$refs.inputFile.files[0])}console.log('uurl',uurl.src)// Url为图片背景// <div :style="{backgroundImage: 'url(' + Url+ ')'}"></div>this.Url=uurl.src},

后端配置以及相关代码：

application.properties中的配置spring.servlet.multipart.max-file-size=3MB#这条路径是自己自定义的，用来存放上传后加工的图片文件
file.upload.path=D:/Program Files (x86)/Project/BackendPart/testImg/

@RequestMapping("distinguish")
@RestController
@CrossOrigin
public class UserController {@Value("${file.upload.path}")private String path;//创建日期函数，用来区分图片上传日期Date currentTime = new Date();SimpleDateFormat format = new SimpleDateFormat("yyyyMMdd HHmm");String dateString = format.format(currentTime);@RequestMapping(value = "urlPath",method = RequestMethod.POST)@ResponseBody//用MultipartFile 类型来接收文件public String test2(@RequestPart MultipartFile file) throws IOException{//获取文件路径String fileName = file.getOriginalFilename();//避免文件名相同，在文件后拼接个随机数int random_number = (int)(Math.random() * (1000 - 1 + 1) + 1);String filePath = path + dateString + random_number + fileName  ;//插件文件对象，将路径存放，没有文件就创建文件File dest = new File(filePath);//将源文件copy到目标文件file.getInputStream()->dest.toPath(),将上传的文件写到指定目录Files.copy(file.getInputStream(),dest.toPath());//以下为百度识图官方提供的代码模板String url = "https://aip.baidubce.com/rest/2.0/image-classify/v1/plant";System.out.println("filePath："+dest.getAbsolutePath());try{String imgUrl = dest.getAbsolutePath();//转码//FileUtil、Base64Util、URLEncoder等工具类下载//https://ai.baidu.com/file/470B3ACCA3FE43788B5A963BF0B625F3//https://ai.baidu.com/file/544D677F5D4E4F17B4122FBD60DB82B3//https://ai.baidu.com/file/C8D81F3301E24D2892968F09AE1AD6E2//https://ai.baidu.com/file/658A35ABAB2D404FBF903F64D47C1F72byte[] imgData = FileUtil.readFileByBytes(imgUrl);String imgStr = Base64Util.encode(imgData);String imgParam = URLEncoder.encode(imgStr,"UTF-8");String param = "image=" + imgParam;String accessToken="自己的access_token";// 设置jsonBody参数String result = HttpUtil.post(url, accessToken, param);return result;} catch (Exception e) {e.printStackTrace();}return null;}

到此，一个识图的小项目就这样完成了

调用百度识图api实现识图vue+springboot相关推荐

python 百度识图_python如何调用百度识图api
一.先去百度识别官网注册开通服务且获得ak和sk 二.代码模板 import cv2 import base64 import requests import numpy as np import t ...
python识图 web_python如何调用百度识图api
一.先去百度识别官网注册开通服务且获得ak和sk 链接:https://cloud.baidu.com/doc/Reference/s/9jwvz2egb 二.代码模板 import cv2 impo ...
python调用百度api判断两张图片是否相同_python如何调用百度识图api
一.先去百度识别官网注册开通服务且获得ak和sk 二.代码模板 import cv2 import base64 import requests import numpy as np import t ...
人脸识别（2）----调用百度人脸识别API
人脸识别(2)----调用百度人脸识别API 前言:之前人脸识别(1)中已经注册完百度智能云 .审核通过了离线人脸采集SDK.下载了安卓的slicense等.接下来就是找到并调用人脸识别的API了. ...
百度语音识别rest html,delphi调用百度语音识别REST API(示例代码)
delphi调用百度语音识别REST API -20160616 -感谢魔术猫和 DelphiTeacher 兄的帮助解决了返回中文乱码的问题! -注:语音的录音格式目前只支持评测8k/16k采样 ...
QT调用百度语音REST API实现语音合成
QT调用百度语音REST API实现语音合成 1.首先点击点击链接http://yuyin.baidu.com/docs/tts 点击access_token,获取access_token,里面有详细 ...
【python】调用百度智能云API实现手写文字识别
注:本文系湛江市第十七中学星火创客团队及岭南师范学院物联网俱乐部原创部分参赛项目,转载请保留声明文章目录调用百度智能云API实现python识别手写文字一.准备工具电脑端准备: 1.pytho ...
调用百度文字识别API
调用百度文字识别API 一.实验目的 1.构建一个文字识别系统: 2.利用Python实现文字识别; 3.掌握百度AI平台的使用: 4.掌握调用百度API实现文字识别. 二.实验原理登录百度智能云a ...
调用百度人脸识别API
调用百度人脸识别API 用POSTMAN工具利用URL向百度智能云发送post请求用python调用百度人脸识别用POSTMAN工具利用URL向百度智能云发送post请求首先在百度云平台创建一个 ...
Python调用百度通用翻译api
Python调用百度通用翻译api 首先首先首先需要先去百度翻译api官网注册成为开发者,然后申领一下通用翻译的appid和密钥. 附上代码,默认为源语言自动识别,效果感觉不是太好,目标语言默认为 ...

调用百度识图api实现识图vue+springboot

1.通过网址识别在线图片

2.通过本地上传文件识图

调用百度识图api实现识图vue+springboot相关推荐

最新文章

热门文章