私はHeroku（cedar env）にレールアプリを持っています。キャンバスデータをtoDataURL()メソッドを使ってイメージにレンダリングするページがあります。私は返されたbase64画像データ文字列をJavaScriptを使ってs3に直接アップロードしようとしています（サーバー側をバイパスしています）。問題は、これはファイルではないので、base64でエンコードされたデータを直接S3にアップロードしてそこにファイルとして保存するにはどうすればいいですか？JavaScriptのみを使用してbase64でエンコードされた画像データをS3にアップロードするにはどうすればよいですか？
私はこれを行う方法を発見しました。たくさんの検索の後、さまざまなチュートリアルを見てください。
データURIをBLOBに変換し、CORSを使用してそのファイルをS3にアップロードする必要があります。複数のファイルで作業している場合は、別々のXHR要求があります。
私は、誰もが気になら、直接CORS（Convert Data URI to Blob）
function dataURItoBlob(dataURI) {
var binary = atob(dataURI.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}
OPが既にこれを解決しているかどうかはわかりませんが、私は非常によく似た機能を使っています。ちょっとした研究をするにあたって、私はこれらの記事を読んで助けになるかもしれません。
を使用してS3にアップロードすることができブロブにあなたのデータURIをオンこの機能が見つかりました：ここcoffescriptです上記の関数のバージョン！
convertToBlob = (base64) ->
binary = atob base64.split(',')[1]
array = []
for i in [0...binary.length]
array.push binary.charCodeAt i
new Blob [new Uint8Array array], {type: 'image/jpeg'}
Jamcoopeの回答は非常に優れていますが、ブロブコンストラクタはすべてのブラウザでサポートされているわけではありません。最も顕著なのはアンドロイド4.1とアンドロイド4.3です。 Blobポリフィルがありますが、xhr.send(...)はポリフィルでは機能しません。最高の賭けは次のようなものです：
var u = dataURI.split(',')[1],
binary = atob(u),
array = [];
for (var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
var typedArray = Uint8Array(array);
// now typedArray.buffer can be passed to xhr.send