目錄

• 正文
• 方法
• 復(fù)制文本
• 復(fù)制圖片

正文

復(fù)制文字和圖片是我們經(jīng)常會(huì)使用到的需求，我們這篇文章主要介紹使用navigator.clipboard.write()來(lái)實(shí)現(xiàn)復(fù)制文字和圖片。不過(guò)這個(gè)屬性是需要考慮瀏覽器的兼容性的，可以參考MDN

document.execCommand('copy')

在很久之前我們是使用document.execCommand('copy')來(lái)實(shí)現(xiàn)復(fù)制文本的，但是現(xiàn)在mdn上已經(jīng)將這個(gè)命令廢棄了。

當(dāng)一個(gè) HTML 文檔切換到設(shè)計(jì)模式時(shí)，document暴露 execCommand 方法，該方法允許運(yùn)行命令來(lái)操縱可編輯內(nèi)容區(qū)域的元素。如果傳入copy命令，那么就能實(shí)現(xiàn)復(fù)制的功能。

比如像下面這樣

  // 復(fù)制文字
  copyText(link, cb) {
    let input = document.createElement("textarea");
    input.style.cssText = "position: absolute; top: 0; left: 0; opacity: 0; z-index: -10;";
    input.value = link;
    document.body.appendChild(input);
    input.select();
    document.execCommand("copy");
    document.body.removeChild(input);
    if (typeof cb === "function") {
      cb();
    }
  }

Clipboard

Clipboard 接口實(shí)現(xiàn)了 Clipboard API，如果用戶授予了相應(yīng)的權(quán)限，其就能提供系統(tǒng)剪貼板的讀寫(xiě)訪問(wèn)能力。在 Web 應(yīng)用程序中，Clipboard API 可用于實(shí)現(xiàn)剪切、復(fù)制和粘貼功能。

方法

Clipboard提供了以下方法，方便我們讀取剪切板的內(nèi)容。

• read():從剪貼板讀取數(shù)據(jù)（比如圖片），返回一個(gè) Promise對(duì)象。在檢索到數(shù)據(jù)后，promise 將兌現(xiàn)一個(gè) ClipboardItem對(duì)象的數(shù)組來(lái)提供剪切板數(shù)據(jù)。
• readText():從操作系統(tǒng)讀取文本；返回一個(gè) Promise，在從剪切板中檢索到文本后，promise 將兌現(xiàn)一個(gè)包含剪切板文本數(shù)據(jù)的 DOMString。
• write(): 寫(xiě)入任意數(shù)據(jù)至操作系統(tǒng)剪貼板。這是一個(gè)異步操作，在操作完成后，返回的 promise 的將被兌現(xiàn)。
• writeText(): 寫(xiě)入文本至操作系統(tǒng)剪貼板。返回一個(gè) Promise，在文本被完全寫(xiě)入剪切板后，返回的 promise 將被兌現(xiàn)。

復(fù)制文本

復(fù)制文本的方法很簡(jiǎn)單，就是使用navigator.clipboard.writeText()方法。

具體代碼實(shí)現(xiàn)如下：

copyTextToClipboard(text) {
  return new Promise((resolve, reject) => {
    navigator.clipboard.writeText(text).then(
      () => {
resolve(true)
      },
      () => {
reject(new Error("復(fù)制失敗"))
      }
    )
  })
}

復(fù)制圖片

復(fù)制圖片主要用到navigator.clipboard.write()方法。 因?yàn)槲覀冊(cè)陧?yè)面中通常是要根據(jù)一個(gè)img元素復(fù)制圖片，主要實(shí)現(xiàn)思路如下：

• 先將img元素轉(zhuǎn)成base64
• 再將base64轉(zhuǎn)成blob對(duì)象
• 根據(jù)blob對(duì)象new一個(gè)ClipboardItem對(duì)象
• 最后再根據(jù)navigator.clipboard.writeText()將內(nèi)容寫(xiě)入剪貼板中

具體代碼實(shí)現(xiàn)如下：

  // 圖片元素轉(zhuǎn)base64
  getBase64Image(img) {
    let canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    let ctx = canvas.getContext("2d");
    ctx?.drawImage(img, 0, 0, img.width, img.height);
    let dataURL = canvas.toDataURL("image/png");
    return dataURL;
  },
  // base64圖片轉(zhuǎn)為blob
  getBlobImage(dataurl) {
    let arr = dataurl.split(",");
    let mime = arr[0].match(/:(.*?);/)[1];
    let bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
  },
  // 復(fù)制圖片
  copyImage(dom, cb) {
    let dataurl = this.getBase64Image(dom);
    let blob = this.getBlobImage(dataurl);
    navigator.clipboard.write([
      new window.ClipboardItem({
[blob.type]: blob
      })
    ]).then(function() {
      if (typeof cb === "function") {
cb();
      }
    }, function() {
      console.log("圖片復(fù)制失敗！");
    });
  }

以上就是vue實(shí)現(xiàn)復(fù)制文字復(fù)制圖片實(shí)例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue復(fù)制文字圖片的資料請(qǐng)關(guān)注其它相關(guān)文章！