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