日韩无码专区无码一级三级片|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);
 
 
 
 

 
 
 
 

  
  
  
  
拷貝當(dāng)前頁(yè)面地址
  
  
  
  

 
 
 
 

 
 
 
 

  
  
  
  
拷貝當(dāng)前頁(yè)面地址
  
  
  
  

 
 
 
 

 
 
 
 

  
  
  
  
讀取剪貼板中的文本
  
  
  
  

 
 
 
 

 
 
 
 

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

 
 
 
 

 
 
 
 

  
  
  
  

  
  
  
  
   
  
  
  
  
   
大家好，我是阿寶哥
  
  
  
  

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

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

默認(rèn)情況下，會(huì)為當(dāng)前的激活的頁(yè)面自動(dòng)授予剪貼板的寫入權(quán)限。出于安全方面考慮，這里我們還是主動(dòng)向用戶請(qǐng)求剪貼板的寫入權(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 對(duì)象提供的 write 方法。如果要寫入圖像數(shù)據(jù)，我們就需要獲取該圖像對(duì)應(yīng)的 Blob 對(duì)象，這里我們可以通過 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ù)寫入到剪貼板中，對(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);
  
  
  
  
}
 
 
 
 

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

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

這里我們定義了一個(gè) askReadPermission 函數(shù)來(lái)向用戶請(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)前用戶請(qǐng)求剪貼板讀取權(quán)限，對(duì)應(yīng)的效果如下圖所示：

5.4 讀取剪貼板中已寫入的數(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)擊 粘貼 按鈕之外，我們還可以通過監(jiān)聽 paste 事件來(lái)讀取剪貼板中的數(shù)據(jù)。需要注意的是，如果當(dāng)前的瀏覽器不支持異步 Clipboard API，我們可以通過 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ù)，則可以通過以下方式進(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)聽了 document 對(duì)象的 paste 事件。除了該事件之外，與剪貼板相關(guān)的常見事件還有 copy 和 cut 事件。篇幅有限，阿寶哥就不繼續(xù)展開介紹了，感興趣的小伙伴可以自行閱讀相關(guān)資料。

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

六、參考資源

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