39

ユーザーがアバターを選択できる登録フォームがあります。2 つの可能性があります。

  1. デフォルトのアバターを選択
  2. 自分のアバターをアップロードする

私のHTMLページにはこれがあります。

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

選択したアバターが表示されます。File Api を使用して、ユーザーが自分の画像をアップロードできるようにします。これにより、HTML 画像の src が次のようになります。

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

彼らが登録フォームを投稿するとき。データは REST サービスに送信されます。ユーザーが自分でアバターをアップロードしたときに、base64 でエンコードされたデータを送信できます。しかし、デフォルトのアバターをどのように処理すればよいでしょうか? base64 でエンコードされたデータではなく、URL です。

4

2 に答える 2

47

次のサンプルを試すことができます 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-02T10:09:13.000 に答える
10

FileReader クラスを使用することもできます。

    var reader = new FileReader();
    reader.onload = function (e) {
        var data = this.result;
    }
    reader.readAsDataURL( file );
于 2014-01-06T00:31:14.557 に答える