ArrayBuffer转Base64

直接先把方法贴出来(参考了Stack Overflow)

function transformArrayBufferToBase64 (buffer) {
    var binary = '';
    var bytes = new Uint8Array(buffer);
    for (var len = bytes.byteLength, i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
}

下面解释下方法中用到的一些类型(参考MDN)

  • ArrayBuffer

    ArrayBuffer对象被用来表示一个通用的,固定长度的二进制数据缓冲区。

    但是,我们并不能直接操作ArrayBuffer,需要先把它转换成TypedArray类型或者DataView类型才能使用。

  • TypedArray

    简单来说就是更详细,类型更明确的ArrayBuffer

  • Uint8Array

    Uint8Array 就是一种 TypedArray,无符号整形数组。

  • Base64

    不想贴官方介绍了,我们只要知道这是个编码规则就行了。有两个重要的方法:encode - btoa(stringToEncode) 和 decode - atob(encodedData)。
    atob 接受的参数肯定就是base64的编码,但是 btoa 接受的参数是有限制的,可以用下面的方法对
    btoa 方法进行封装(封装后可以接收中文和特殊符号)。

    function utoa(str) {
        return window.btoa(unescape(encodeURIComponent(str)));
    }
    

有哪些方法会产生上面的类型?

  • HTMLCanvasElement.toDataURL(),返回一个包含 base64 编码的字符串
  • CanvasRenderingContext2D.getImageData(),返回一个 ImageData 类型,来自 Uint8ClampedArray,而 Uint8ClampedArray 则是上文提到的 TypedArray 中的一种

你可能感兴趣的:(ArrayBuffer转Base64)