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

Posted 2023-03-05

【中文标题】如何从 html 图像中获取 base64 编码数据

【英文标题】：How to get base64 encoded data from html image

【发布时间】：2013-03-23 13:11:44

【问题描述】：

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

选择默认头像 上传自己的头像

在我的 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 编码的数据。

【问题讨论】：

简单地将默认头像转换为base64图片

好的，感谢您的评论。

这里我在玩 jsFiddle，从画布中的 标签加载 img 并在做 .toDataURL()。

【参考方案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());

【讨论】：

不错的代码！还有一个问题。 base64 输出是否总是被假定为 PNG 数据（Canvas 实例是否“转换”图像数据？），如果是，有没有办法识别图像的真实数据类型（幻数？）并更改生成的 base64 协议声明？

我（不情愿地）接受我们需要创建一个画布元素来生成编码，但是我更喜欢在 js 中生成它，而不是用占位符乱扔视图代码（我的使用案例需要一些图片） - 就像这个类似的答案：***.com/a/22172860/1177832

如果 src 是 svg 图片怎么办

您能否使用 URL img.youtube.com/vi/gs415cKPASA/maxresdefault.jpg。它抛出一个错误，“未捕获的 DOMException：无法在 'HTMLCanvasElement' 上执行 'toDataURL'：可能无法导出受污染的画布。”

【参考方案2】：

你也可以使用 FileReader 类：

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

【讨论】：

但是，文件需要是 blob 格式：/

问题是，如何从图片元素中获取base64，而不是从文件路径中获取