百度雲--文字識別


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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM