想要復(fù)制圖像？Clipboard API 了解一下

作者：阿寶哥 2020-12-21 05:56:54

開(kāi)發(fā) 前端

本文帶領(lǐng)大家對(duì)異步的 Clipboard API 的一些學(xué)習(xí)和了解，希望能對(duì)你有所幫助。

[[358841]]

在寫(xiě)了這個(gè) 29.7 K 的剪貼板 JS 庫(kù)有點(diǎn)東西! 這篇文章之后，收到了小伙伴提的兩個(gè)問(wèn)題：

1.clipboard.js 這個(gè)庫(kù)除了復(fù)制文字之外，能復(fù)制圖像么?

2.clipboard.js 這個(gè)庫(kù)依賴(lài)的 document.execCommand API 已被廢棄了，以后應(yīng)該怎么辦?

(圖片來(lái)源：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand)

接下來(lái)，本文將圍繞上述兩個(gè)問(wèn)題展開(kāi)，不過(guò)在看第一個(gè)問(wèn)題之前，我們先來(lái)簡(jiǎn)單介紹一下剪貼板 📋。

剪貼板(英語(yǔ)：clipboard)，有時(shí)也稱(chēng)剪切板、剪貼簿、剪貼本。它是一種軟件功能，通常由操作系統(tǒng)提供，作用是使用復(fù)制和粘貼操作短期存儲(chǔ)數(shù)據(jù)和在文檔或應(yīng)用程序間轉(zhuǎn)移數(shù)據(jù)。它是圖形用戶(hù)界面(GUI)環(huán)境中最常用的功能之一，通常實(shí)現(xiàn)為匿名、臨時(shí)的數(shù)據(jù)緩沖區(qū)，可以被環(huán)境內(nèi)的大部分或所有程序使用編程接口訪(fǎng)問(wèn)。—— 維基百科

通過(guò)以上的描述我們可以知道，剪貼板架起了一座橋梁，使得在各種應(yīng)用程序之間，傳遞和共享信息成為可能。然而美中不足的是，剪貼板只能保留一份數(shù)據(jù)，每當(dāng)新的數(shù)據(jù)傳入，舊的便會(huì)被覆蓋。

了解完剪貼板 📋 的概念和作用之后，我們馬上來(lái)看一下第一個(gè)問(wèn)題：clipboard.js 這個(gè)庫(kù)除了復(fù)制文字之外，能復(fù)制圖像么?

一、clipboard.js 能否復(fù)制圖像?

clipboard.js 是一個(gè)用于將文本復(fù)制到剪貼板的 JS 庫(kù)。沒(méi)有使用 Flash，沒(méi)有使用任何框架，開(kāi)啟 gzipped 壓縮后僅僅只有 3kb。

(圖片來(lái)源：https://clipboardjs.com/#example-text)

當(dāng)你看到 “A modern approach to copy text to clipboard” 這個(gè)描述，你是不是已經(jīng)知道答案了。那么實(shí)際的情況是怎樣呢?下面我們來(lái)動(dòng)手驗(yàn)證一下。在這個(gè) 29.7 K 的剪貼板 JS 庫(kù)有點(diǎn)東西! 這篇文章中，阿寶哥介紹了在實(shí)例化 ClipboardJS 對(duì)象時(shí)，可以通過(guò) options 對(duì)象的 target 屬性來(lái)設(shè)置復(fù)制的目標(biāo)：

// https://github.com/zenorocha/clipboard.js/blob/master/demo/function-target.html 
let clipboard = new ClipboardJS('.btn', { 
  target: function() { 
    return document.querySelector('div'); 
  } 
});

利用 clipboard.js 的這個(gè)特性，我們可以定義以下 HTML 結(jié)構(gòu)：

<div id="container"> 
   <img src="http://cdn.semlinker.com/abao.png" width="80" height="80"/> 
   <p>大家好，我是阿寶哥</p> 
</div> 
<button class="btn">復(fù)制</button>

然后在實(shí)例化 ClipboardJS 對(duì)象時(shí)設(shè)置復(fù)制的目標(biāo)是 #container 元素：

const clipboard = new ClipboardJS(".btn", { 
  target: function () { 
    return document.querySelector("#container"); 
  } 
});

之后，我們點(diǎn)擊頁(yè)面中的復(fù)制按鈕，對(duì)應(yīng)的效果如下圖所示：

觀(guān)察上圖可知，頁(yè)面中的圖像和文本都已經(jīng)被復(fù)制了。對(duì)于文本來(lái)說(shuō)，大家應(yīng)該都很清楚。而對(duì)于圖像來(lái)說(shuō)，到底復(fù)制了什么?我們又該如何獲取已復(fù)制的內(nèi)容呢?針對(duì)這個(gè)問(wèn)題，我們可以利用 HTMLElement 對(duì)象上的 onpaste 屬性或者監(jiān)聽(tīng)元素上的 paste 事件。

這里我們通過(guò)設(shè)置 document 對(duì)象的 onpaste 屬性，來(lái)打印一下粘貼事件對(duì)應(yīng)的事件對(duì)象：

document.onpaste = function (e) { 
  console.dir(e); 
}

當(dāng)我們點(diǎn)擊復(fù)制按鈕，然后在頁(yè)面執(zhí)行粘貼操作后，控制臺(tái)會(huì)打印出以下內(nèi)容：

通過(guò)上圖可知，在 ClipboardEvent 對(duì)象中含有一個(gè) clipboardData 屬性，該屬性包含了與剪貼板相關(guān)聯(lián)的數(shù)據(jù)。詳細(xì)分析了 clipboardData 屬性之后，我們發(fā)現(xiàn)已復(fù)制的圖像和普通文本被封裝為 DataTransferItem 對(duì)象。

為了更方便地分析 DataTransferItem 對(duì)象，阿寶哥重新更新了 document 對(duì)象的 onpaste屬性：

在上圖中，我們可以清楚的看到 DataTransferItem 對(duì)象上含有 kind 和 type 屬性分別用于表示數(shù)據(jù)項(xiàng)的類(lèi)型(string 或 file)及數(shù)據(jù)對(duì)應(yīng)的 MIME 類(lèi)型。利用 DataTransferItem 對(duì)象提供的 getAsString 方法，我們可以獲取該對(duì)象中保存的數(shù)據(jù)：

相信看完以上的輸出結(jié)果，小伙伴們就很清楚第一個(gè)問(wèn)題的答案了。那么如果想要復(fù)制圖像的話(huà)，應(yīng)該如何實(shí)現(xiàn)呢?其實(shí)這個(gè)問(wèn)題的答案與小伙伴提的第二個(gè)問(wèn)題的答案是一樣的，我們可以利用 Clipboard API 來(lái)實(shí)現(xiàn)復(fù)制圖像的問(wèn)題及解決 document.execCommand API 已被廢棄的問(wèn)題。

接下來(lái)，我們的目標(biāo)就是實(shí)現(xiàn)復(fù)制圖像的功能了，因?yàn)橐玫?Clipboard API，所以阿寶哥先來(lái)介紹一下該 API。

二、Clipboard API 簡(jiǎn)介

Clipboard 接口實(shí)現(xiàn)了 Clipboard API，如果用戶(hù)授予了相應(yīng)的權(quán)限，就能提供系統(tǒng)剪貼板的讀寫(xiě)訪(fǎng)問(wèn)。在 Web 應(yīng)用程序中，Clipboard API 可用于實(shí)現(xiàn)剪切、復(fù)制和粘貼功能。該 API 用于取代通過(guò) document.execCommand API 來(lái)實(shí)現(xiàn)剪貼板的操作。

在實(shí)際項(xiàng)目中，我們不需要手動(dòng)創(chuàng)建 Clipboard 對(duì)象，而是通過(guò) navigator.clipboard來(lái)獲取 Clipboard 對(duì)象：

在獲取 Clipboard 對(duì)象之后，我們就可以利用該對(duì)象提供的 API 來(lái)訪(fǎng)問(wèn)剪貼板，比如：

navigator.clipboard.readText().then( 
  clipText => document.querySelector(".editor").innerText = clipText);

以上代碼將 HTML 中含有 .editor 類(lèi)的第一個(gè)元素的內(nèi)容替換為剪貼板的內(nèi)容。如果剪貼板為空，或者不包含任何文本，則元素的內(nèi)容將被清空。這是因?yàn)樵诩糍N板為空或者不包含文本時(shí)，readText 方法會(huì)返回一個(gè)空字符串。

在繼續(xù)介紹 Clipboard API 之前，我們先來(lái)看一下 Navigator API: clipboard 的兼容性：

(圖片來(lái)源：https://caniuse.com/mdn-api_navigator_clipboard)

異步剪貼板 API 是一個(gè)相對(duì)較新的 API，瀏覽器仍在逐漸實(shí)現(xiàn)它。由于潛在的安全問(wèn)題和技術(shù)復(fù)雜性，大多數(shù)瀏覽器正在逐步集成這個(gè) API。對(duì)于瀏覽器擴(kuò)展來(lái)說(shuō)，你可以請(qǐng)求 clipboardRead 和 clipboardWrite 權(quán)限以使用 clipboard.readText() 和 clipboard.writeText()。

好的，接下來(lái)阿寶哥來(lái)演示一下如何使用 clipboard 對(duì)象提供的 API 來(lái)操作剪貼板，以下示例的運(yùn)行環(huán)境是 Chrome 87.0.4280.88。

三、將數(shù)據(jù)寫(xiě)入到剪貼板

3.1 writeText()

writeText 方法可以把指定的字符串寫(xiě)入到系統(tǒng)的剪貼板中，調(diào)用該方法后會(huì)返回一個(gè) Promise 對(duì)象：

<button onclick="copyPageUrl()">拷貝當(dāng)前頁(yè)面地址</button> 
<script> 
   async function copyPageUrl() { 
     try { 
       await navigator.clipboard.writeText(location.href); 
       console.log("頁(yè)面地址已經(jīng)被拷貝到剪貼板中"); 
     } catch (err) { 
       console.error("頁(yè)面地址拷貝失敗: ", err); 
     } 
  } 
</script>

對(duì)于上述代碼，當(dāng)用戶(hù)點(diǎn)擊拷貝當(dāng)前頁(yè)面地址按鈕時(shí)，將會(huì)把當(dāng)前的頁(yè)面地址拷貝到剪貼板中。

3.2 write()

write 方法除了支持文本數(shù)據(jù)之外，還支持將圖像數(shù)據(jù)寫(xiě)入到剪貼板，調(diào)用該方法后會(huì)返回一個(gè) Promise 對(duì)象。

<button onclick="copyPageUrl()">拷貝當(dāng)前頁(yè)面地址</button> 
<script> 
   async function copyPageUrl() { 
     const text = new Blob([location.href], {type: 'text/plain'}); 
     try { 
       await navigator.clipboard.write( 
         new ClipboardItem({ 
           "text/plain": text, 
         }), 
       ); 
       console.log("頁(yè)面地址已經(jīng)被拷貝到剪貼板中"); 
     } catch (err) { 
       console.error("頁(yè)面地址拷貝失敗: ", err); 
     } 
  } 
</script>

在以上代碼中，我們先通過(guò) Blob API 創(chuàng)建 Blob 對(duì)象，然后使用該 Blob 對(duì)象來(lái)構(gòu)造 ClipboardItem 對(duì)象，最后再通過(guò) write 方法把數(shù)據(jù)寫(xiě)入到剪貼板。介紹完如何將數(shù)據(jù)寫(xiě)入到剪貼板，下面我們來(lái)介紹如何從剪貼板中讀取數(shù)據(jù)。

四、從剪貼板中讀取數(shù)據(jù)

4.1 readText()

readText 方法用于讀取剪貼板中的文本內(nèi)容，調(diào)用該方法后會(huì)返回一個(gè) Promise 對(duì)象：

<button onclick="getClipboardContents()">讀取剪貼板中的文本</button> 
<script> 
   async function getClipboardContents() { 
     try { 
       const text = await navigator.clipboard.readText(); 
       console.log("已讀取剪貼板中的內(nèi)容：", text); 
     } catch (err) { 
       console.error("讀取剪貼板內(nèi)容失敗: ", err); 
     } 
   } 
</script>

對(duì)于上述代碼，當(dāng)用戶(hù)點(diǎn)擊讀取剪貼板中的文本按鈕時(shí)，如果當(dāng)前剪貼板含有文本內(nèi)容，則會(huì)讀取剪貼板中的文本內(nèi)容。

4.2 read()

read 方法除了支持讀取文本數(shù)據(jù)之外，還支持讀取剪貼板中的圖像數(shù)據(jù)，調(diào)用該方法后會(huì)返回一個(gè) Promise 對(duì)象：

<button onclick="getClipboardContents()">讀取剪貼板中的內(nèi)容</button> 
<script> 
async function getClipboardContents() { 
  try { 
    const clipboardItems = await navigator.clipboard.read(); 
    for (const clipboardItem of clipboardItems) { 
      for (const type of clipboardItem.types) { 
        const blob = await clipboardItem.getType(type); 
        console.log("已讀取剪貼板中的內(nèi)容：", await blob.text()); 
      } 
    } 
  } catch (err) { 
      console.error("讀取剪貼板內(nèi)容失敗: ", err); 
    } 
  } 
</script>

對(duì)于上述代碼，當(dāng)用戶(hù)點(diǎn)擊讀取剪貼板中的內(nèi)容按鈕時(shí)，則會(huì)開(kāi)始讀取剪貼板中的內(nèi)容。到這里 clipboard 對(duì)象中涉及的 4 個(gè) API，阿寶哥都已經(jīng)介紹完了，最后我們來(lái)看一下如何實(shí)現(xiàn)復(fù)制圖像的功能。

五、實(shí)現(xiàn)復(fù)制圖像的功能

在最后的這個(gè)示例中，阿寶哥將跟大家一步步實(shí)現(xiàn)復(fù)制圖像的核心功能，除了復(fù)制圖像之外，還會(huì)同時(shí)支持復(fù)制文本。在看具體代碼前，我們先來(lái)看一下實(shí)際的效果：

在上圖對(duì)應(yīng)的網(wǎng)頁(yè)中，我們先點(diǎn)擊復(fù)制按鈕，則圖像和文本都會(huì)被選中。之后，我們?cè)邳c(diǎn)擊粘貼按鈕，則控制臺(tái)會(huì)輸出從剪貼板中讀取的實(shí)際內(nèi)容。在分析具體的實(shí)現(xiàn)方式前，我們先來(lái)看一下對(duì)應(yīng)的頁(yè)面結(jié)構(gòu)：

<div id="container"> 
   <img src="http://cdn.semlinker.com/abao.png" width="80" height="80" /> 
   <p>大家好，我是阿寶哥</p> 
</div> 
<button onclick="writeDataToClipboard()">復(fù)制</button> 
<button onclick="readDataFromClipboard()">粘貼</button>

上面的頁(yè)面結(jié)構(gòu)很簡(jiǎn)單，下一步我們來(lái)逐步分析一下以上功能的實(shí)現(xiàn)過(guò)程。

5.1 請(qǐng)求剪貼板寫(xiě)權(quán)限

默認(rèn)情況下，會(huì)為當(dāng)前的激活的頁(yè)面自動(dòng)授予剪貼板的寫(xiě)入權(quán)限。出于安全方面考慮，這里我們還是主動(dòng)向用戶(hù)請(qǐng)求剪貼板的寫(xiě)入權(quán)限：

async function askWritePermission() { 
  try { 
    const { state } = await navigator.permissions.query({ 
      name: "clipboard-write", 
    }); 
      return state === "granted"; 
  } catch (error) { 
      return false; 
  } 
}

5.2 往剪貼板寫(xiě)入圖像和普通文本數(shù)據(jù)

要往剪貼板寫(xiě)入圖像數(shù)據(jù)，我們就需要使用 navigator.clipboard 對(duì)象提供的 write 方法。如果要寫(xiě)入圖像數(shù)據(jù)，我們就需要獲取該圖像對(duì)應(yīng)的 Blob 對(duì)象，這里我們可以通過(guò) fetch API 從網(wǎng)絡(luò)上獲取圖像對(duì)應(yīng)的響應(yīng)對(duì)象并把它轉(zhuǎn)化成 Blob 對(duì)象，具體實(shí)現(xiàn)方式如下：

async function createImageBlob(url) { 
  const response = await fetch(url); 
  return await response.blob(); 
}

而對(duì)于普通文本來(lái)說(shuō)，只需要使用前面介紹的 Blob API 就可以把普通文本轉(zhuǎn)換為 Blob 對(duì)象：

function createTextBlob(text) { 
  return new Blob([text], { type: "text/plain" }); 
}

在創(chuàng)建完圖像和普通文本對(duì)應(yīng)的 Blob 對(duì)象之后，我們就可以利用它們來(lái)創(chuàng)建 ClipboardItem 對(duì)象，然后再調(diào)用 write 方法把這些數(shù)據(jù)寫(xiě)入到剪貼板中，對(duì)應(yīng)的代碼如下所示：

async function writeDataToClipboard() { 
  if (askWritePermission()) { 
    if (navigator.clipboard && navigator.clipboard.write) { 
        const textBlob = createTextBlob("大家好，我是阿寶哥"); 
        const imageBlob = await createImageBlob( 
          "http://cdn.semlinker.com/abao.png" 
        ); 
        try { 
          const item = new ClipboardItem({ 
            [textBlob.type]: textBlob, 
            [imageBlob.type]: imageBlob, 
          }); 
          select(document.querySelector("#container")); 
          await navigator.clipboard.write([item]); 
          console.log("文本和圖像復(fù)制成功"); 
        } catch (error) { 
          console.error("文本和圖像復(fù)制失敗", error); 
        } 
      } 
   } 
}

在以上代碼中，使用了一個(gè) select 方法，該方法用于實(shí)現(xiàn)選擇的效果，對(duì)應(yīng)的代碼如下所示：

function select(element) { 
  const selection = window.getSelection(); 
  const range = document.createRange(); 
  range.selectNodeContents(element); 
  selection.removeAllRanges(); 
  selection.addRange(range); 
}

通過(guò) writeDataToClipboard 方法，我們已經(jīng)把圖像和普通文本數(shù)據(jù)寫(xiě)入剪貼板了。下面我們來(lái)使用 navigator.clipboard 對(duì)象提供的 read 方法，來(lái)讀取已寫(xiě)入的數(shù)據(jù)。如果你需要讀取剪貼板的數(shù)據(jù)，則需要向用戶(hù)請(qǐng)求 clipboard-read 權(quán)限。

5.3 請(qǐng)求剪貼板讀取權(quán)限

這里我們定義了一個(gè) askReadPermission 函數(shù)來(lái)向用戶(hù)請(qǐng)求剪貼板讀取權(quán)限：

async function askReadPermission() { 
  try { 
    const { state } = await navigator.permissions.query({ 
      name: "clipboard-read", 
    }); 
    return state === "granted"; 
  } catch (error) { 
    return false; 
  } 
}

當(dāng)調(diào)用 askReadPermission 方法后，將會(huì)向當(dāng)前用戶(hù)請(qǐng)求剪貼板讀取權(quán)限，對(duì)應(yīng)的效果如下圖所示：

5.4 讀取剪貼板中已寫(xiě)入的數(shù)據(jù)

創(chuàng)建好 askReadPermission 函數(shù)，我們就可以利用之前介紹的 navigator.clipboard.read 方法來(lái)讀取剪貼板的數(shù)據(jù)了：

async function readDataFromClipboard() { 
  if (askReadPermission()) { 
    if (navigator.clipboard && navigator.clipboard.read) { 
      try { 
        const clipboardItems = await navigator.clipboard.read(); 
        for (const clipboardItem of clipboardItems) { 
          console.dir(clipboardItem); 
          for (const type of clipboardItem.types) { 
            const blob = await clipboardItem.getType(type); 
            console.log("已讀取剪貼板中的內(nèi)容：", await blob.text()); 
          } 
        } 
      } catch (err) { 
         console.error("讀取剪貼板內(nèi)容失敗: ", err); 
      } 
     } 
   } 
}

其實(shí)，除了點(diǎn)擊粘貼按鈕之外，我們還可以通過(guò)監(jiān)聽(tīng) paste 事件來(lái)讀取剪貼板中的數(shù)據(jù)。需要注意的是，如果當(dāng)前的瀏覽器不支持異步 Clipboard API，我們可以通過(guò) clipboardData.getData 方法來(lái)讀取剪貼板中的文本數(shù)據(jù)：

document.addEventListener('paste', async (e) => { 
  e.preventDefault(); 
  let text; 
  if (navigator.clipboard) { 
    text = await navigator.clipboard.readText(); 
  } else { 
    text = e.clipboardData.getData('text/plain'); 
  } 
  console.log('已獲取的文本數(shù)據(jù): ', text); 
});

而對(duì)于圖像數(shù)據(jù)，則可以通過(guò)以下方式進(jìn)行讀?。?/p>

const IMAGE_MIME_REGEX = /^image\/(p?jpeg|gif|png)$/i; 
 
document.addEventListener("paste", async (e) => { 
  e.preventDefault(); 
  if (navigator.clipboard) { 
    let clipboardItems = await navigator.clipboard.read(); 
    for (const clipboardItem of clipboardItems) { 
       for (const type of clipboardItem.types) { 
         if (IMAGE_MIME_REGEX.test(type)) { 
           const blob = await clipboardItem.getType(type); 
           loadImage(blob); 
           return; 
         } 
        } 
     } 
   } else { 
       const items = e.clipboardData.items; 
       for (let i = 0; i < items.length; i++) { 
         if (IMAGE_MIME_REGEX.test(items[i].type)) { 
         loadImage(items[i].getAsFile()); 
         return; 
       } 
    } 
  } 
});

以上代碼中的 loadImage 方法用于實(shí)現(xiàn)把復(fù)制的圖片插入到當(dāng)前選區(qū)已選擇的區(qū)域中，對(duì)應(yīng)的代碼如下：

function loadImage(file) { 
  const reader = new FileReader(); 
  reader.onload = function (e) { 
    let img = document.createElement("img"); 
    img.src = e.target.result; 
 
    let range = window.getSelection().getRangeAt(0); 
    range.deleteContents(); 
    range.insertNode(img); 
  }; 
  reader.readAsDataURL(file); 
}

在前面代碼中，我們監(jiān)聽(tīng)了 document 對(duì)象的 paste 事件。除了該事件之外，與剪貼板相關(guān)的常見(jiàn)事件還有 copy 和 cut 事件。篇幅有限，阿寶哥就不繼續(xù)展開(kāi)介紹了，感興趣的小伙伴可以自行閱讀相關(guān)資料。

好的，至此本文就已經(jīng)結(jié)束了，希望閱讀完本文之后，大家對(duì)異步的 Clipboard API 會(huì)有些了解。

六、參考資源