javascript實(shí)現(xiàn)粘貼qq截圖功能（clipboardData）
更新時(shí)間：2016年05月29日 11:43:00 作者：silenceboy
這篇文章主要介紹了javascript實(shí)現(xiàn)粘貼qq截圖功能，利用clipboardData在網(wǎng)頁(yè)中實(shí)現(xiàn)截屏粘貼的功能，感興趣的小伙伴們可以參考一下
這篇文章主要介紹了在網(wǎng)頁(yè)中實(shí)現(xiàn)讀取剪貼板粘貼截圖功能,即可以把剪貼板的截圖Ctrl+V粘貼到網(wǎng)頁(yè)的一個(gè)輸入框中,例如QQ截圖、旺旺截圖或者其它截圖軟件。具體代碼如下。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>利用 clipboardData 在網(wǎng)頁(yè)中實(shí)現(xiàn)截屏粘貼的功能</title>
<style type="text/css">
#box{ width:200px; height:200px; border:1px solid #ddd; }
</style>
</head>
<body>
<h1>利用 clipboardData 在網(wǎng)頁(yè)中實(shí)現(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)頁(yè)中
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 ){
// 添加到事件對(duì)象中的訪問系統(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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了JS中substring與substr的用法講解，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-11-11
JavaScript實(shí)現(xiàn)登錄滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)登錄滑塊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
javscript 數(shù)組扁平化的實(shí)現(xiàn)
這篇文章主要介紹了javscript 數(shù)組扁平化的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了JS 獲取文件后綴，判斷文件類型(比如是否為圖片格式),需要的朋友可以參考下2020-05-05
Javascript點(diǎn)擊其他任意地方隱藏關(guān)閉DIV實(shí)例
這篇文章主要分享一個(gè)Javascript點(diǎn)擊其他任意地方隱藏關(guān)閉DIV實(shí)例,需要的朋友可以參考下。2016-06-06
H5+C3+JS實(shí)現(xiàn)五子棋游戲（AI篇）
這篇文章主要為大家詳細(xì)介紹了H5+C3+JS實(shí)現(xiàn)五子棋游戲AI篇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
JavaScript delete操作符應(yīng)用實(shí)例
delete 運(yùn)算符 從對(duì)象中刪除一個(gè)屬性，或從數(shù)組中刪除一個(gè)元素。2009-01-01
javascript實(shí)現(xiàn)別踩白塊兒小游戲程序
我們先看到的未開始的頁(yè)面黑色和白色方塊是隨機(jī)生成的，完了這么多把沒有發(fā)現(xiàn)時(shí)固定不變的。點(diǎn)擊一次方塊，程序需要判斷是黑色還是白色的。如果是黑色的，當(dāng)然程序也是實(shí)現(xiàn)了一次自減，在動(dòng)畫中是實(shí)現(xiàn)一次下移的，下移的時(shí)候點(diǎn)擊的方塊到黃顏色的區(qū)域會(huì)變成灰色2015-11-11
這篇文章主要介紹了JavaScript的各種常見函數(shù)定義方法,包含了一些技巧的測(cè)試與分析總結(jié),需要的朋友可以參考下2014-09-09
完美實(shí)現(xiàn)js選項(xiàng)卡切換效果(一)
這篇文章主要為大家詳細(xì)介紹如何完美實(shí)現(xiàn)js選項(xiàng)卡切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03