JS如何理解data URL
canvas有一個(gè)非常常用的方法canvas.toDataURL()，它會(huì)將canvas轉(zhuǎn)化為data URL的格式。通常情況下這個(gè)data URL的類型為image?？纯聪旅娴睦樱?/p>
<canvas width='2'></canvas>var canvas = document.getElementById(’canvas’);var dataURL = canvas.toDataURL();console.log(dataURL);/** data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII=*/
那么這個(gè)以data:[MIME type];base64,開頭的data URL到底是什么東西呢？
初識(shí)data URL data URL是一種特殊格式的url，它的前綴是data: data URL允許內(nèi)容的創(chuàng)建者將小文件嵌入在documents中 過去被叫做data URIs，直到WHATWG將其更名為data URL(s)data URL與傳統(tǒng)的url有什么區(qū)別？
現(xiàn)代瀏覽器將data url視作唯一的不透明來源，而不是負(fù)責(zé)導(dǎo)航的url。如何理解這句話呢？看一下這個(gè)例子：
// data URL
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII=
// 傳統(tǒng)的URL
https://www.google.com
由上面的結(jié)果可以看出：
data URL與傳統(tǒng)的url不同。傳統(tǒng)的url在瀏覽器地址欄中輸入，可以直接導(dǎo)航到目標(biāo)地址；而data URL則是一個(gè)data的url表現(xiàn)，可以理解為用url代表數(shù)據(jù)。
通常情況下，這里的數(shù)據(jù)指代的是圖片。
data URL在瀏覽器地址欄輸入后是怎樣的？
通常情況下，可以看到這個(gè)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 代表數(shù)據(jù)的類型 [;base64] 可選的base64標(biāo)識(shí) <data> 數(shù)據(jù)本身[<mediatype>]詳情
mediatype是一個(gè)MIME type的字符串，比如’image/jpeg’。 如果忽略的話，默認(rèn)是'text/plain;charset=US-ASCII'。 canvas.toDataURL()并沒有忽略，默認(rèn)MIMIE type為'image/png'。[;base64]和<data>詳情
如果data是純文本，你可以簡單的嵌入文本（根據(jù)document類型使用適當(dāng)?shù)膶?shí)體或者轉(zhuǎn)義）。 如果data不是純文本的話，可以標(biāo)識(shí)為base64，并且嵌入base64編碼的二進(jìn)制數(shù)據(jù)。常見的data URL形式
簡單的text/plain數(shù)據(jù) 簡單的text/palin數(shù)據(jù)的base64形式 HTML片段：普通標(biāo)簽 HTML片段：執(zhí)行js的script標(biāo)簽簡單的text/plain數(shù)據(jù)
Hello World!
data:,Hello%2C%20World! // MIME type和;base64都沒有，data和數(shù)據(jù)間只有`:,`
注意引號(hào)和空格的percent-encoding（URL-encoding）。對(duì)于CSV數(shù)據(jù)（”text/csv“），percent-encoding需要保留分隔電子表格行的行尾。
簡單的text/palin數(shù)據(jù)的base64形式
Hello World!
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==
HTML片段：普通標(biāo)簽
<h1>Hello, World!</h1>
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E
HTML片段：執(zhí)行js的script標(biāo)簽
<script>alert(’hi’);</script>
data:text/html,<script>alert(’hi’);</script>
執(zhí)行js的script標(biāo)簽，注意閉script標(biāo)簽是需要的。
字符串base64編解碼的多種語言實(shí)現(xiàn) 為什么要用base64來表示data URL中的<data>？ base64字符串是用64進(jìn)制來表示二進(jìn)制數(shù)據(jù)的，它是一個(gè)ASCII字符串。由于僅僅是通過ASCII字符組成的，所以base64字符串是url-safe的，因此才將base64應(yīng)用于data URL的<data>中。
unix，JavaScript，node，python，php，java，.net實(shí)現(xiàn)base64編碼
'Zm9vQGdtYWlsLmNvbQ=='
1.unix解碼：echo 'Zm9vQGdtYWlsLmNvbQ==' | base64 -D
編碼：echo '[email protected]' | base64
2.javascriptvar encodedData = window.btoa('[email protected]'); // 編碼var decodedData = window.atob('Zm9vQGdtYWlsLmNvbQ=='); // 解碼console.log(encodedData,decodedData)3.nodejs
//base64編碼var b = new Buffer('[email protected]');var s = b.toString(’base64’)console.log('郵箱編碼:'+s)//base64解碼var b = new Buffer('Zm9vQGdtYWlsLmNvbQ==','base64')var s = b.toString();console.log('郵箱解碼:'+s)4.python
import base64base64.b64encode('[email protected]')base64.b64decode('Zm9vQGdtYWlsLmNvbQ==')5.php
<?php$a = ’[email protected]’; $b = base64_encode($a);//編碼 echo $b; $c = base64_decode($b);//解碼 echo $c; ?>6.java
String str = '[email protected]';String encodeStr = new String(Base64.encode(str.getBytes()));System.out.println(encodeStr);String decodeStr = Base64.base64Decode(encodeStr);System.out.println(decodeStr);7..net
static void Main(string[] args){ Console.WriteLine('輸入:'); var str = Console.ReadLine(); //加密 byte[] EncryptionByte = Encoding.UTF8.GetBytes(str); var EncryptionStr = Convert.ToBase64String(EncryptionByte); Console.WriteLine('加密結(jié)果：' + EncryptionStr); //解密 byte[] DecryptionByte = Convert.FromBase64String(EncryptionStr); var DecryptionStr = Encoding.UTF8.GetString(DecryptionByte); Console.WriteLine('解密結(jié)果：' + DecryptionStr);}
查看字符串base64編解碼的多種語言實(shí)現(xiàn)弄清base64多語言實(shí)現(xiàn)的來龍去脈。
data URL常見問題羅列一些在創(chuàng)建和使用data URL時(shí)的常見問題。
data:text/html,lots of text...<p><a name%3D'bottom'>bottom</a>?arg=val
其實(shí)它代表的是：
lots of text...<p><a name='bottom'>bottom</a>?arg=val
語法 HTML中的格式 長度限制 異常處理的缺失 不支持字符串查詢 安全問題語法
data URL的格式非常簡單，很容易忘記在data前面添加一個(gè)逗號(hào)，或者是錯(cuò)誤的將數(shù)據(jù)編碼為base64格式。
HTML中的格式
data URL在文件中提供了一個(gè)文件，這個(gè)文件相對(duì)于閉文檔的寬度可能非常寬。作為一URL，data應(yīng)該將空白格式化好（換行、tab、或者空格），但是在使用base64編碼時(shí)會(huì)有一些問題。
長度限制
盡管firefox支持無現(xiàn)場的data URL長度，但是瀏覽器不需要支持任何最大特定長度的數(shù)據(jù)。例如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的無效參數(shù)，或者‘base64’排版錯(cuò)誤，都會(huì)被忽略，但是不會(huì)報(bào)錯(cuò)出來。
不支持字符串查詢
data URL的數(shù)據(jù)部分是不透明的，所以如果使用query string（比如<url>?parameter-data）去查詢時(shí)，將只在數(shù)據(jù)中包含URL的查詢字符串。也就是說查詢無效，query也會(huì)被當(dāng)做數(shù)據(jù)的一部分。
安全問題
許多安全問題(如網(wǎng)絡(luò)釣魚)都與data url相關(guān)，并在瀏覽器的頂層導(dǎo)航到它們。為了解決這些問題，在Firefox 59+中(發(fā)布版本，從58開始)，對(duì)數(shù)據(jù)的頂層導(dǎo)航data:// urls已經(jīng)被禁止。
以上就是JS data URL的詳細(xì)內(nèi)容，更多關(guān)于JS的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. XML入門精解之結(jié)構(gòu)與語法2. html清除浮動(dòng)的6種方法示例3. CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫特效4. 原生js XMLhttprequest請(qǐng)求onreadystatechange執(zhí)行兩次的解決5. 刪除docker里建立容器的操作方法6. msxml3.dll 錯(cuò)誤 800c0019 系統(tǒng)錯(cuò)誤:-2146697191解決方法7. asp在iis7報(bào)錯(cuò)行號(hào)不準(zhǔn)問題的解決方法8. asp批量添加修改刪除操作示例代碼9. 三個(gè)不常見的 HTML5 實(shí)用新特性簡介10. ASP中解決“對(duì)象關(guān)閉時(shí),不允許操作?！钡脑幃悊栴}……
網(wǎng)公網(wǎng)安備