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语法
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/…
