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

Question

我有一个注册表单，用户可以在其中选择一个头像。他们有两种可能性：

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编码数据。但是我如何处理默认的头像？它是一个url而不是base64编码数据。

Answer 1

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

Answer 2

您还可以使用FileReader类：

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