了解下toDataURL()方法的应用。
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>
<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> 
网友评论文明上网理性发言 已有0人参与
发表评论: