很少用到,但掏出来让人感到牛逼的Web API

2020-09-28 09:58:27 浏览数 (1)

前几天听到同事突然喊道:“还能这样?”

我过去一看,原来是对canvas画布转成了File文件,用到了一些比如blobToFile方法。

这也让我反思,平常我们沉浸于复杂的业务,用的却是丰富的web api中的一角。以至于当实现我们不熟悉的业务的同时,竟然不知道该如何去实现。今天就来说说那些不常见的web api,找回刷文档的快乐。

我要是有两个妹子看着我写代码,我也快乐啊

1.getSelection()

首先是getSelection() 方法,可以返回一个 Selection 对象,表示用户选择的文本范围或光标的当前位置。

代码语言:javascript复制
window.getSelection() //

2.datatransfer

使用datatransfer实现的拖拽

DataTransfer 对象用于保存拖动并放下(drag and drop)过程中的数据。当我们拖放文件、图片等等数据的时候就需要用到这个API.

代码语言:javascript复制
document.addEventListenter((event) => {
  console.log(event.dataTransfer.getData("text/plain")); // 获取拖动的文字
  console.log(event.dataTransfer.getData(event.dataTransfer.getData("text/uri-list"))); // 获取拖动的文字
    })

更多文档查看(https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer)

3.Canvas图片 to File

有时候canvas处理了图片,需要传给服务器。那么需要转换成文件对象。

为了兼容ios 需要 dataURL-> blob -> file

代码语言:javascript复制
var dataURL = canvas.toDataURL("image/jpeg", ratio);
var blob = dataURLtoBlob(dataURL);
var file = blobToFile(blob, '999');	

4.EventSource

有时碰到需要服务器去通知我们发生了某事件,而不是轮询服务器查询是否发生了什么事件。这时就可以用到EventSource。

代码语言:javascript复制
	if (typeof (EventSource) !== "undefined") {
		var source = new EventSource("/sse/countDown");
		console.log(source);
		source.addEventListener("countDown", function(e) {
			document.getElementById("result").innerHTML = e.data;
		}, false);//使用false表示在冒泡阶段处理事件,而不是捕获阶段。
	} else {
		document.getElementById("result").innerHTML = "抱歉,你的浏览器不支持 server-sent 事件...";

结束了

各位看官,你还有哪些让你觉得眼前一亮的API吗?

0 人点赞