×

了解下toDataURL()方法的应用

作者:andy0012021.04.29来源:Web前端之家浏览:8845评论:0
关键词:jstoDataURL()

了解下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>

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js20210429a234.html

网友评论文明上网理性发言 已有0人参与

发表评论: