到 Blob 的数据 URI 会损坏映像

Data URI To Blob Corrupts Image

本文关键字：损坏 映像 URI 数据 Blob      更新时间：2023-09-26

我已经看到了很多关于这个问题的帖子和许多答案，但我不能完全让它工作。

我

有一个画布，我将其保存到 base 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 设置为 base 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进行开发。

读取位置 _i 处的字符代码，而不是i 。

  ia[_i] = byteString.charCodeAt(_i);
相关文章：