<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>利用 clipboardData 在網(wǎng)頁中實現(xiàn)截屏粘貼的功能</title>
<style type="text/css">
#box{ width:200px; height:200px; border:1px solid #ddd; }
</style>
</head>
<body>

<h1>利用 clipboardData 在網(wǎng)頁中實現(xiàn)截屏粘貼的功能</h1>  
<hr />
<div><input type="text" id="testInput" placeholder="截屏后粘貼到輸入框中" size="30" /></div>
<script type="text/javascript">
(function(){
  var imgReader = function( item ){
    var blob = item.getAsFile(),
      reader = new FileReader();
    // 讀取文件后將其顯示在網(wǎng)頁中
    reader.onload = function( e ){
      var img = new Image();

      img.src = e.target.result;
      document.body.appendChild( img );
    };
    // 讀取文件
    reader.readAsDataURL( blob );
  };
  document.getElementById( 'testInput' ).addEventListener( 'paste', function( e ){
     // 添加到事件對象中的訪問系統(tǒng)剪貼板的接口
    var clipboardData = e.clipboardData,
      i = 0,
      items, item, types;

    if( clipboardData ){
      items = clipboardData.items;
      if( !items ){
        return;
      }
      item = items[0];
      // 保存在剪貼板中的數(shù)據(jù)類型
      types = clipboardData.types || [];
      for( ; i < types.length; i++ ){
        if( types[i] === 'Files' ){
          item = items[i];
          break;
        }
      }
      // 判斷是否為圖片數(shù)據(jù)
      if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
        imgReader( item );
      }
    }
  });
})(); 
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

bootstrap table 數(shù)據(jù)表格行內(nèi)修改的實現(xiàn)代碼
這篇文章主要介紹了bootstrap table 數(shù)據(jù)表格行內(nèi)修改的實現(xiàn)代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-02-02
微信小程序聊天功能的示例代碼
這篇文章主要介紹了微信小程序聊天功能的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
js獲取dom元素寬高的幾種方法
這篇文章主要給大家介紹了關(guān)于js獲取dom元素寬高的幾種方法,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2023-08-08
如何使用50行javaScript代碼實現(xiàn)簡單版的call,apply,bind
這篇文章主要介紹了50行javaScript代碼實現(xiàn)簡單版的call,apply,bind過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-08-08
JavaScript之Getters和Setters 平臺支持等詳細介紹
現(xiàn)在，JavaScript的Getters和Setters使用非常廣泛，它和每個JavaScript開發(fā)者的切身利益息息相關(guān),我們先來快速了解什么是Getters和Setters，以及它們?yōu)槭裁春苡杏?然后，我們來看看現(xiàn)在都有哪些平臺支持Gettets和Setters
2012-12-12
符合W3C Web標(biāo)準(zhǔn)的圖片連續(xù)無間隙水平滾動
很久以前就有這個問題，總是找不到通用的，或比較簡單的“圖片連續(xù)無間隙向左滾動，無間隙向右滾動，符合W3C Web標(biāo)準(zhǔn)”
2008-06-06
可選擇和輸入的下拉列表框示例
如果想實現(xiàn)可選擇和輸入的下拉列表框，那么下面有個不錯的示例，希望大家可以參考下
2013-11-11
uniapp微信小程序獲取當(dāng)前城市名稱逆地址解析實例教程
最近在用uni-app開發(fā)小程序,需要獲取用戶所在城市,小程序本身沒有這樣的api,那么怎么實現(xiàn)呢?下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序獲取當(dāng)前城市名稱逆地址解析的相關(guān)資料,需要的朋友可以參考下
2022-11-11
Bootstrap每天必學(xué)之簡單入門
相信大家閱讀了Bootstrap第一篇文章后，對Bootstrap充滿了探索欲望，小編也對Bootstrap產(chǎn)生了興趣，所以今天再整理一篇關(guān)于Bootstrap的入門介紹，希望大家喜歡。
2015-11-11
JS實現(xiàn)的簡單四則運算計算器功能示例
這篇文章主要介紹了JS實現(xiàn)的簡單四則運算計算器功能,涉及javascript事件響應(yīng)及數(shù)值運算相關(guān)操作技巧,需要的朋友可以參考下
2017-09-09