如何从html图像中获取base64编码的数据

I have a registration form where users can choose an avatar. They have 2 possibilities:

我有一个注册表，用户可以选择一个头像。他们有两种可能性:

Choose a default avatar
选择一个默认的《阿凡达》
Upload their own avatar
上传自己的阿凡达

In my HTML page I have this.

在我的HTML页面中，我有这个。

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

It displays the chosen avatar. I use the File Api to let users upload their own image. That makes the src of the HTML image to something like this.

它显示所选择的化身。我使用文件Api让用户上传自己的图片。这使得HTML图像的src变成了这样。

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

When they post the registration form. The data will be sent to a REST service. I can send the base64 encoded data when a user uploaded an avatar himself. But how do I handle the default avatar? It is an url instead of base64 encoded data.

当他们邮寄登记表时。数据将被发送到REST服务。当用户上传自己的头像时，我可以发送base64编码的数据。但是我如何处理默认的头像呢?它是一个url而不是base64编码的数据。

2 个解决方案

#1

You can try following sample http://jsfiddle.net/xKJB8/3/

您可以尝试以下示例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());

#2

You can also use the FileReader class :

你也可以使用FileReader类:

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

#1