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

5.1 請求剪貼板寫權(quán)限

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

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

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

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

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

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

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

在創(chuàng)建完圖像和普通文本對應(yīng)的 Blob 對象之后，我們就可以利用它們來創(chuàng)建 ClipboardItem 對象，然后再調(diào)用 write  方法把這些數(shù)據(jù)寫入到剪貼板中，對應(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);         }       }    } }

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

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

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

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

這里我們定義了一個 askReadPermission 函數(shù)來向用戶請求剪貼板讀取權(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 方法后，將會向當(dāng)前用戶請求剪貼板讀取權(quán)限，對應(yīng)的效果如下圖所示：

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

創(chuàng)建好 askReadPermission 函數(shù)，我們就可以利用之前介紹的 navigator.clipboard.read  方法來讀取剪貼板的數(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)擊 粘貼 按鈕之外，我們還可以通過監(jiān)聽 paste 事件來讀取剪貼板中的數(shù)據(jù)。需要注意的是，如果當(dāng)前的瀏覽器不支持異步 Clipboard  API，我們可以通過 clipboardData.getData 方法來讀取剪貼板中的文本數(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); });

而對于圖像數(shù)據(jù)，則可以通過以下方式進(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ū)域中，對應(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); }

感謝各位的閱讀，以上就是“怎么實(shí)現(xiàn)復(fù)制圖像”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么實(shí)現(xiàn)復(fù)制圖像這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！