快捷導(dǎo)航

JS如何理解data URL

更新時(shí)間：2021年04月29日 09:27:01 作者：淺笑·

這篇文章主要介紹了JS如何理解data URL，對(duì)data URL感興趣的同學(xué)，可以參考下

概述

canvas有一個(gè)非常常用的方法canvas.toDataURL()，它會(huì)將canvas轉(zhuǎn)化為data URL的格式。
通常情況下這個(gè)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=
*/

那么這個(gè)以data:[MIME type];base64,開(kāi)頭的data URL到底是什么東西呢？

初識(shí)data URL

data URL是一種特殊格式的url，它的前綴是data:
data URL允許內(nèi)容的創(chuàng)建者將小文件嵌入在documents中
過(guò)去被叫做data URIs，直到WHATWG將其更名為

data URL(s)data URL與傳統(tǒng)的url有什么區(qū)別？

現(xiàn)代瀏覽器將data url視作唯一的不透明來(lái)源，而不是負(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語(yǔ)法

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()并沒(méi)有忽略，默認(rèn)MIMIE type為"image/png"。

[;base64]和<data>詳情

如果data是純文本，你可以簡(jiǎn)單的嵌入文本（根據(jù)document類型使用適當(dāng)?shù)膶?shí)體或者轉(zhuǎn)義）。
如果data不是純文本的話，可以標(biāo)識(shí)為base64，并且嵌入base64編碼的二進(jìn)制數(shù)據(jù)。

常見(jiàn)的data URL形式

簡(jiǎn)單的text/plain數(shù)據(jù)
簡(jiǎn)單的text/palin數(shù)據(jù)的base64形式
HTML片段：普通標(biāo)簽
HTML片段：執(zhí)行js的script標(biāo)簽

簡(jiǎn)單的text/plain數(shù)據(jù)

Hello World!

data:,Hello%2C%20World! // MIME type和;base64都沒(méi)有，data和數(shù)據(jù)間只有`:,`

注意引號(hào)和空格的percent-encoding（URL-encoding）。
對(duì)于CSV數(shù)據(jù)（”text/csv“），percent-encoding需要保留分隔電子表格行的行尾。

簡(jiǎn)單的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)簽

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

執(zhí)行js的script標(biāo)簽，注意閉script標(biāo)簽是需要的。

字符串base64編解碼的多種語(yǔ)言實(shí)現(xiàn)

為什么要用base64來(lái)表示data URL中的<data>？
base64字符串是用64進(jìn)制來(lái)表示二進(jìn)制數(shù)據(jù)的，它是一個(gè)ASCII字符串。

由于僅僅是通過(guò)ASCII字符組成的，所以base64字符串是url-safe的，因此才將base64應(yīng)用于data URL的<data>中。

unix，JavaScript，node，python，php，java，.net實(shí)現(xiàn)base64編碼

"foo@gmail.com"

"Zm9vQGdtYWlsLmNvbQ=="

1.unix

解碼：echo "Zm9vQGdtYWlsLmNvbQ==" | base64 -D

編碼：echo "foo@gmail.com" | base64

2.javascript

var encodedData = window.btoa("foo@gmail.com"); // 編碼
var decodedData = window.atob("Zm9vQGdtYWlsLmNvbQ=="); // 解碼
console.log(encodedData,decodedData)

3.nodejs

//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

import base64
base64.b64encode("foo@gmail.com")
base64.b64decode("Zm9vQGdtYWlsLmNvbQ==")

5.php

<?php
$a = 'foo@gmail.com';
    $b = base64_encode($a);//編碼
    echo $b;
    $c = base64_decode($b);//解碼
    echo $c;  
?>

6.java

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

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編解碼的多種語(yǔ)言實(shí)現(xiàn)弄清base64多語(yǔ)言實(shí)現(xiàn)的來(lái)龍去脈。

data URL常見(jiàn)問(wèn)題

羅列一些在創(chuàng)建和使用data URL時(shí)的常見(jiàn)問(wèn)題。

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

語(yǔ)法
HTML中的格式
長(zhǎng)度限制
異常處理的缺失
不支持字符串查詢
安全問(wèn)題

語(yǔ)法

data URL的格式非常簡(jiǎn)單，很容易忘記在data前面添加一個(gè)逗號(hào)，或者是錯(cuò)誤的將數(shù)據(jù)編碼為base64格式。

HTML中的格式

data URL在文件中提供了一個(gè)文件，這個(gè)文件相對(duì)于閉文檔的寬度可能非常寬。
作為一URL，data應(yīng)該將空白格式化好（換行、tab、或者空格），但是在使用base64編碼時(shí)會(huì)有一些問(wèn)題。

長(zhǎng)度限制

盡管firefox支持無(wú)現(xiàn)場(chǎng)的data URL長(zhǎng)度，但是瀏覽器不需要支持任何最大特定長(zhǎng)度的數(shù)據(jù)。例如Opera 11瀏覽器將URL的長(zhǎng)度限制到65535，data URL限制到65529（65529指的是base64 encoded后的<data>長(zhǎng)度）。

主流瀏覽器data URL長(zhǎng)度限制

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的無(wú)效參數(shù)，或者‘base64'排版錯(cuò)誤，都會(huì)被忽略，但是不會(huì)報(bào)錯(cuò)出來(lái)。

不支持字符串查詢

data URL的數(shù)據(jù)部分是不透明的，所以如果使用query string（比如<url>?parameter-data）去查詢時(shí)，將只在數(shù)據(jù)中包含URL的查詢字符串。也就是說(shuō)查詢無(wú)效，query也會(huì)被當(dāng)做數(shù)據(jù)的一部分。

安全問(wèn)題

許多安全問(wèn)題(如網(wǎng)絡(luò)釣魚(yú))都與data url相關(guān)，并在瀏覽器的頂層導(dǎo)航到它們。
為了解決這些問(wèn)題，在Firefox 59+中(發(fā)布版本，從58開(kāi)始)，對(duì)數(shù)據(jù)的頂層導(dǎo)航data:// urls已經(jīng)被禁止。

以上就是JS data URL的詳細(xì)內(nèi)容，更多關(guān)于JS的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: