19

アマゾンが有効CORSになっているので、これが可能かどうか疑問に思いました。

（クライアントブラウザ上の） htmlcanvasデータをに変換しsomethingてs3に直接アップロードできますか？

PUTアマゾンにリクエストできると確信していますが、それにはが必要Fileです。

base64エンコードされた画像データを取得することもできますが、これを画像としてクライアントブラウザからBlob保存する方法はありますか？S3

リクエストを行うために変換するcanvas方法や、Amazonがそれを理解して画像として保存する方法はありますか？FilePUTBlob

4

5 に答える 5

22

キャンバスからデータURLを取得し、それをS3にアップロードする実際の例を次に示します。

var dataUrl = canvas.toDataURL("image/jpeg");
var blobData = dataURItoBlob(dataUrl);
var params = {Key: "file_name", ContentType: "image/jpeg", Body: blobData};
bucket.upload(params, function (err, data) {});

dataURItoBlob：

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'});
}
于 2016-03-29T23:38:02.980 に答える
3

ブラウザからs3にデータをアップロードするための古いpostメソッドがあります

http://s3.amazonaws.com/doc/s3-example-code/post/post_sample.html

次に、このアイデアを使用して、 データURIをファイルに変換してからFormDataに追加しました

通常の代わりにPOST、Amazonへのformdataを使用したxhrリクエストがあります。これで完了です。

于 2012-12-22T06:45:16.337 に答える
1

私はこれを調査していて、この投稿を見つけるまであまり運がありませんでした：https ://github.com/aws/aws-sdk-js/issues/1712#issuecomment-329542614

AWSには、aws-sdkでbase64をデコードするユーティリティがあります：AWS.util.base64.decode（image）

簡単な解決策、そして私のために働いた。

于 2019-04-08T05:25:09.450 に答える
1

使用toBlob：

canvas.toBlob((blob) => {
  if (blob === null) return;
  bucket.upload({
    Key: "where/the/file/goes.jpg"
    ContentType: "image/jpeg",
    Body: blob,
  }, (err, data) => {});
}, "image/jpeg");
于 2020-06-11T00:51:12.980 に答える
-3

キャンバスを保存する最も簡単な方法は、base64に変換することです。

canvas.toDataURL();

または、引数を使用して画像タイプを設定できます。

canvas.toDataURL("image/png");
canvas.toDataURL("image/jpeg");
// etc

このライブラリもご覧ください：http ：//www.nihilogic.dk/labs/canvas2image/

于 2012-12-21T13:21:29.613 に答える