百度云--文字识别

由于在开发过程中需要使用文字识别，由此学习了一下百度云相关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

百度云--文字识别

猜你喜欢