JS如何理解data URL

目录
  • 概述
  • 初识data URL
  • data URL语法
  • 字符串base64编解码的多种语言实现
    • 1.unix 
    • 2.javascript 
    • 3.nodejs
    • 4.python
    • 5.php
    • 6.java
    • 7..net
  • data URL常见问题

概述

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:
  • 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%3E

HTML片段：执行js的script标签

<script>alert('hi');</script>

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

执行js的script标签，注意闭script标签是需要的。

字符串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 

解码：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("加密结果：" + 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已经被禁止。

以上就是JS data URL的详细内容，更多关于JS的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 浅谈JavaScript中你可能不知道URL构造函数的属性

    URL URL 是统一资源定位符,对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它, 在 Web 开发中,有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点 例如,这里是这篇博客文章的路径: https://www.vipbic.com/thread.html?id=101 通常您需要访问 URL 的特定属性.这些可能是主机名(例如 vipbic

  • js获取url页面id，也就是最后的数字文件名

    第一种方法:正则匹配 <script> var strUrl = "//www.jb51.net/article/825.htm"; url = strUrl.match(/\/(\d*)\.(html|htm|shtm|shtml)/); document.write(url[1]); </script> 实际应用代码 <script> var strUrl = location.href; url = strUrl.match(/\/(\d*)\

  • js将URL网址转为16进制加密与解密函数

    十六进制(Hexadecimal)是计算机中数据的一种表示方法.同日常生活中的表示法不一样,它由0-9,A-F组成,字母不区分大小写.与10进制的对应关系是:0-9对应0-9:A-F对应10-15:N进制的数可以用0~(N-1)的数表示,超过9的用字母A-F.不同电脑系统.编程语言对于16进制数值有不同的表示方式:如增加0x前缀. 这里推荐一个在线转换的小工具方便大家使用:http://tools.jb51.net/transcoding/decode_encode_tool php函数: bi

  • 基于JavaScript获取url参数2种方法

    这次是使用JavaScript来获取url(request)中的参数 在日常页面编写的过程中为了方便操作在<script>中通过使用window.location.href="要跳转的页面?参数1=" rel="external nofollow" +值1+"&参数2="+值2 来进行页面跳转并传值. 那么在跳转过去的页面怎样在<script>中获取到传过来的参数呢? 下面是小编的一个案例: //参数传出页面 wi

  • 聊一聊JavaScript的URL对象是什么

    聊一聊JavaScript的URL对象是什么

    概述 如果我们自己编写从URL中分析和提取元素的代码,那么有可能会比较痛苦和麻烦.程序员作为这个社会中最"懒"的群体之一,无休止的重复造轮子必然是令人难以容忍的,所以大多数浏览器的标准库中都已经内置了URL对象. 那么现在,有了它,我们就可以将URL字符串作为参数传递给URL的构造函数,并创建它的实例解析URL内容了吗?答案是:"是的!". 要使用URL构造函数创建URL对象,我们在以下代码中使用new来创建: new URL('https://www.grapec

  • node.js如何根据URL返回指定的图片详解

    学node的过程碰到的一些坑,当时以为只需将图片放在html页面指定的路径下,访问该页面时,图片也会获取到,但是现在想来,或许是服务器只提供这个html的文件,交由客户端的浏览器编译,但是在客户端里并不存在该图片文件,所以图片自然无法获取到.在看其他页面的源代码后,发现,他们的图片路径都是通过访问网络资源得到的,所以说,图片也应属于网络资源,而不是这样: 代码便不是如下所示: <!DOCTYPE html> <html> <head> <meta charset=

  • js实现无刷新监听URL的变化示例代码详解

    无刷新改变路由的两种方法通过hash改变路由 代码 window.location.hash='edit' 效果 http://xxxx/#edit 通过history改变路由 history.back(): 返回浏览器会话历史中的上一页,跟浏览器的回退按钮功能相同 history.forward():指向浏览器会话历史中的下一页,跟浏览器的前进按钮相同 history.go(): 可以跳转到浏览器会话历史中的指定的某一个记录页 history.pushState()可以将给定的数据压入到浏览器

  • node.js通过url读取文件

    本文实例为大家分享了node.js通过url读取文件的具体代码,供大家参考,具体内容如下 在浏览器地址栏中输入127.0.0.1:3000和127.0.0.1:3000/node时,读取node.html文件,输入127.0.0.1:3000/banner时读取banner.json文件 准备工作 首先我们在www的文件目录下新建两个文件,一个是node.htnl,一个是banner.json,并在文件中添加一点内容 1.新建01.js文件并导入模块 let fs = require("fs&q

  • 返回上一个url并刷新界面的js代码

    JS 重载页面,本地刷新,返回上一页 <a href="javascript:history.go(-1)" rel="external nofollow" >返回上一页</a> <a href="javascript:location.reload()" rel="external nofollow" >重载页面,本地刷新</a> <a href="javasc

  • 简单了解JS打开url的方法

    这篇文章主要介绍了简单了解JS打开url的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在新标签页中get方式打开url window.open(loginurl_withaccout, "_blank"); 下面根据后台返回的url以及用户名密码字段,以及用户名密码动态生成了带账号的url. $.ax('./front/getURLBySidAndUid', {sysid:sysid}, 'POST', function(d)

随机推荐