日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
 
 

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

  
 
 
 

   
  
  
  

   
  
  
  
   
   
  
  
  
   
大家好，我是阿寶哥
   
  
  
  

 
 
 
 

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

 
 
 
 

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

 
 
 
 

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

 
 
 
 

  
  
  
  
拷貝當前頁面地址
  
  
  
  

 
 
 
 

 
 
 
 

  
  
  
  
拷貝當前頁面地址
  
  
  
  

 
 
 
 

 
 
 
 

  
  
  
  
讀取剪貼板中的文本
  
  
  
  

 
 
 
 

 
 
 
 

  
  
  
  
讀取剪貼板中的內(nèi)容
  
  
  
  

 
 
 
 

 
 
 
 

  
  
  
  

  
  
  
  
   
  
  
  
  
   
大家好，我是阿寶哥
  
  
  
  

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

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

默認情況下，會為當前的激活的頁面自動授予剪貼板的寫入權(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ù)，我們就需要獲取該圖像對應的 Blob 對象，這里我們可以通過 fetch API 從網(wǎng)絡上獲取圖像對應的響應對象并把它轉(zhuǎn)化成 Blob 對象，具體實現(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)建完圖像和普通文本對應的 Blob 對象之后，我們就可以利用它們來創(chuàng)建 ClipboardItem 對象，然后再調(diào)用 write 方法把這些數(shù)據(jù)寫入到剪貼板中，對應的代碼如下所示：

 
 
 
 

  
  
  
  
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("文本和圖像復制成功");
  
  
  
  
        } catch (error) {
  
  
  
  
          console.error("文本和圖像復制失敗", error);
  
  
  
  
        }
  
  
  
  
      }
  
  
  
  
   }
  
  
  
  
}
 
 
 
 

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

 
 
 
 

  
  
  
  
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;
  
  
  
  
  }
  
  
  
  
}
 
 
 
 

當調(diào)用 askReadPermission 方法后，將會向當前用戶請求剪貼板讀取權(quán)限，對應的效果如下圖所示：

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);
  
  
  
  
      }
  
  
  
  
     }
  
  
  
  
   }
  
  
  
  
}
 
 
 
 

其實，除了點擊 粘貼 按鈕之外，我們還可以通過監(jiān)聽 paste 事件來讀取剪貼板中的數(shù)據(jù)。需要注意的是，如果當前的瀏覽器不支持異步 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ù)，則可以通過以下方式進行讀取：

 
 
 
 

  
  
  
  
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 方法用于實現(xiàn)把復制的圖片插入到當前選區(qū)已選擇的區(qū)域中，對應的代碼如下：

 
 
 
 

  
  
  
  
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)聽了 document 對象的 paste 事件。除了該事件之外，與剪貼板相關(guān)的常見事件還有 copy 和 cut 事件。篇幅有限，阿寶哥就不繼續(xù)展開介紹了，感興趣的小伙伴可以自行閱讀相關(guān)資料。

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

六、參考資源

• 維基百科 - 剪貼板
• MDN - Clipboard
• MDN - execCommand
• Web.dev - async-clipboard