在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
概述canvas有一个非常常用的方法canvas.toDataURL(),它会将canvas转化为data URL的格式。 <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(s)data URL与传统的url有什么区别? 现代浏览器将data url视作唯一的不透明来源,而不是负责导航的url。
由上面的结果可以看出: 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由哪四部分组成?
[<mediatype>]详情
[;base64]和<data>详情
常见的data URL形式
简单的text/plain数据 Hello World!
注意引号和空格的percent-encoding(URL-encoding)。 简单的text/palin数据的base64形式 Hello World!
HTML片段:普通标签 <h1>Hello, World!</h1>
HTML片段:执行js的script标签 <script>alert('hi');</script>
执行js的script标签,注意闭script标签是需要的。 字符串base64编解码的多种语言实现
由于仅仅是通过ASCII字符组成的,所以base64字符串是url-safe的,因此才将base64应用于data URL的<data>中。 unix,JavaScript,node,python,php,java,.net实现base64编码
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.pythonimport base64 base64.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.javaString 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..netstatic 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 URL的格式非常简单,很容易忘记在data前面添加一个逗号,或者是错误的将数据编码为base64格式。 HTML中的格式 data URL在文件中提供了一个文件,这个文件相对于闭文档的宽度可能非常宽。 长度限制 尽管firefox支持无现场的data URL长度,但是浏览器不需要支持任何最大特定长度的数据。例如Opera 11浏览器将URL的长度限制到65535,data URL限制到65529(65529指的是base64 encoded后的<data>长度)。 主流浏览器data URL长度限制
引自:Data protocol URL size limitations 异常处理的缺失 media的无效参数,或者‘base64'排版错误,都会被忽略,但是不会报错出来。 不支持字符串查询 data URL的数据部分是不透明的,所以如果使用query string(比如<url>?parameter-data)去查询时,将只在数据中包含URL的查询字符串。也就是说查询无效,query也会被当做数据的一部分。 安全问题 许多安全问题(如网络钓鱼)都与data url相关,并在浏览器的顶层导航到它们。 以上就是JS data URL的详细内容,更多关于JS的资料请关注极客世界其它相关文章! |
请发表评论