これに関する多数の投稿と多数の回答を見てきましたが、うまく機能させることはできません。
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 を使用しています。