js利用clipboardData在網(wǎng)頁中實(shí)現(xiàn)截屏粘貼的功能

cuieney 發(fā)布于2019-08-21 10:55 / 1918人閱讀

摘要：最近在做一個(gè)將屏幕截圖直接粘貼發(fā)送的功能，于是對(duì)此做了一些研究，下面是具體的實(shí)現(xiàn)代碼代碼如下，在這里只是簡(jiǎn)單的做了一個(gè)框用作演示截屏粘貼具體實(shí)現(xiàn)在中保存在剪貼板中的數(shù)據(jù)類型判斷是否為圖片數(shù)據(jù)讀取該圖片下面是講粘貼的圖片內(nèi)容傳送到后端進(jìn)行

最近在做一個(gè)將屏幕截圖直接粘貼發(fā)送的功能，于是對(duì)此做了一些研究，下面是具體的實(shí)現(xiàn)代碼：
html代碼如下，在這里只是簡(jiǎn)單的做了一個(gè)textare框用作演示




  
  
  截屏粘貼

具體實(shí)現(xiàn)在JavaScript中：

function paste(event){
  var clipboardData = event.clipboardData;
  console.log(clipboardData);
  var items,item,types;
  if( clipboardData ){
    items = clipboardData.items;
    if( !items ){
      return;
    }
    // 保存在剪貼板中的數(shù)據(jù)類型
    types = clipboardData.types || [];
    for(var i=0 ; i < types.length; i++ ){
      if( types[i] === "Files" ){
        item = items[i];
        break;
      }
    }
    // 判斷是否為圖片數(shù)據(jù)
    if( item && item.kind === "file" && item.type.match(/^image//i) ){
      // 讀取該圖片
      var file = item.getAsFile(),
          reader = new FileReader();
      reader.readAsDataURL(file);
      console.log(reader);
      //下面是講粘貼的圖片內(nèi)容傳送到后端進(jìn)行處理，如果直接前端處理可以不要后邊的代碼
      var xhr = new XMLHttpRequest();
      xhr.open("post", "/pasteImage",true);
      xhr.setRequestHeader("Content-Type", "application/json");
      reader.onload = function(){
        console.log(reader.result);
        xhr.send(JSON.stringify({
          file: reader.result
        }));
      };
      //接收返回?cái)?shù)據(jù)
      xhr.onload = function(){
        var response = JSON.parse(xhr.responseText);
        if(response.code == 200){
        //
        }else{
        //
        }
      }
    }
  }
}

云服務(wù)器 GPU云服務(wù)器 js手機(jī)復(fù)制粘貼功能 js獲得粘貼的數(shù)據(jù) 網(wǎng)頁截屏 fec在webrtc中實(shí)現(xiàn)

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

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

相關(guān)文章

javascript在網(wǎng)頁中實(shí)現(xiàn)粘貼qq截圖功能

摘要：這篇文章主要介紹了在網(wǎng)頁中實(shí)現(xiàn)讀取剪貼板粘貼截圖功能即可以把剪貼板的截圖粘貼到網(wǎng)頁的一個(gè)輸入框中例如截圖旺旺截圖或者其它截圖軟件。這篇文章主要介紹了在網(wǎng)頁中實(shí)現(xiàn)讀取剪貼板粘貼截圖功能,即可以把剪貼板的截圖Ctrl+V粘貼到網(wǎng)頁的一個(gè)輸入框中,例如QQ截圖、旺旺截圖或者其它截圖軟件。具體代碼如下。利用 clipboardData 在網(wǎng)頁中實(shí)現(xiàn)截屏粘貼的功能 #box{ wi...

Barry_Ng 2019-08-02 15:55 評(píng)論0 收藏0
javascript在網(wǎng)頁中實(shí)現(xiàn)粘貼qq截圖功能

摘要：這篇文章主要介紹了在網(wǎng)頁中實(shí)現(xiàn)讀取剪貼板粘貼截圖功能即可以把剪貼板的截圖粘貼到網(wǎng)頁的一個(gè)輸入框中例如截圖旺旺截圖或者其它截圖軟件。這篇文章主要介紹了在網(wǎng)頁中實(shí)現(xiàn)讀取剪貼板粘貼截圖功能,即可以把剪貼板的截圖Ctrl+V粘貼到網(wǎng)頁的一個(gè)輸入框中,例如QQ截圖、旺旺截圖或者其它截圖軟件。具體代碼如下。利用 clipboardData 在網(wǎng)頁中實(shí)現(xiàn)截屏粘貼的功能 #box{ wi...

RichardXG 2019-08-19 18:26 評(píng)論0 收藏0
【在網(wǎng)頁中獲取截圖數(shù)據(jù)】Chrome和Firefox下的實(shí)戰(zhàn)經(jīng)驗(yàn)

摘要：最近在實(shí)現(xiàn)一個(gè)功能，需求如下前提當(dāng)前頁面無彈窗頁面任意位置執(zhí)行粘貼讀取剪切板中的截屏數(shù)據(jù)上傳截圖首先還是從網(wǎng)上找相關(guān)的例子。找到了上的專欄文章獲取剪切板內(nèi)容，控制圖片粘貼。最近在實(shí)現(xiàn)一個(gè)功能，需求如下：前提：當(dāng)前頁面無彈窗頁面任意位置執(zhí)行粘貼讀取剪切板中的截屏數(shù)據(jù) 上傳截圖首先還是從網(wǎng)上找相關(guān)的例子。找到了SF上的專欄文章《js獲取剪切板內(nèi)容，js控制圖片粘貼》。于是...

vslam 2019-08-19 17:49 評(píng)論0 收藏0
js 粘貼圖片的應(yīng)用(clipboardData)

摘要：起因應(yīng)項(xiàng)目需求，需要用某個(gè)工具截圖然后粘貼上傳到后臺(tái)的功能于是著手搜查資料，最終的結(jié)果就是找到了這個(gè)對(duì)象，然后開始著手一谷歌瀏覽器相信這個(gè)也是很多開發(fā)者都在用的瀏覽器，當(dāng)然也是嘗試的開始。 clipboardData 起因：應(yīng)項(xiàng)目需求，需要用某個(gè)工具截圖然后粘貼上傳到后臺(tái)的功能！于是著手搜查資料，最終的結(jié)果就是找到了這個(gè)對(duì)象clipboardData，然后開始著手！一、谷歌chrom...

Euphoria 2019-08-22 16:21 評(píng)論0 收藏0
js獲取剪切板內(nèi)容，js控制圖片粘貼。

摘要：在用戶執(zhí)行粘貼操作的時(shí)候，能夠獲得剪切板的內(nèi)容，本文討論一下這個(gè)問題。目前只有支持獲取剪切板中的圖片數(shù)據(jù)。這么多的判斷條件，基本可以確定通過剪切板過來的是粘貼的文件。在用戶執(zhí)行粘貼操作的時(shí)候，js能夠獲得剪切板的內(nèi)容，本文討論一下這個(gè)問題。目前只有Chrome支持獲取剪切板中的圖片數(shù)據(jù)。還好需要這個(gè)功能的產(chǎn)品目前只支持Chrome和Safari，一些Chrome的新特性是可以盡情使...

KaltZK 2019-08-19 17:22 評(píng)論0 收藏0