canvas有一个非常常用的办法canvas.toDataURL()，它会将canvas转化为data URL的格局。
通常情况下这个data URL的类型为image。
看看下面的例子：

<canvas id="canvas" heightj @ y R .="2" width="2"></canvas>
var canvas = document.getElementById('ca= # ,nva1 W fs');
var dataURL = canvas.toDataURL| G A - V g c I();
console.log(dataURL);
/*
* data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYVn z S2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII=
*/

那么这个以data:[MIME type];base64,最初的data URL到底是什么东西呢？

  • 初识data URLM ) k a ` ; + |
    • dq Z , A ^ pata URL与传统的url有什么区别？
    • data URL在浏览器地址栏输入后是怎样的？
  • data URL语n Q w a法
    • data URL由哪四部分组成？
    • [<medX S Kiatyw T M l xpe>]概况
    • [;base64]和<data>概况
    • 常见的data URL方式
  • 字符串base64编解码的多种语* 2 0 $言完成
    • 为什么要用base64来表示data URL中的？
    • unix，java: [ Q jscript，node，python，php，java，.net完成base64编码
  • data URL常见问题

初识das 2 f ata URL

  • data URL是一种特殊格局的url，它的前缀是data:
  • data URL答应内容的创建者将小文件嵌入在documents中I x V f
  • 曩昔被叫做data URIs，直到WHATWG将其更名为data URL(s)

data URL与传统的url有什么区别？

现代浏览器_ – Q } 5 j $将data url视y ( s ` S作仅有的不透明来源，而不是担任导航的url。
怎么理解这句话呢？看一下这个例子：C + k k Y M u l

// data URL
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII=
// 传统的URL
https://www.google.com

由上面的成果能够看出：
data U{ s } #RL与传统的url不同。
传统的url在浏览器地址栏中输入，能够直接导航到方针地址；而data URL则是一个data的urU D 9 y Bl表现，能够理解为用url代表数据。
通常情况下，这儿的数据指代的是图片。

data URL在浏览器地址栏4 Q T 5输入后是怎样的？

通常情况下，能够看到这个url代表的图片。

<!DOCTYPE ht7 - ) 1 i = ) 3 .ml>
<html lang="en">
<body>
<canvas id="canvas"><T a | c ] F;/canvas>
</body>
<script>
var ch = G f m q Danvas = document.getElementById("canvas");
var ctx` R / i * = canvaA 1 v }s.getContext("2d");
ctx.font = "48px serif";
ctx.fillText("Hello Canvassssssssss", 0, 75 + 24);
var dataURL = caU n : 3nvas.toDr H ~ataURL();
console.logr / H 2(dataURL);
</script>
</html>
如何理解data URL？

data URL语法

d* j Y D ` (ata URL由哪四部u I M分组成？

data:[<mediatype>][;basF $ R ; H j [e64],<data>
组成 意义
data: 前缀
[<mediatype>] MIME type 代表数据的类型
[;base64] 可. D ) ^ B K @选的base64标识
<data> 数据自身

[<mediatype>]概况

  • mediatype是一个MIME type的字符串，比方W K p q R H‘image/jpegP e 9 : x 7 T N‘。
  • 假如疏忽的话，默许是”text/plain;charset=US-ASCII”。
  • canvas.toDataURL()并没有疏忽，默许MIMIE type为”image/png”。

[;base64]和<data>概况

  • 假如data是纯文本，你能够简略的嵌入文本（依据document类型运用适当} – D ` ~ | e ] o的实体或许转义）。
  • 假如data不是纯文本的话，能够标识为base64，并且嵌入base64编码的二进制数据。

常见的d} – ! g W a } G Qata URL方式

  • 简略的text/plain数据
  • 简H e g略的text/palin数据的base64方式
  • HTML片段：普通标签
  • HTML片段：履行jc K V [s的script标签
简略的text/plain数据

Hello World!

data:,Hello%2C%20World! // MIMQ M , 9 7 X wE type和;base64都没有，dat, 3 w oa和数据间只有`:,`

留意引号和空格的percent-encoding（URL-encoding）。
对于CSV数据（”text/csv“），percent-encoding需求保存分隔电子表格行的行尾。

简略的text/palinh L , l ~ j ! o数据的base64方式

Hello World!

data:text/plain;base64,SGVsbG8sIFdvcmxkIq U . = w l n MQ==
HTML片段：普通标签

<h1>Hello, World!</h1>

data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E3 % ` ` Z  u
HTML片段：履行js的scu Q v d – B 3 ? rript标签

<script>alert(] S l 5 z . ( e $'hi');</script>

data:text/html,<script>alert('hi');</script>

履行js的script标签，留意闭script标签是需求的。

字符串base64编解u * g & ,码的多种/ t g A k 2 i语言完成

为什么要用base64来表示data URL中的<data>？

  • base64字符串是用64进制来表示二进制数据的，它是一个ASCII字符串。
  • 因为/ X N ? = ! @ )仅仅是经过ASCII字符组成& T S ( 0 O _ . 7的，所以base64字符串是url-safe的，因此才将basZ z S f w 5 Ye64应用于data URL的<D = z M N 3 . P Jdata>中。

unix，javascript，node0 O m G，python，php，java，.net完成base64编码

"foo@gmail.com"
"Zm9vQGdtYWlsLmNvbQ=="
1.unix (author: Peng Zhao)

解码：echo "Zm9vQGdtYWlsLmNvbQ==" | base64 -D
编码：echo "foo@gmail.| c 2 x [ = / ]com" | base64

2.javascript (author: Kai Gao)
var encodedData = window.btoa("foo@gmail.com"); // 编码
var decodedData = window.atob("Zm9vQGdtYWlsQ 4 k 3LmNvbQ=="); // 解码
console.log(encodedDaC % h e z t 0 _ 5ta,decodedData)
3.nodejs (author: Kai Gao)
//base64编码
var  b = new Buffer("foo@gmail.com");
var s = b.toString('base64')3 D *
console.log("邮箱编码:"+s)
//base64解码
var b = new Buffer("Zm9vQGdtYWlsLm5 l zNvbQ==","b w O a ! d f cbase64")
var s = b.toString();
console.log("邮箱解码:"+s)
4.python (aZ ! 9 K /uthor: Peng Zhao)
import base64
base6` c f4.b64encode("X ) P 8 @ X Ifoo@gmail.co! S _ e u  a Jm")
ba( /  j , l p d 8se64.b64decode("Zm9vQGdtYWlsLmNvbQ==")
5.php (author: Chuang Shen)
<?php
$a = 'foo@gmail.com';
$b = base64_encode($a);//编码
ech9 W 4 G m 5 t )o $b;
$c = base64_decode($b);//解码
echo $c;
?>
6.java (author: Chuang Shen)
String str = "foo@gmail.com";
String en? p y ) ~  3 4codeStr = new String(Base64.encode(str.getBytes()));
Syst] P H k jem.out.println(encodeStr);
String decodeStr = Base64.base64DecA  g o 7 i 5 } Eode(eF # z ; cncodeStr);
System.out.println(decodeStr);
7..net (author: Peng Li)
static void Main(string[] args)
{
Console.WriteLine("输入:");
var str = Console.ReadLine();
//加密
byte[] EncryptionByte = Encoding.UTF8.GetBytes(str);
var EncryptionStr = Convert.To7 # d ? eBase64String(EncryptionByte);
Console.WriteLine("加密成果：" + EncryptionSt+ - M _ 0 z 9 .r);
//解密
byte[] DecryptionByte = Convert.FromBase64String(EncryptionStr);
var DecryptionStr = Encoding.w & ~ fUTF8f  6 } [ ` [ H.GetSe 7 l _ ` ) s Etring(DecryptionByte);
Console.WriteLinel q Q L s g y("解密成果：" + DecryptionStr);
}

检查字符串base64编解码的多种语言完成澄清base64多语言完成的来龙去脉。

data URL常见问题

罗列一些在创建和运用data URL时的常见问题。

d( X 2ata:text/html,lots of text...<p><l J J : f ra name%3D"bottom">bottom</a>?af & V ( } K =rg=val

其实它代表的是：

lots of text...<p><a name="bottom& % 4 M ) & .">bottom</a>?arg=val
  • 语法
  • HTML中的格局
  • 长度约束
  • 反常处理的缺失
  • 不支撑字符串I q g Z u S Q查询
  • 安全问题_ | D ` & l L H

语法

data URL^ n 7 :的格局非常简略，很简单忘记在data前面添加一个逗号，或许是过错的将数据编码为base64格局。

HTML中的格局

data URL在文件中提供了一个文件，这个文件相对于闭文档的宽度或许非常宽。
作为一URL，data应该将空白格局化好（换行、tab、或许空格），可是在运用base64编码时会有一些问题。

长度约束

虽然firefox支撑无现场的data URL长度，可是浏览器不需求支撑任何最大特定长度的数据。例如Opera 11浏览器将URL的长度约束到65535，data URL约束到65529（65529指的是base64 encoded后的<data>长度）。

主流浏览器data URL长度约束
  • Chrome – 2] % z # + c w + GMB for the current document. Otherwise the limit is the in-memory stos _ =rage limit for – arbitrary blobsW w 1: if x64 and NOT ChromeOS or Android, then 2GB. 6 ^ , ] s; otherwise, total_physical_memory / 5 (source).
  • Firefox – unlimited
  • IE ≥ 9 & Edge – 4GB

引自：Data protocol URL size limitations

反常l A c B M z e p处理的缺失

media的无效参数，或许‘base64’排版过错，都会被疏忽，可是不会报错l % b _出来。

不支撑字符串查询

data URL的数据部分是不透明的，所以假如运用query string（比方<url>?para& Q dmeter-data）去查询时，将只在数据$ M q @ u中包含URL的查询字符o g t i h F m , J串。也就是说查询无效，query也会被作为数据的一部分。

安全问题

许多安全问题(如网络钓鱼)都与data url相关，并在浏览器的顶层导航到它们。
为了解决这些问题，在Firefox 59+中(发布版别，从58开始)，对数据的顶层导航d^ { z z Wata:// urls已经被制止。

参考资料：

  • developer.mozilla.org/en-US/docs/…
  • developer.mozilla.org/en# B D K-US/docs/…