首页 文章

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

提问于
浏览
29

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

  • 选择默认头像

  • 上传自己的头像

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

2 回答

  • 10

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

    您还可以使用FileReader类:

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

相关问题