JS實(shí)現(xiàn)將圖片復(fù)制到剪貼板

MageekChiu 發(fā)布于2019-08-22 18:02 / 2159人閱讀

摘要：前言最近項(xiàng)目新增需求用戶能夠拖拽頁面上的圖片文件到文檔。在現(xiàn)有的拖拽事件所提供無法滿足需求的情況下，換一個(gè)思路走嘗試將圖片復(fù)制到剪貼板。只復(fù)制目標(biāo)節(jié)點(diǎn)的子節(jié)點(diǎn)，對(duì)于標(biāo)簽，如果不額外包裹一層父元素，無法實(shí)現(xiàn)圖片復(fù)制。

前言

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

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

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

只復(fù)制目標(biāo)節(jié)點(diǎn)的子節(jié)點(diǎn)，對(duì)于img標(biāo)簽，如果不額外包裹一層父元素，無法實(shí)現(xiàn)圖片復(fù)制。

參考clipboard.js源碼，了解了實(shí)現(xiàn)原理后（其實(shí)非常簡單！:) ），我們就能自己動(dòng)手封裝一個(gè)復(fù)制方法：

概述 Range對(duì)象

Range表示包含節(jié)點(diǎn)和部分文本節(jié)點(diǎn)的文檔片段。最常見的就是用戶在瀏覽器拖動(dòng)鼠標(biāo)選擇的內(nèi)容（user selection）

比如上圖這塊藍(lán)色高亮區(qū)域。

在現(xiàn)代瀏覽器中（IE9以上），你可以通過Document.createRange()方法或者new Range()創(chuàng)建一個(gè)Range對(duì)象；當(dāng)需要獲取user selection時(shí),你應(yīng)該使用window.getSelection()方法獲取Selection對(duì)象。

有點(diǎn)懵？

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

Selection對(duì)象表示用戶的選擇，而Range對(duì)象則表示文檔的連續(xù)部分，與任何視覺表示無關(guān)。一個(gè)Selection對(duì)象幾乎可由0到多個(gè)Range表示出來，當(dāng)然，Range對(duì)象也能獨(dú)立于Selection而被完全的創(chuàng)建和修改。

簡單的演示代碼

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); //讓選中部分變成我們自己定義的節(jié)點(diǎn)內(nèi)容
});

演示地址：

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

一點(diǎn)就會(huì) :)

兼容陳舊IE版本

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

execCommand方法

execCommand方法允許運(yùn)行命令來操縱可編輯區(qū)域的內(nèi)容。該方法的第一個(gè)參數(shù)是命令的名稱，參數(shù)類型為DOMString。
在這里，我們將利用execCommand方法的copy命令實(shí)現(xiàn)復(fù)制選中的內(nèi)容：

document.execCommand("copy")

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

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

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

拖動(dòng)鼠標(biāo)選擇文字，點(diǎn)擊按鈕后看看能粘貼出什么:)

復(fù)制圖片功能的具體實(shí)現(xiàn) 封裝可以兼容ie的getSelect方法

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

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();
  }
}

派發(fā)事件

為了不浪費(fèi)性能，我們使用事件委托到希望被復(fù)制的節(jié)點(diǎn)上。這里對(duì)傳入的nodeName進(jìn)行處理，方便自由的控制被復(fù)制一個(gè)或多個(gè)節(jié)點(diǎn)類型。默認(rèn)為。

const clipboardHandler = (nodeName, event) => {
  event = event || nodeName; //不傳參時(shí)
  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) {
    //調(diào)用之前封裝好的getSelect方法
    getSelect(target);
    document.execCommand("copy");
  }
}

調(diào)用:

[element].addEventListener("mousedown", clipboardHandler); //預(yù)備拖動(dòng)圖片按下鼠標(biāo)時(shí)執(zhí)行復(fù)制

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

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

完整代碼演示地址：

已驗(yàn)證在chrome和ie8上可行（ie8需要對(duì)es6語法與bind和addEventListener方法進(jìn)行pollyfill)

希望能夠幫助到你:)

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95425.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

MageekChiu

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow卷積神經(jīng)網(wǎng)絡(luò)

閱讀 2011·2023-04-25 16:53
SSM+JSP+MYSQL+H-UI 實(shí)現(xiàn)的校園點(diǎn)餐系統(tǒng)

閱讀 1455·2021-10-13 09:39
每秒新增8個(gè)用戶，HarmonyOS 2.0用戶達(dá)到9000萬

閱讀 619·2021-09-08 09:35
rem : web app適配的秘密武器

閱讀 1652·2019-08-30 13:03
2019年前端面試題-02

閱讀 2133·2019-08-30 11:06
摘自<css世界>(張鑫旭著)經(jīng)典案例---------持續(xù)更新中

閱讀 1842·2019-08-30 10:59
頁面性能優(yōu)化辦法有哪些？

閱讀 3199·2019-08-29 17:00
重學(xué)前端學(xué)習(xí)筆記（二十七）--JavaScript的詞法

閱讀 2300·2019-08-23 17:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

JS實(shí)現(xiàn)將圖片復(fù)制到剪貼板

相關(guān)文章

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

**前端er怎樣操作剪切復(fù)制以及禁止復(fù)制+破解等**

**前端er怎樣操作剪切復(fù)制以及禁止復(fù)制+破解等**

**前端er怎樣操作剪切復(fù)制以及禁止復(fù)制+破解等**

document.execCommand()方法處理Html數(shù)據(jù)

發(fā)表評(píng)論

0條評(píng)論

MageekChiu

男|高級(jí)講師

TA的文章

tensorflow卷積神經(jīng)網(wǎng)絡(luò)

SSM+JSP+MYSQL+H-UI 實(shí)現(xiàn)的校園點(diǎn)餐系統(tǒng)

每秒新增8個(gè)用戶，HarmonyOS 2.0用戶達(dá)到9000萬

rem : web app適配的秘密武器

2019年前端面試題-02

摘自<css世界>(張鑫旭著)經(jīng)典案例---------持續(xù)更新中

頁面性能優(yōu)化辦法有哪些？

重學(xué)前端學(xué)習(xí)筆記（二十七）--JavaScript的詞法

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

JS實(shí)現(xiàn)將圖片復(fù)制到剪貼板

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！