如何从 html 图像中获取 base64 编码数据-前端问题

How to get base64 encoded data from html image(如何从 html 图像中获取 base64 编码数据)

本文介绍了如何从 html 图像中获取 base64 编码数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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

在我的 HTML 页面中有这个.

In my HTML page I have this.

<img id="preview" src="aW1nL2RlZmF1bHRfMS5wbmc=">

它显示选择的头像.我使用 File 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="ZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBLi4uIC8mZ3Q7CjwvY29kZT48L3ByZT4KPHAgY2xhc3M9"cn">当他们发布注册表单时.数据将被发送到 REST 服务.当用户自己上传头像时，我可以发送 base64 编码数据.但是如何处理默认头像?它是一个 url 而不是 base64 编码的数据.
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/
<img id="preview" src="aHR0cDovL3d3dy5ncmF2YXRhci5jb20vYXZhdGFyLzBlMzlkMThiODk4MjJkMWQ5ODcxZTBkMWJjODM5ZDA2P3M9MTI4JmFtcDtkPWlkZW50aWNvbiZhbXA7cj1QRw==">
<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());


                        这篇关于如何从 html 图像中获取 base64 编码数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！