Data URI To Blob Corrupts Image

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; 
    } 

Затем я могу установить изображение src в базовую кодированную строку 64, и все отлично работает. Когда я пытаюсь преобразовать это в blob, поэтому я могу загрузить его, загруженный файл затем нечитабельно как формат изображения.

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

Прочитать charCode в позиции _i, а не i.

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