JS實現將圖片復制到剪貼板

MageekChiu 發布于2019-08-22 18:02 / 2151人閱讀

摘要：前言最近項目新增需求用戶能夠拖拽頁面上的圖片文件到文檔。在現有的拖拽事件所提供無法滿足需求的情況下，換一個思路走嘗試將圖片復制到剪貼板。只復制目標節點的子節點，對于標簽，如果不額外包裹一層父元素，無法實現圖片復制。

前言

最近項目新增需求：用戶能夠拖拽頁面上的圖片文件到word文檔。
當操作瀏覽器里拖拽圖片至別的程序，在word文檔中展示出獲取到的只是圖片的url地址，而非預期的圖片文件。在現有的拖拽事件所提供api無法滿足需求的情況下，換一個思路走：嘗試將圖片復制到剪貼板。

對于原生js的復制操作，已有封裝好的庫clipboard.js，但是封裝得太死，無法滿足更多定制化的需求，主要表現在以下兩點：

只接受click事件，無法綁定其他事件。

只復制目標節點的子節點，對于img標簽，如果不額外包裹一層父元素，無法實現圖片復制。

參考clipboard.js源碼，了解了實現原理后（其實非常簡單！:) ），我們就能自己動手封裝一個復制方法：

概述 Range對象

Range表示包含節點和部分文本節點的文檔片段。最常見的就是用戶在瀏覽器拖動鼠標選擇的內容（user selection）

比如上圖這塊藍色高亮區域。

在現代瀏覽器中（IE9以上），你可以通過Document.createRange()方法或者new Range()創建一個Range對象；當需要獲取user selection時,你應該使用window.getSelection()方法獲取Selection對象。

有點懵？

剛了解了Range對象，而Selection對象又是什么？閱讀了文檔之后，還是疑惑它們之間的區別？

Selection對象表示用戶的選擇，而Range對象則表示文檔的連續部分，與任何視覺表示無關。一個Selection對象幾乎可由0到多個Range表示出來，當然，Range對象也能獨立于Selection而被完全的創建和修改。

簡單的演示代碼

html部分：

這是一段文字 AAAAAAAAAA BBBBBBBBBB Range

js部分：

var btn1 = document.getElementById("button1"),
    btn2 = document.getElementById("button2"),
    input = document.getElementById("input"),
    rangespan = document.getElementById("range");
    
var selection = window.getSelection(),
    range = document.createRange();
btn1.addEventListener("click", function(event) {
    input.value = selection.toString();
}); 
btn2.addEventListener("click", function(event) {
    range.selectNode(rangespan);
    selection.removeAllRanges(); //刪除包含在selection原本的range,也就是取消用戶選中的范圍
    selection.addRange(range); //讓選中部分變成我們自己定義的節點內容
});

演示地址：

https://jsfiddle.net/muvhqcnf...

一點就會 :)

兼容陳舊IE版本

Microsoft提供了類似的TextRange接口。
在實際代碼部分會展示Microsoft TextRange的基本使用。

execCommand方法

execCommand方法允許運行命令來操縱可編輯區域的內容。該方法的第一個參數是命令的名稱，參數類型為DOMString。
在這里，我們將利用execCommand方法的copy命令實現復制選中的內容：

document.execCommand("copy")

execCommand API起源于IE，后來被添加到HTML5（HTML Editing APIs）,在各瀏覽器的表現會有不同。更多請查看文檔。

我們回到前面的演示代碼，將btn1的點擊事件替換成execCommand命令：

btn1.addEventListener("click", function(event) {
    //input.value = selection.toString();
    document.execCommand("copy");
});

拖動鼠標選擇文字，點擊按鈕后看看能粘貼出什么:)

復制圖片功能的具體實現 封裝可以兼容ie的getSelect方法

還記得前面的例子里，我們通過range的selectNode(node)方法獲取節點，再使用selection的removeAllRanges()方法和addRange(range)將節點替換我們獲取的節點。在這里，我們同樣可以這樣選中我們目標的img節點：

const getSelect = targetNode => {
  if (window.getSelection) {
    //chrome等主流瀏覽器
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNode(targetNode);
    selection.removeAllRanges();
    selection.addRange(range);
  } else if (document.body.createTextRange) {
    //ie
    var range = document.body.createTextRange();
    range.moveToElementText(targetNode);
    range.select();
  }
}

派發事件

為了不浪費性能，我們使用事件委托到希望被復制的節點上。這里對傳入的nodeName進行處理，方便自由的控制被復制一個或多個節點類型。默認為。

const clipboardHandler = (nodeName, event) => {
  event = event || nodeName; //不傳參時
  const type = Object.prototype.toString.call(nodeName).replace(/[objects|]/g, "");
  const target = event.target || event.srcElement;

  var result = false;
  switch (type) {
    case "String":
      result = (target.nodeName.toLowerCase() === nodeName);
      break;
    case "Array":
      result = nodeName.some(item => target.nodeName.toLowerCase() === item);
      break;
    case "Object":
      nodeName = null;
    default:
      result = (target.nodeName === "IMG");
  }

  if (result) {
    //調用之前封裝好的getSelect方法
    getSelect(target);
    document.execCommand("copy");
  }
}

調用:

[element].addEventListener("mousedown", clipboardHandler); //預備拖動圖片按下鼠標時執行復制

傳遞參數(字符串或數組）:

var [somename]Handler = clipboardHandler.bind(null, [nodeName]);
[element].addEventListener([eventType],[somename]Handler);

完整代碼演示地址：

已驗證在chrome和ie8上可行（ie8需要對es6語法與bind和addEventListener方法進行pollyfill)

希望能夠幫助到你:)

GPU云服務器云服務器 js復制到剪貼板將安裝包復制到云服務器將工程復制到阿里云服務器可以復制圖片到云服務器上嗎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95425.html

Web聊天工具的富文本輸入框

摘要：由于我們的富文本輸入框比較簡單，所以只需要處理兩類數據即可，其一是普通的文本類型數據，包括表情其二則是圖片類型數據。最近折騰 Websocket，打算開發一個聊天室應用練練手。在應用開發的過程中發現可以插入 emoji ，粘貼圖片的富文本輸入框其實蘊含著許多有趣的知識，于是便打算記錄下來和大家分享。倉庫地址：chat-input-box預覽地址：https://codepen.io...

iKcamp 2019-08-23 15:36 評論0 收藏0
前端er怎樣操作剪切復制以及禁止復制+破解等

摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權信息超過一定長度的文字就添加版權信息作者鏈接來源掘金著作權歸作者所有。以上參考資料高程操作剪貼板網頁上如何實現禁止復制粘貼以及如何破解原生實現點擊按鈕復制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

mikasa 2019-08-29 16:20 評論0 收藏0
前端er怎樣操作剪切復制以及禁止復制+破解等

摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權信息超過一定長度的文字就添加版權信息作者鏈接來源掘金著作權歸作者所有。以上參考資料高程操作剪貼板網頁上如何實現禁止復制粘貼以及如何破解原生實現點擊按鈕復制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

amuqiao 2019-08-23 10:51 評論0 收藏0
前端er怎樣操作剪切復制以及禁止復制+破解等

摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權信息超過一定長度的文字就添加版權信息作者鏈接來源掘金著作權歸作者所有。以上參考資料高程操作剪貼板網頁上如何實現禁止復制粘貼以及如何破解原生實現點擊按鈕復制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

DevTalking 2019-08-02 11:11 評論0 收藏0
document.execCommand()方法處理Html數據

摘要：設定元素的屬性為絕對。將當前選中區復制到剪貼板并刪除之。插入隱藏控件覆蓋當前選中區。減少選中區所在格式化塊的縮進。傳遞整數將顯示用戶界面，整數將跳過它。方法受到的影響會閃爍。 document.execCommand()方法處理Html數據時常用語法格式如下:document.execCommand(sCommand[,交互方式, 動態參數]) 其中：sCommand為指令參數（如下例...

Chaz 2019-08-22 18:33 評論0 收藏0