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

所有这些代码对我来说似乎都很好，但是下载时生成的文件无法识别为有效图像。

我有一种感觉，我在数据网址中有逃避错误，但我找不到。

我正在使用Chrome Canary进行开发。

Answer 1

读取位置_i的charCode，而不是i。

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

Blob的数据URI破坏了图像

1 个答案: