如何获得的base64途中从HTML图像codeD数据 [英] How to get base64 encoded data from html image

问题描述

我有一个登记表，用户可以选择一个头像。他们有两种方式：

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

1. 选择一个默认的头像


2. 上传自己的头像

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

In my HTML page I have this.

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

这显示所选的化身。
我用的文件API，让用户上传自己的形象。
这使得HTML图像来这样的事情在src。

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.

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

当他们张贴在报名表。该数据将被发送到一个REST服务。
当用户上传头像自己，我可以送的base64 EN codeD数据。但我怎么处理默认头像？这是一个URL，而不是连接的base64 codeD数据。

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.

推荐答案

您可以试试下面的示例
http://jsfiddle.net/xKJB8/3/

You can try following sample 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途中从HTML图像codeD数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！