網(wǎng)站開發(fā)過程中，經(jīng)常需要點擊復(fù)制指定內(nèi)容的需求，網(wǎng)上搜索一下很多相關(guān)的JS復(fù)制代碼，但兼容性都很差，很多瀏覽器都不支持。

蝦技派找到一款非常好用的復(fù)制插件分享給大家。

clipboard.js是一個不依賴 Flash,將文本復(fù)制到剪貼板的插件，僅僅 2kb。

為什么有clipboard.js

將文本復(fù)制到剪貼板應(yīng)該不難。它不應(yīng)該需要數(shù)十個步驟來配置或數(shù)百個KB來加載。但最重要的是，它不應(yīng)該依賴于Flash或任何臃腫的框架。

這就是剪貼板存在.js的原因。

開始使用

下載clipboard.js頁面引用

<script src="dist/clipboard.min.js"></script>

或者直接引用cdn的

<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

現(xiàn)在，您需要通過傳遞DOM選擇器， HTML元素或HTML元素列表來實例化它。

new ClipboardJS('.btn');

實例：

<button class="btn" data-clipboard-text="這里是要被復(fù)制的內(nèi)容">點擊復(fù)制</button>

事件：

如果我們需要一些反饋，比如點擊復(fù)制時彈出提醒

<button class="btn-copy" data-clipboard-text="這里是要被復(fù)制的內(nèi)容">點擊復(fù)制</button>
<script>
var clipboard=new ClipboardJS('.btn-copy');
clipboard.on('success', function(e) {
  alert('已經(jīng)復(fù)制到剪切版');
});
clipboard.on('error', function(e) {
  console.log('復(fù)制失敗');
});
 </script>

高級用法：

如果您不想修改HTML，可以使用一個非常方便的命令性API。您需要做的就是聲明一個函數(shù)，執(zhí)行您的操作，然后返回一個值。

例如，如果要動態(tài)設(shè)置 ，則需要返回 Node。target

new ClipboardJS('.btn', {
    target: function(trigger) {        return trigger.nextElementSibling;
    }
});

如果要動態(tài)設(shè)置 ，將返回一個字符串。text

new ClipboardJS('.btn', {
    text: function(trigger) {        return trigger.getAttribute('aria-label');
    }
});

要在 Bootstrap Modals 中使用，或與任何其他更改焦點的庫一起使用，您需要將焦點元素設(shè)置為值。container

new ClipboardJS('.btn', {
    container: document.getElementById('modal')
});

此外，如果您使用的是單頁應(yīng)用程序，則可能需要更精確地管理 DOM 的生命周期。下面介紹了如何清理我們創(chuàng)建的事件和對象。

var clipboard=new ClipboardJS('.btn');
clipboard.destroy();

瀏覽器支持

此庫依賴于Select和execCommand API。所有瀏覽器都支持第一個，而以下瀏覽器支持第二個瀏覽器。

輕快、可直接播放的 GIF 小動畫很適合嵌入圖文。

但是很多圖文編輯器復(fù)制粘貼 GIF 圖像都會出現(xiàn)問題。例如粘貼GIF 變成一幀靜態(tài)圖像，或提示無效圖像，或粘貼正常但發(fā)布上傳時報錯 …… 然后我們只能挨個 GIF 都重復(fù)一遍：錄屏 > 壓縮 > 保存 > 添加圖像 > 上傳 > 插入文章 ……

使用極簡錄屏軟件 Gif123 可以大幅簡化上面的操作：Gif123 可以一鍵錄屏，一鍵復(fù)制動畫，在圖文編輯器里 Ctrl +Ｖ 一下粘貼動畫就可以解決所有問題。Gif123 復(fù)制的 GIF 格式擁有良好的兼容性，不會動畫變靜態(tài)圖像，不會提示無效圖像，上傳時不會報錯。

Gif123 簡介

Gif123 是一個開源軟件，體積很小只有 755KB，獨立 EXE 無任何外部依賴，兼容 Windows XP，Vista，Win7，Win8，Win10，Win11 …… 等所有流行桌面操作系統(tǒng)。

軟件極簡單，只有 3 個主要按鈕：錄制、預(yù)覽、復(fù)制。

Gif123 主窗口就是錄屏選框，可拖動選框選擇要錄制的區(qū)域。相比很多更復(fù)雜更強大的 GIF 錄制工具，Gif123 的操作非常簡單，一看就會。

Gif123 雖然很小，但是在 GIF 有限的顏色限制下仍然可以顯著提升畫質(zhì)。錄制完成以后可自動調(diào)用強悍的 Gifsicle 壓縮 GIF 文件體積。并且在高分屏下可自動壓縮 GIF 至正常分辨率 —— 以避免瀏覽圖像時重復(fù)放大。

Gif123 可錄制合成鼠標(biāo)軌跡，可調(diào)整鼠標(biāo)指針大小，可在設(shè)置中打開鼠標(biāo)指針高亮光圈功能，高亮光圈可跟隨鼠標(biāo)移動以指示鼠標(biāo)位置，單擊鼠標(biāo)時會顯示動畫光圈( 光圈顏色透明度為0 時僅顯示單擊動畫 )：

按左鍵光圈就會向左側(cè)壓縮成半圓，按右鍵光圈就會向右側(cè)壓縮成半圓，按中鍵就會向內(nèi)側(cè)縮小為小圓。很多錄屏軟件僅用顏色區(qū)分左右按鍵 —— 說實話這可能只有錄屏的人明白，看動畫的人估計分不清。

Gif123 最小化時按錄屏熱鍵可顯示快速選框：

切換到預(yù)覽模式且暫停后可編輯動畫幀，在預(yù)覽動畫上點右鍵可彈出菜單，可以暫停動畫幀（ 在圖像上按回車可以快速「暫停 / 繼續(xù)」播放動畫 ），動畫暫停狀態(tài)下可以使用鼠標(biāo)滾輪、幀滑塊控件、Page Up/Down ……等手動翻頁，暫停狀態(tài)可以方便地抽幀刪幀。

預(yù)覽模式可在上圖界面底部的輸入框中重新設(shè)置優(yōu)化參數(shù)。在參數(shù)輸入框中點任何一個參數(shù)的任何位置，按鼠標(biāo)滾輪可以快速調(diào)整數(shù)值，如下圖：

可實時預(yù)覽優(yōu)化效果與優(yōu)化后的文件體積。重新優(yōu)化總是基于原始圖像 —— 上次優(yōu)化設(shè)定不會影響當(dāng)前優(yōu)化效果。

我為什么要開發(fā) Gif123

Gif123 是我使用 aardio 開發(fā)的。至于 aardio 也是我開發(fā)的編程語言。關(guān)于 aardio 請參考文章：2022年，開發(fā)獨立 EXE 桌面應(yīng)用程序，用什么語言、技術(shù)合適

GIF 還是非常有用的，很多時候我們需要這種小、簡單、不復(fù)雜又夠用的東西。GIF 錄屏的工具雖然很多，但是用著用著有時候就發(fā)現(xiàn)不需要的功能很多，需要的功能它又沒有或者不方便，所以我決定自己用 aardio 寫一個，實際上要不了幾句代碼。

開發(fā)經(jīng)驗分享：揭開剪貼板的秘密

GIF 錄制好了，我們一般當(dāng)然是復(fù)制并分享了，如果我們打開圖像再去復(fù)制還是有些麻煩，能一鍵復(fù)制多好。但是這個看起來簡單的事 —— 還真是有些麻煩，首先系統(tǒng)剪貼板其實并不支持 GIF 圖像，所以很多軟件里復(fù)制 GIF 只復(fù)制了第一幀。

但是我們發(fā)現(xiàn) IE 是可以復(fù)制GIF的，有的文章說通過復(fù)制HTML就可以了，用 aardio 來寫實際上就是這樣：

import win.clip.html;
var html=win.clip.html();
html.write(`<img src="c:\test.gif" />`)

網(wǎng)上很多文章都這么寫，但實際上根據(jù)我的測試，這樣復(fù)制 GIF 以后瀏覽器或者其他一些軟件里并不能粘貼。

這個其實可以理解，瀏覽器是沒有權(quán)限訪問本地文件的，即使他得到了剪貼板中的HTML，也沒有權(quán)限去讀任意位置的本地文件，考慮到了這一點，我決定把本地圖像轉(zhuǎn)換為 Data URL 直接嵌入HTML，主要代碼如下：

import win.clip.html;
import crypt;

var html=win.clip.html();
var dataUrl=string.format('data:image/gif;base64,%s'
  ,crypt.encodeBin( string.loadBuffer(filePah),,0x40000001/*_CRYPT_STRING_BASE64*/) ); 
  
html.write(`<img src="`+ dataUrl+`" />`,,false);

上面的代碼實現(xiàn)了以后，我在瀏覽器圖文編輯器里測試了一下，用這種方法復(fù)制一個 GIF 文件以后，再到編輯器里 Ctrl + V 粘貼，看到了 GIF 動畫在編輯器里顯示出來了，還沒高興零點幾秒，彈出一個錯誤信息：粘貼圖像失敗。看了一下是遠(yuǎn)程錯誤，猜測他把這個當(dāng)作普通遠(yuǎn)程圖像地址去處理了。

然后在其他聊天軟件里試著粘貼了一下，也沒任何反應(yīng)。看來此路不通。看到有人說可以復(fù)制為 CF_HDROP 格式，好吧，aardio 干這事倒也方便，代碼如下：

import win.clip.file;
win.clip.file.write( filePath );

其實這等價于在資源管理器里右鍵復(fù)制文件。用上面的方法復(fù)制了圖像以后，到聊天軟件里粘貼試了一下，粘貼出來的是一個文件圖標(biāo)，并沒有認(rèn)出是 GIF 動畫。

想起之前看到有人說：

IE 能復(fù)制 GIF，但是在剪貼板里看到的只是靜態(tài)的 BMP 圖像，不知道 IE 是如何實現(xiàn)的，

難道 ……

于是試著在剪貼板里先復(fù)制 GIF 第一幀的靜態(tài)圖像，再復(fù)制文件本身（同時復(fù)制2種格式），用這種方法復(fù)制了一個 GIF 圖像，然后到 聊天工具里粘貼，這回粘貼出來的還真是 GIF 動畫 ，直接就顯示預(yù)覽動畫了 —— 完美！

然后打開瀏覽器編輯器，試著粘貼了一下，遇到2種不同的反應(yīng)，第1種是出現(xiàn)了靜態(tài)圖像 —— 沒動畫，第2種是靜態(tài)圖像也沒有，細(xì)節(jié)沒有深究。想起之前復(fù)制 Data URL 失敗的過程，這難道是 …… 于是趕緊換第 3 種方法，復(fù)制第一幀靜態(tài)圖像，復(fù)制文件，然后再復(fù)制 Data URL ，一氣呵成三連擊以后終于成功了，瀏覽器編輯器里完美粘貼出來 GIF 動畫，試了很多軟件以及圖文編輯器也都能完美支持。

于是，我又加了一個庫 win.clip.gif，用起來就太簡單了：

import win.clip.gif;
win.clip.gif.write( filePath );

您看這就是 aardio 的好處了，像這種庫一天能寫一打出來，再復(fù)雜的代碼都可以簡化，這得益于 aardio 良好的模塊化支持。

言

作為一名資深搬磚工，你要問我用得最熟練的技能是什么，那我敢肯定且自豪的告訴你：是 Ctrl+C ！是 Ctrl+V！

不信？你來看看我鍵盤上的 Ctrl、C 和 V 鍵，那油光發(fā)亮的包漿程度，不盤個三五年是絕對達(dá)不到的！

編程界的江湖上曾經(jīng)流傳著一句話：CV da fa 好，CV da fa 妙！主要看療效，誰用誰知道！（為防河蟹，且用拼音湊合著）

從這句話就可以看出編程界的同仁們對 CV 的追捧和狂熱，簡直是席卷大街小巷、風(fēng)靡大江南北！一時之間，不知讓多少 IT 英雄們“競折腰”，即使到了現(xiàn)在，它依然是編程入門的必修技能！

那么，CV 到底有什么魔力，能讓人這么著迷，一代又一代的傳承不息呢？

今天，讓我們一起來揭開前端 JavaScript 開發(fā)界 CV 的面紗，一睹真容（套路）！

舊法

世界上最好的語言—— JavaScript，必然是有著訪問系統(tǒng)剪切板的功能的，主要依靠 Document.execCommand() 接口實現(xiàn)復(fù)制、粘貼、剪切等功能。

• document.execCommand('copy')
• document.execCommand('cut')
• document.execCommand('paste')

復(fù)制

const inputEle=document.querySelector('#input');
inputEle.select();
document.execCommand('copy');

首先獲取到這個 input 元素，然后選中 input 中的內(nèi)容，再調(diào)用復(fù)制接口，將 input 內(nèi)容復(fù)制到剪切板。

注意，復(fù)制操作最好放在事件監(jiān)聽函數(shù)里面，由用戶觸發(fā)（比如用戶點擊按鈕）。

粘貼

const pasteText=document.querySelector('#output');
pasteText.focus();
document.execCommand('paste');

首先讓 input 元素獲得焦點，然后調(diào)用粘貼接口，將剪切板內(nèi)容粘貼到 input。

剪切

用法同復(fù)制。

小結(jié)

從上面的示例來看，剪切板 API 用著很簡單，但它有以下不足：

1. 它不夠靈活，只能將選中的內(nèi)容復(fù)制到剪貼板，無法向剪貼板任意寫入內(nèi)容。
2. 它是同步操作，如果復(fù)制/粘貼大量數(shù)據(jù)，頁面會出現(xiàn)卡頓。
3. 有些瀏覽器還會跳出提示框，要求用戶許可，這時在用戶做出選擇前，頁面會失去響應(yīng)。

進(jìn)化 ——Clipboard

為了使 JavaScript 更加靈活的操作剪切板，也是為了順應(yīng) JS 發(fā)展的歷史潮流，Clipboard API 應(yīng)運而生。它是下一代的剪貼板操作方法，比傳統(tǒng)的document.execCommand()方法更強大、更合理。

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

它的所有操作都是異步的，返回 Promise 對象，不會造成頁面卡頓。而且，它可以將任意內(nèi)容（比如圖片）放入剪貼板。

該 API 被設(shè)計用來取代使用 document.execCommand() 的剪貼板訪問方式。

基本使用

navigator.clipboard 屬性返回 Clipboard 對象，所有操作都通過這個對象進(jìn)行。

(async ()=> {
    const text=await navigator.clipboard.readText();
    console.log(text);
})();

如果navigator.clipboard屬性返回undefined，就說明當(dāng)前瀏覽器不支持這個 API。

安全限制

1. Chrome 瀏覽器規(guī)定，只有 HTTPS 協(xié)議的頁面才能使用這個 API。不過，開發(fā)環(huán)境（localhost）允許使用非加密協(xié)議。
2. 調(diào)用時需要明確獲得用戶的許可。權(quán)限的具體實現(xiàn)使用了 Permissions API，跟剪貼板相關(guān)的有兩個權(quán)限：clipboard-write（寫權(quán)限）和clipboard-read（讀權(quán)限）。“寫權(quán)限”自動授予腳本，而“讀權(quán)限”必須用戶明確同意給予。也就是說，寫入剪貼板，腳本可以自動完成，但是讀取剪貼板時，瀏覽器會彈出一個對話框，詢問用戶是否同意讀取。

腳本讀取的總是當(dāng)前頁面的剪貼板。這帶來的一個問題是，如果把相關(guān)的代碼粘貼到開發(fā)者工具中直接運行，可能會報錯，因為這時的當(dāng)前頁面是開發(fā)者工具的窗口，而不是網(wǎng)頁頁面。

如果用戶沒有適時使用 Permissions API) 授予相應(yīng)權(quán)限和"clipboard-read" 或 "clipboard-write" 權(quán)限，調(diào)用 Clipboard 對象的方法不會成功。

方法

Clipboard 對象提供了四個方法，用來讀寫剪貼板。它們都是異步方法，返回 Promise 對象。

• read() 從剪貼板讀取數(shù)據(jù)（比如圖片），返回一個 Promise對象。
• readText() 從操作系統(tǒng)讀取文本，返回一個 Promise對象。
• write() 寫入任意數(shù)據(jù)至操作系統(tǒng)剪貼板。
• writeText() 寫入文本至操作系統(tǒng)剪貼板。

瀏覽器兼容性

目前，各個瀏覽器廠商正在逐步開始支持 Clipboard 對象及其方法，兼容性如下：

總結(jié)

對上面所說的做一個總結(jié)：

1. Clipboard 對象的方法，返回一個 Promise 對象
2. Clipboard 的使用存在一定的安全限制，需要注意。
3. 在控制臺運行 Clipboard 可能會報錯。

~

~

~ 本文完，感謝閱讀！

~

學(xué)習(xí)有趣的知識，結(jié)識有趣的朋友，塑造有趣的靈魂！

我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關(guān)注，希望大家多多指教！

你來，懷揣期望，我有墨香相迎！ 你歸，無論得失，唯以余韻相贈！

知識與技能并重，內(nèi)力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！