canvas有一個非常常用的方法canvas.toDataURL()，它會將canvas轉化為data URL的格式。
通常情況下這個data URL的類型為image。
看看下面的例子：
<canvas id="canvas" height="2" width="2"></canvas> var canvas = document.getElementById('canvas'); var dataURL = canvas.toDataURL(); console.log(dataURL); /* * data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII= */那么這個以data:[MIME type];base64,開頭的data URL到底是什么東西呢？
-
初識data URL
- data URL與傳統的url有什么區別？
- data URL在瀏覽器地址欄輸入后是怎樣的？
-
data URL語法
- data URL由哪四部分組成？
- [<mediatype>]詳情
- [;base64]和<data>詳情
- 常見的data URL形式
-
字符串base64編解碼的多種語言實現
- 為什么要用base64來表示data URL中的<data>？
- unix，JavaScript，node，python，php，java，.net實現base64編碼
- data URL常見問題
初識data URL
- data URL是一種特殊格式的url，它的前綴是data:
- data URL允許內容的創建者將小文件嵌入在documents中
- 過去被叫做data URIs，直到WHATWG將其更名為data URL(s)
data URL與傳統的url有什么區別？
現代瀏覽器將data url視作唯一的不透明來源，而不是負責導航的url。
如何理解這句話呢？看一下這個例子：
// data URL data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII= // 傳統的URL https://www.google.com由上面的結果可以看出：
data URL與傳統的url不同。
傳統的url在瀏覽器地址欄中輸入，可以直接導航到目標地址；而data URL則是一個data的url表現，可以理解為用url代表數據。
通常情況下，這里的數據指代的是圖片。
data URL在瀏覽器地址欄輸入后是怎樣的？
通常情況下，可以看到這個url代表的圖片。
<!DOCTYPE html> <html lang="en"> <body> <canvas id="canvas"></canvas> </body> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.font = "48px serif"; ctx.fillText("Hello Canvassssssssss", 0, 75 + 24); var dataURL = canvas.toDataURL(); console.log(dataURL); </script> </html>
data URL語法
data URL由哪四部分組成？
data:[<mediatype>][;base64],<data>| 組成 | 含義 |
|---|---|
| data: | 前綴 |
| [<mediatype>] | MIME type 代表數據的類型 |
| [;base64] | 可選的base64標識 |
| <data> | 數據本身 |
[<mediatype>]詳情
- mediatype是一個MIME type的字符串，比如'image/jpeg'。
- 如果忽略的話，默認是"text/plain;charset=US-ASCII"。
- canvas.toDataURL()並沒有忽略，默認MIMIE type為"image/png"。
[;base64]和<data>詳情
- 如果data是純文本，你可以簡單的嵌入文本（根據document類型使用適當的實體或者轉義）。
- 如果data不是純文本的話，可以標識為base64，並且嵌入base64編碼的二進制數據。
常見的data URL形式
- 簡單的text/plain數據
- 簡單的text/palin數據的base64形式
- HTML片段：普通標簽
- HTML片段：執行js的script標簽
簡單的text/plain數據
Hello World!
data:,Hello%2C%20World! // MIME type和;base64都沒有，data和數據間只有`:,`注意引號和空格的percent-encoding（URL-encoding）。
對於CSV數據（”text/csv“），percent-encoding需要保留分隔電子表格行的行尾。
簡單的text/palin數據的base64形式
Hello World!
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==HTML片段：普通標簽
<h1>Hello, World!</h1>
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3EHTML片段：執行js的script標簽
<script>alert('hi');</script>
data:text/html,<script>alert('hi');</script>執行js的script標簽，注意閉script標簽是需要的。
電腦刺綉綉花廠 http://www.szhdn.com 廣州品牌設計公司https://www.houdianzi.com
字符串base64編解碼的多種語言實現
為什么要用base64來表示data URL中的<data>？
- base64字符串是用64進制來表示二進制數據的，它是一個ASCII字符串。
- 由於僅僅是通過ASCII字符組成的，所以base64字符串是url-safe的，因此才將base64應用於data URL的<data>中。
unix，JavaScript，node，python，php，java，.net實現base64編碼
"foo@gmail.com" "Zm9vQGdtYWlsLmNvbQ=="1.unix (author: Peng Zhao)
解碼：echo "Zm9vQGdtYWlsLmNvbQ==" | base64 -D
編碼：echo "foo@gmail.com" | base64
2.javascript (author: Kai Gao)
var encodedData = window.btoa("foo@gmail.com"); // 編碼 var decodedData = window.atob("Zm9vQGdtYWlsLmNvbQ=="); // 解碼 console.log(encodedData,decodedData)3.nodejs (author: Kai Gao)
//base64編碼 var b = new Buffer("foo@gmail.com"); var s = b.toString('base64') console.log("郵箱編碼:"+s) //base64解碼 var b = new Buffer("Zm9vQGdtYWlsLmNvbQ==","base64") var s = b.toString(); console.log("郵箱解碼:"+s)4.python (author: Peng Zhao)
import base64 base64.b64encode("foo@gmail.com") base64.b64decode("Zm9vQGdtYWlsLmNvbQ==")5.php (author: Chuang Shen)
<?php $a = 'foo@gmail.com'; $b = base64_encode($a);//編碼 echo $b; $c = base64_decode($b);//解碼 echo $c; ?>6.java (author: Chuang Shen)
String str = "foo@gmail.com"; String encodeStr = new String(Base64.encode(str.getBytes())); System.out.println(encodeStr); String decodeStr = Base64.base64Decode(encodeStr); 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.ToBase64String(EncryptionByte); Console.WriteLine("加密結果：" + EncryptionStr); //解密 byte[] DecryptionByte = Convert.FromBase64String(EncryptionStr); var DecryptionStr = Encoding.UTF8.GetString(DecryptionByte); Console.WriteLine("解密結果：" + DecryptionStr); }查看字符串base64編解碼的多種語言實現弄清base64多語言實現的來龍去脈。
data URL常見問題
羅列一些在創建和使用data URL時的常見問題。
data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val其實它代表的是：
lots of text...<p><a name="bottom">bottom</a>?arg=val- 語法
- HTML中的格式
- 長度限制
- 異常處理的缺失
- 不支持字符串查詢
- 安全問題
語法
data URL的格式非常簡單，很容易忘記在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 - 2MB for the current document. Otherwise the limit is the in-memory storage limit for - arbitrary blobs: if x64 and NOT ChromeOS or Android, then 2GB; otherwise, total_physical_memory / 5 (source).
- Firefox - unlimited
- IE ≥ 9 & Edge - 4GB
引自：Data protocol URL size limitations
異常處理的缺失
media的無效參數，或者‘base64’排版錯誤，都會被忽略，但是不會報錯出來。
不支持字符串查詢
data URL的數據部分是不透明的，所以如果使用query string（比如<url>?parameter-data）去查詢時，將只在數據中包含URL的查詢字符串。也就是說查詢無效，query也會被當做數據的一部分。
安全問題
許多安全問題(如網絡釣魚)都與data url相關，並在瀏覽器的頂層導航到它們。
為了解決這些問題，在Firefox 59+中(發布版本，從58開始)，對數據的頂層導航data:// urls已經被禁止。