js利用clipboardData在網頁中實現截屏粘貼的功能

cuieney 發布于2019-08-21 10:55 / 1900人閱讀

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

最近在做一個將屏幕截圖直接粘貼發送的功能，于是對此做了一些研究，下面是具體的實現代碼：
html代碼如下，在這里只是簡單的做了一個textare框用作演示




  
  
  截屏粘貼

具體實現在JavaScript中：

function paste(event){
  var clipboardData = event.clipboardData;
  console.log(clipboardData);
  var items,item,types;
  if( clipboardData ){
    items = clipboardData.items;
    if( !items ){
      return;
    }
    // 保存在剪貼板中的數據類型
    types = clipboardData.types || [];
    for(var i=0 ; i < types.length; i++ ){
      if( types[i] === "Files" ){
        item = items[i];
        break;
      }
    }
    // 判斷是否為圖片數據
    if( item && item.kind === "file" && item.type.match(/^image//i) ){
      // 讀取該圖片
      var file = item.getAsFile(),
          reader = new FileReader();
      reader.readAsDataURL(file);
      console.log(reader);
      //下面是講粘貼的圖片內容傳送到后端進行處理，如果直接前端處理可以不要后邊的代碼
      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
        }));
      };
      //接收返回數據
      xhr.onload = function(){
        var response = JSON.parse(xhr.responseText);
        if(response.code == 200){
        //
        }else{
        //
        }
      }
    }
  }
}

云服務器 GPU云服務器 js手機復制粘貼功能 js獲得粘貼的數據網頁截屏 fec在webrtc中實現

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

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

javascript在網頁中實現粘貼qq截圖功能

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

Barry_Ng 2019-08-02 15:55 評論0 收藏0
javascript在網頁中實現粘貼qq截圖功能

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

RichardXG 2019-08-19 18:26 評論0 收藏0
【在網頁中獲取截圖數據】Chrome和Firefox下的實戰經驗

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

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

摘要：起因應項目需求，需要用某個工具截圖然后粘貼上傳到后臺的功能于是著手搜查資料，最終的結果就是找到了這個對象，然后開始著手一谷歌瀏覽器相信這個也是很多開發者都在用的瀏覽器，當然也是嘗試的開始。 clipboardData 起因：應項目需求，需要用某個工具截圖然后粘貼上傳到后臺的功能！于是著手搜查資料，最終的結果就是找到了這個對象clipboardData，然后開始著手！一、谷歌chrom...

Euphoria 2019-08-22 16:21 評論0 收藏0
js獲取剪切板內容，js控制圖片粘貼。

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

KaltZK 2019-08-19 17:22 評論0 收藏0