瀏覽器 Web 訪問剪切板圖片

前言

有時候，咱們但願能訪問用戶的剪切板，來實現一些方便用戶的功能；可是另外一方面，剪切板裏的數據對用戶來講又是很是隱私的，因此瀏覽器在獲取信息方面有安全限制，同時也提供訪問接口。

前段時間因爲業務功能，須要實現當用戶在富文本里進行粘貼操做的時候，若是用戶複製的是圖片，須要將圖片上傳服務器後，插入到文本內；看似合情合理的要求，卻有不少坑

1、何時能訪問剪切板

一、在用戶觸發 onPaste 事件時（只能是用戶進行事件觸發），經過事件對象（event）獲取。官方文檔

let text = (event.clipboardData || window.clipboardData).getData('text');
複製代碼

二、Chrome 新增異步剪貼板 API，能夠跟用戶申請訪問權限，獲得容許後則能訪問。參考知乎的一篇文章

2、訪問剪切板裏的圖片

先說結論

從文件系統複製圖片	mac os能拿到最後一張；windows 拿不到數據
截圖	mac 和 windows 能獲取
在瀏覽器界面複製	mac 和 windows 能獲取

windows 爲何一張都拿不到呢，用戶在文件系統複製的文件，在剪切板裏存的並非圖片（猜想存的是圖片的標記），因此是拿不到。

代碼以下

/** * 觸發 paste 事件，響應方法 */
function paste(event) {
    // 拿到數據
    let items = (event.clipboardData || event.originalEvent.clipboardData).items;
	let imgList = []; // 得到圖片數據，能夠直接寫入到 <img src=''> 的src內進行展現 
    let strList = [];
    for (let item of items) {
      // 若是拿到的數據是文件
      if (item.kind === 'file') {
        let blob = item.getAsFile();
        let reader = new FileReader();
        blobList.push(blob);
        reader.onload = ()=> {
          imgList.push(reader.result);
        }
        reader.readAsDataURL(blob);
      } else if(item.kind === 'string') {
        // 若是拿到的數據是字符串
        item.getAsString((s)=>{
          strList.push(s);
        });
      }
    }
}
複製代碼

最後，想要徹底實現用戶 Contr+C、Contr+V 來發帖，目前還作不到。有一種替代方案，將圖片拖動到富文本區域，這個操做也是很方便的，瀏覽器也都支持。

另外有一個公司的商業產品，他家開發的瀏覽器插件能支持在桌面複製圖片後，粘貼到瀏覽器裏。惋惜目前只支持 windows 系統，mac os 尚未提供；

他們的方案我大體猜想是：安裝瀏覽器插件而且容許運行後，當你在瀏覽器觸發paste粘貼事件後，js調用插件方法，插件去訪問系統裏的文件（插件其實也是windows 的一個軟件，因此能訪問文件系統），而後返回給頁面的 js。