vue怎么實現復制文字和圖片

本篇內容主要講解“vue怎么實現復制文字和圖片”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue怎么實現復制文字和圖片”吧!

document.execCommand('copy')

在很久之前我們是使用document.execCommand('copy')來實現復制文本的，但是現在mdn上已經將這個命令廢棄了。

當一個 HTML 文檔切換到設計模式時，document暴露 execCommand 方法，該方法允許運行命令來操縱可編輯內容區域的元素。如果傳入copy命令，那么就能實現復制的功能。

比如像下面這樣

  // 復制文字
  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 接口實現了 Clipboard API，如果用戶授予了相應的權限，其就能提供系統剪貼板的讀寫訪問能力。在 Web 應用程序中，Clipboard API 可用于實現剪切、復制和粘貼功能。

方法

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

• read():從剪貼板讀取數據（比如圖片），返回一個 Promise對象。在檢索到數據后，promise 將兌現一個 ClipboardItem對象的數組來提供剪切板數據。

• readText():從操作系統讀取文本；返回一個 Promise，在從剪切板中檢索到文本后，promise 將兌現一個包含剪切板文本數據的 DOMString。

• write(): 寫入任意數據至操作系統剪貼板。這是一個異步操作，在操作完成后，返回的 promise 的將被兌現。

• writeText(): 寫入文本至操作系統剪貼板。返回一個 Promise，在文本被完全寫入剪切板后，返回的 promise 將被兌現。

復制文本

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

具體代碼實現如下：

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

復制圖片

復制圖片主要用到navigator.clipboard.write()方法。 因為我們在頁面中通常是要根據一個img元素復制圖片，主要實現思路如下：

• 先將img元素轉成base64

• 再將base64轉成blob對象

• 根據blob對象new一個ClipboardItem對象

• 最后再根據navigator.clipboard.writeText()將內容寫入剪貼板中

具體代碼實現如下：

  // 圖片元素轉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圖片轉為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 });
  },
  // 復制圖片
  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('圖片復制失敗！');
    });
  }

到此，相信大家對“vue怎么實現復制文字和圖片”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！