html画像からbase64でエンコードされたデータを取得する方法

ユーザーがアバターを選択できる登録フォームがあります。彼らは、2つの可能性があります。html画像からbase64でエンコードされたデータを取得する方法

を、私はこれを持って私のHTMLページでは、自分のアバター

をアップロード

デフォルトのアバターを選択してください。

<img id="preview" src="img/default_1.png">

選択したアバターが表示されます。ファイルApiを使用して、ユーザーが自分のイメージをアップロードできるようにします。これは、HTMLイメージのsrcをこのようにします。

<img id="preview" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA... />

登録フォームを投稿すると、データはRESTサービスに送信されます。ユーザーがアバターを自分でアップロードしたときにbase64でエンコードされたデータを送信できます。しかし、私はどのようにデフォルトのアバターを扱うのですか？これはbase64でエンコードされたデータの代わりにurlです。

出典

2013-04-02 janseeuw

だけでbase64で画像 –

[OK]を、おかげで、デフォルトのアバターを変換しますコメントのために。 – janseeuw

ここで私はjsFiddleでキャンバスのタグからimgを読み込み、.toDataURL（）を実行していました。 – MichD

あなたがサンプルます。また、FileReaderのクラスを使用することができ http://jsfiddle.net/xKJB8/3/

<img id="preview" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG"> 
<canvas id="myCanvas" />

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
var img = document.getElementById("preview"); 
ctx.drawImage(img, 10, 10); 
alert(c.toDataURL());

出典

2013-04-02 10:09:13

ニースコード！もう1つの質問。 base64出力は常にPNGデータであると見なされます（キャンバスインスタンスはイメージデータを '変換'しますか？）もしあれば、イメージの実際のデータ型（マジックナンバー？）を識別し、結果のbase64プロトコルを変更する方法があります宣言？ –

私は（慎重に）エンコーディングを生成するためにキャンバス要素を作成する必要があると受け入れますが、私の好みは、プレースホルダでビューコードを捨てなくてもjsで生成することです（私の使用例はいくつかの画像が必要です）。このような同様の答え：http://stackoverflow.com/a/22172860/1177832 – danwild

srcがsvg画像の場合 –

次試すことができます。

var reader = new FileReader(); 
    reader.onload = function (e) { 
     var data = this.result; 
    } 
    reader.readAsDataURL(file);

出典

2014-01-06 00:31:14 httpete

しかし、ファイルはblob形式である必要があります：/ – yashas123

html画像からbase64でエンコードされたデータを取得する方法

答えて

関連する問題