如何从前端读取图片并处理二进制数据

前端时间搞了个小转码，放在后台，但是特别占带宽，想着能不能从前台把这个事搞定呢？读取图片的二进制，然后将字节流处理后重新生成图片展示处理啊。

需求很简单，页面选择图片，然后获取图片，读取字节码，异或一个值后，然后重新生成图片在页面上显示。

    var reader = new FileReader();
    reader.readAsArrayBuffer(file);//file 源文件
    
    reader.onload = function(bf) {
        var content = new DataView(this.result);
        for (var i = 0; i < content.byteLength; i++) {
            var br = content.getInt8(i) ^ coder;
            content.setInt8(i, br);
        }
        var binary = '';
        var bytes = new Uint8Array(content.buffer);
        var len = bytes.byteLength;
        for (var i = 0; i < len; i++) {
            binary += String.fromCharCode(bytes[i]);
        }
        var str = window.btoa(binary); 
         //将图片转成base64字符串
        var img = new Image();
        img.src = 'data:image/png;base64,' + str;
    ｝

以上是核心代码，主要是通过DataView 这个对象，获取他的byte数组，然后进行处理，再从Unit8Array组装回来。