vue實(shí)現(xiàn)復(fù)制文字復(fù)制圖片實(shí)例詳解
正文
復(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)剪貼板的讀寫訪問(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(): 寫入任意數(shù)據(jù)至操作系統(tǒng)剪貼板。這是一個(gè)異步操作,在操作完成后,返回的 promise 的將被兌現(xiàn)。
- writeText(): 寫入文本至操作系統(tǒng)剪貼板。返回一個(gè)
Promise
,在文本被完全寫入剪切板后,返回的 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)容寫入剪貼板中
具體代碼實(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)文章!
相關(guān)文章
vue-video-player 斷點(diǎn)續(xù)播的實(shí)現(xiàn)
這篇文章主要介紹了vue-video-player 斷點(diǎn)續(xù)播的實(shí)現(xiàn),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-02解決vue運(yùn)行報(bào)錯(cuò)Error:Cannot?find?module?'@vue/cli-plugin-b
解決了因?yàn)榘姹締?wèn)題在創(chuàng)建項(xiàng)目時(shí)出現(xiàn)的各種報(bào)錯(cuò)問(wèn)題,這次在運(yùn)行時(shí)出現(xiàn)的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于解決vue運(yùn)行報(bào)錯(cuò)Error:Cannot?find?module?'@vue/cli-plugin-babel'的相關(guān)資料,需要的朋友可以參考下2023-04-04vue中el-table多級(jí)嵌套列表(菜單使用el-switch代替)
本文主要介紹了el-table多級(jí)嵌套列表(菜單使用el-switch代替),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06解決Vite無(wú)法分析出動(dòng)態(tài)import的類型,控制臺(tái)出警告的問(wèn)題
這篇文章主要介紹了解決Vite無(wú)法分析出動(dòng)態(tài)import的類型,控制臺(tái)出警告的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03