img显示二进制图片_图片与Base64

Base64

假设我们网页端有 canvas：

<canvas id="canvas" width="5" height="5"></canvas>

经过一些操作，

var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

我们得到了这个图片的数据，它也明确的告诉你了： data: image/png, 它是 base64 的。那这个 base64 又是啥？

Base64是一种基于64个可打印字符来表示二进制数据的表示方法。

图片本身是一堆 01 ，如果我们

6个一组，那么可以用字符来编码。

Base64 一般来说包括：

• 26个大写字母
• 26个小写字母
• 10个数字
• + 和 / 来代表换行（有些地方可能用别的字符）

所以一共 64 个 字符，也就是 Base64. 当然还有`=`用来补全，o(╯□╰)o

存成图片

网上容易找到很多代码例子如何在 js 端存储图片，比如 How to save svg canvas to local filesystem. 用 FileSaver.js 也是不错的主意， 可以找到很完整的例子： Save Canvas as Image.

实际上后端（比如 Pytho