百度雲--文字識別

 由於在開發過程中需要使用文字識別，由此學習了一下百度雲相關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