由於在開發過程中需要使用文字識別,由此學習了一下百度雲相關api。所獲直接就貼出來。
1.獲取文字識別的token
官方給出的token的有效期為1個月,可以本地將token存起來,當然也可以每次去重新獲取。
2.使用官方提供的文字識別api
(這里是通用文字識別的api接口為例,其他文字識別接口使用方式一致)
按照說明,樓主的請求寫成了這樣:
因為官方文檔明確說明了:image參數先是base64然后urlencode格式化。使用input[file]引入照片后,就一直在看urlencode是怎么回事,看了encodeURI,encodeURlComponent什么亂七八糟的東西一大堆,都沒有解決。最終解決方案就是:官方文檔不是很行,
直接使用的base64去掉base64的頭部即可。
修改前:
修改后: 直接使用 slice(23) 即可
樓主那動過的返回數據:
image format error 圖片格式錯誤
image empty 圖片為空
.
.
.
當然最后正確的結果: 基本的官方文檔上面的一致。
3. 移動端使用
直接調用手機的照相機
問題:現在的手機都有點強,像素有點高,照片大的要死要死的,所以為了更快,更流暢操作,就不得不對照片進行壓縮。
壓縮方式:使用canvas封裝的壓縮圖片的方法。該方法必須傳入imgUrl(圖片base64)。
function littleImg(imgUrl,height,width){
var img=new Image()
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
img.src=imgUrl
img.onload=function(){
// 圖片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// 最大尺寸限制
var maxWidth = width||200, maxHeight = height||200;
// 目標尺寸
var targetWidth = originWidth
var targetHeight = originHeight;
// 圖片尺寸超過400x400的限制
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > maxWidth / maxHeight) {
// 更寬,按照寬度限定尺寸
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
// canvas對圖片進行縮放
canvas.width = targetWidth;
canvas.height = targetHeight;
// 清除畫布
context.clearRect(0, 0, targetWidth, targetHeight);
// 圖片壓縮
context.drawImage(img, 0, 0, targetWidth, targetHeight);
return canvas.toDataURL("image/jpeg")
}
4. 處理手機照片旋轉90°的bug
使用的是 exif.js <script src="https://cdn.bootcss.com/exif-js/2.3.0/exif.min.js"></script>
需要在cavas繪制前使用,所以可以使用下面的代替3中的 context.drawImage(img, 0, 0, targetWidth, targetHeight);
// 處理手機拍照旋轉的bug
var orient = _g.getPhotoOrientation(img);
// alert(orient)
if (orient == 6) {
context.save();//保存狀態
context.translate(targetWidth / 2, targetHeight / 2);//設置畫布上的(0,0)位置,也就是旋轉的中心點
context.rotate(90 * Math.PI / 180);//把畫布旋轉90度
// 執行Canvas的drawImage語句
context.drawImage(img, - targetHeight / 2, - targetWidth / 2, targetHeight, targetWidth);//把圖片繪制在畫布translate之前的中心點,
context.restore();//恢復狀態
} else {
// 執行Canvas的drawImage語句
context.drawImage(img, 0, 0, targetWidth, targetHeight);
}
結語:有一個前端地址的網站推薦給大家:https://st219.gitee.io/forallmonkeys/#/frontEngineer/allUrls