ブロブにデータURIが壊れる画像

Question

私はこれと数多くの回答について多くの記事を見てきましたが、それをうまく動作させることはできません。

私はキャンバスを使用して、基になる64のエンコードされたイメージを保存しています。

capture: function(callback) { 
    var ctx, imgData, src; 
    ctx = canvas.getContext("2d"); 
    ctx.drawImage(video, 0, 0, video.width, video.height); 
    imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
    ctx.putImageData(imgData, 0, 0); 
    src = canvas.toDataURL("image/jpeg"); 
    return src; 
    } 

私は、ベース64でエンコードされた文字列に画像srcを設定することができ、すべてが素晴らしい作品。それをブロブに変換してダウンロードできるようにしようとすると、ダウンロードしたファイルをイメージ形式として読み取ることができなくなります。

saveImage: function(dataURI) { 
    var ab, bb, blob, byteString, i, ia, mimeString, _i, _len; 
    if (dataURI.split(',')[0].indexOf('base64') >= 0) { 
     byteString = atob(dataURI.split(',')[1]); 
    } else { 
     byteString = unescape(dataURI.split(',')[1]); 
    } 
    mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; 
    ab = new ArrayBuffer(byteString.length); 
    ia = new Uint8Array(ab); 
    for (_i = 0, _len = byteString.length; _i < _len; _i++) { 
     i = byteString[_i]; 
     ia[i] = byteString.charCodeAt(i); 
    } 
    bb = new BlobBuilder(); 
    bb.append(ab); 
    blob = bb.getBlob(mimeString); 
    return saveAs(blob); 
    } 

このコードはすべて問題はないようですが、結果として得られるファイルはダウンロード時に有効な画像として認識されません。

私はデータURLに間違ったエスケープがあると感じていますが、どこに見つけることができません。

Chrome Canaryを開発用に使用しています。

Answer 1

位置_iのcharCodeを参照してください。iではありません。

ia[_i] = byteString.charCodeAt(_i);