认知服务调用如何使用图片的DataURL

说明：

Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。认知服务的Rest API调用中图片只支持传入图片公网URL或本地图片的二进制流数组，并不支持直接上传DataURL。本文中，我将介绍如何巧妙的将Data URL转化为图片的二进制流数组，进而实现Rest请求调用。

---

核心转换（将base64转换成二进制数组）

function dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);
else
byteString = unescape(base64Data.split(',')[1]);
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});
}

完整示例程序

---

本示例程序调用中国版认知服务的OCR功能。图片的URL直接使用DataURL，通过转码完成测试调用。

---

    
    
                         


    

        OCR Test
        

        Detect faces
    
    

        

    
    

        
            Your browser does not support the HTML5 canvas tag.
        
    

测试结果：

更多参考链接：

DATA URL简介及DATA URL的利弊

JavaScript将base64图片转换成formData并通过AJAX提交的实现方法

图片在线编码BASE64

---

转载于:https://www.cnblogs.com/taro/p/8057988.html