首页写一个调用百度API 并可直接使用的OCR识别前端页面代码

写一个调用百度API 并可直接使用的OCR识别前端页面代码

时间: 2024-01-24 18:19:47 浏览: 107

以下是一个使用百度API进行OCR识别的前端页面代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>OCR识别</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>OCR识别</h1> <form> <label for="image">上传图片：</label> <input type="file" id="image" accept="image/*"><br><br> <button type="button" id="submit">识别</button> </form> <div id="result"></div> <script> $('#submit').on('click', function () { // 获取图片文件 var file = $('#image')[0].files[0]; if (!file) { alert('请选择图片'); return; } // 将图片转为base64编码 var reader = new FileReader(); reader.onload = function () { var base64 = this.result.split(',')[1]; // 调用百度API进行OCR识别 $.ajax({ url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic', type: 'POST', data: { image: base64 }, headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function (res) { var words = res.words_result.map(function (item) { return item.words; }); $('#result').text(words.join('\n')); }, error: function () { alert('识别失败'); }, beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', '百度API的access_token'); } }); } reader.readAsDataURL(file); }); </script> </body> </html> ``` 需要注意的是，在代码中需要将`Authorization`请求头中的`百度API的access_token`替换为自己的百度API的access token。此外，由于该API为付费接口，需要先在百度AI开放平台申请并开通OCR识别服务。

阅读全文