前幾天聽到同事突然喊道：“還能這樣？”
我過去一看，原來是對canvas畫布轉成了File文件，用到了一些比如blobToFile方法。
這也讓我反思，平常我們沉浸於複雜的業務，用的卻是豐富的web api中的一角。以至於當實現我們不熟悉的業務的同時，竟然不知道該如何去實現。今天就來說說那些不常見的web api，找回刷文檔的快樂。
我要是有兩個妹子看著我寫代碼，我也快樂啊
1.getSelection()
首先是getSelection() 方法,可以返回一個 Selection 對象，表示用戶選擇的文本範圍或光標的當前位置。
<code>window.getSelection() ///<code>
2.datatransfer
使用datatransfer實現的拖拽
DataTransfer 對象用於保存拖動並放下（drag and drop）過程中的數據。當我們拖放文件、圖片等等數據的時候就需要用到這個API.
<code>document.addEventListenter((event) => {
console.log(event.dataTransfer.getData("text/plain")); // 獲取拖動的文字
console.log(event.dataTransfer.getData(event.dataTransfer.getData("text/uri-list"))); // 獲取拖動的文字
})/<code>更多文檔查看（https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer）
3.Canvas圖片 to File
有時候canvas處理了圖片，需要傳給服務器。那麼需要轉換成文件對象。
為了兼容ios 需要 dataURL-> blob -> file
<code>var dataURL = canvas.toDataURL("image/jpeg", ratio);
var blob = dataURLtoBlob(dataURL);
var file = blobToFile(blob, '999'); /<code>4.EventSource
有時碰到需要服務器去通知我們發生了某事件，而不是輪詢服務器查詢是否發生了什麼事件。這時就可以用到EventSource。
<code> 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 事件...";
/<code> 
結束了
各位看官，你還有哪些讓你覺得眼前一亮的API嗎？
分享到:
關鍵字: dataTransfer log EventSource
