JavascriptでイメージをロードしてHTTP POSTで取得したデータをロードする方法はありますか？

Question

AJAXを使用してHTTP POST経由でイメージファイルを要求し、HTMLでそのデータを持つ新しいイメージを作成する方法はありますか？あなたはIMGタグでこれを行うことはできないので、Image JavaScriptオブジェクトでそれを行うことは可能ですか？

Answer 1

はいそれが可能です。

サーバスクリプトが画像ファイルを開き、文字列をbase64文字列としてエンコードすると、ほぼすべてのブラウザ（IE7以下を除く）がそれを処理できます。例えば：

jQuery('<img>', { 
    src: 'data:image/jpeg;base64,' + someBase64EncodedString 
}).appendTo(document.body); 

この現実世界の例では、ここで見つけることができます：https://github.com/jAndreas/Supply

Answer 2

base64でエンコードされたデータを画像として埋め込む方法を確認したい場合があります。

ここでは、その記事を紹介します。

http://danielmclaren.com/node/90

Answer 3

それはあなたがおそらくそれは、data URIs、おそらくキャンバスを使用して行うことができbase64でエンコードされた画像データを返す場合。

あなたができることを示すためにいくつかの "擬似"コード（PHPとJS + jQueryを使用）があります。

サーバー：

$image = new Imagick($imagePath); 
echo 'data:image/png;base64,' . base64_encode($image); 

クライアント：

$.ajax({ 
    method: "post", 
    url: "/foo/bar.php", 
    success: function (data) { 
     $("<img />").attr("src", data).appendTo("#myContainer"); 
    } 
}); 

Answer 4

ここで探してみてください。http://emilsblog.lerch.org/2009/07/javascript-hacks-using-xhr-to-load.html