Javascript 如何从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编码的数据。但是我如何处理默认的化身呢？它是一个url，而不是base64编码的数据。

您可以尝试以下示例

---

您还可以使用FileReader类：

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

---

只需将默认的头像转换为base64 imageOk，谢谢你的评论。这里我正在玩JSFIDLE，从画布中的标记加载img。doing.toDataURL（）。代码不错！还有一个问题。base64输出是否总是假定为PNG数据（Canvas实例是否“转换”图像数据？），如果是，是否有方法识别图像的真实数据类型（幻数？）并更改生成的base64协议声明？我（勉强）接受我们需要创建Canvas元素以生成编码，然而，我的首选是在js中生成它，而不是在视图代码中乱丢占位符（我的用例需要一些图像）——类似的回答是：如果src是svg图像，你能让它与URL一起工作吗。它抛出一个错误，“Uncaught DomeException:未能在“HtmlCanvaElement”上执行“toDataURL”：可能无法导出受污染的画布。”但是，该文件需要采用blob格式：/问题是，如何从image元素而不是从文件路径获取base64

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

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