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语法
字符串base64编解码的多种语言实现
现代浏览器将data url视作唯一的不透明来源,而不是负责导航的url。
如何理解这句话呢?看一下这个例子:
// data URL
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII=
// 传统的URL
https://www.google.com
由上面的结果可以看出:
data URL与传统的url不同。
传统的url在浏览器地址栏中输入,可以直接导航到目标地址;而data URL则是一个data的url表现,可以理解为用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:[<mediatype>][;base64],<data>
组成 | 含义 |
---|---|
data: | 前缀 |
[<mediatype>] | MIME type 代表数据的类型 |
[;base64] | 可选的base64标识 |
<data> | 数据本身 |
Hello World!
data:,Hello%2C%20World! // MIME type和;base64都没有,data和数据间只有`:,`
注意引号和空格的percent-encoding(URL-encoding)。
对于CSV数据(”text/csv“),percent-encoding需要保留分隔电子表格行的行尾。
Hello World!
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==
<h1>Hello, World!</h1>
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E
<script>alert('hi');</script>
data:text/html,<script>alert('hi');</script>
执行js的script标签,注意闭script标签是需要的。
"foo@gmail.com"
"Zm9vQGdtYWlsLmNvbQ=="
解码:echo "Zm9vQGdtYWlsLmNvbQ==" | base64 -D
编码:echo "foo@gmail.com" | base64
var encodedData = window.btoa("foo@gmail.com"); // 编码
var decodedData = window.atob("Zm9vQGdtYWlsLmNvbQ=="); // 解码
console.log(encodedData,decodedData)
//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)
import base64
base64.b64encode("foo@gmail.com")
base64.b64decode("Zm9vQGdtYWlsLmNvbQ==")
<?php
$a = 'foo@gmail.com';
$b = base64_encode($a);//编码
echo $b;
$c = base64_decode($b);//解码
echo $c;
?>
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);
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: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
data URL的格式非常简单,很容易忘记在data前面添加一个逗号,或者是错误的将数据编码为base64格式。
data URL在文件中提供了一个文件,这个文件相对于闭文档的宽度可能非常宽。
作为一URL,data应该将空白格式化好(换行、tab、或者空格),但是在使用base64编码时会有一些问题。
尽管firefox支持无现场的data URL长度,但是浏览器不需要支持任何最大特定长度的数据。例如Opera 11浏览器将URL的长度限制到65535,data URL限制到65529(65529指的是base64 encoded后的<data>长度)。
- 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已经被禁止。
不使用动态语言php,java等,直接通过js获取链接中传递的get数据的方法总结。javascript可以获取当前页面的url 只要对获取下来的url进行简单地解析即可。
做一个短链接生成器,可以将一个长链接缩短成一个短链接。就是把普通网址,转换成比较短的网址。好处不言而喻。短、字符少、美观、便于发布、传播。
在浏览器地址栏输入URL,浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤,如果资源未缓存,发起新请求,如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证...
在WEB开发中,时常会用到javascript来获取当前页面的url网址信息,在这里是我的一些获取url信息的小总结。window.location.href(设置或获取整个 URL 为字符串),window.location.protocol(设置或获取 URL 的协议部分)
相对路径就是相对于当前文件的路径;可以防止被抄袭,如果网页位置改变,里面的链接还是指向正确的URL。在编码编写时不方便使用绝对路径,因为链接应该指向真正的域名,而不是开发站点。
一次接触qs这个库,是在使用axios时,用于给post方法编码,在使用过程中,接触到了一些不同的用法,写在这里分享一下:qs.parse、qs.stringify、排序、指定数组编码格式、处理json格式的参数
什么是短链接 ?就是把普通网址,转换成比较短的网址。好处不言而喻:短、字符少、美观、便于发布、传播。所以如何来优雅的生成足够短的字符串唯一ID呢?
window对象的URL对象是专门用来将blob或者file读取成一个url的。这个url可以用在html的任何可以使用url的地方,比如img的src ; audio/video的src和source标签等。
利用url访问远程的文件、图片、视频时有时需要请求前判断url地址是否有效。利用PHP自带的函数get_headers(),利用http返回值是否存在200状态,来判断url地址是否有效。
URL的格式由下列三部分组成:协议(或称为服务方式);存有该资源的主机IP地址(有时也包括端口号);主机资源的具体地址,如目录和文件名等。URI,统一资源标识符:主机名。存放资源的自身的名称,由路径表示
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!