js利用clipboardData實(shí)現(xiàn)截屏粘貼功能
本文實(shí)例為大家分享了clipboardData截屏粘貼實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>copyimg</title>
<style type="text/css">
#box{ width:200px; height:200px; border:1px solid #ddd; }
</style>
</head>
<script language="JavaScript">
</script>
<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();
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 ){
var clipboardData = e.clipboardData,
i = 0,
items, item, types;
if( clipboardData ){
items = clipboardData.items;
if( !items ){
return;
}
item = items[0];
types = clipboardData.types || [];
for( ; i < types.length; i++ ){
if( types[i] === 'Files' ){
item = items[i];
break;
}
}
if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
imgReader( item );
}
}
});
})();
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript實(shí)現(xiàn)秒表計(jì)時(shí)游戲
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)秒表計(jì)時(shí)游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05
JavaScript中創(chuàng)建對(duì)象的模式匯總
本文給大家js創(chuàng)建對(duì)象的模式包括對(duì)象字面量,工廠模式,構(gòu)造函數(shù)模式,原型模式,結(jié)合構(gòu)造函數(shù)和原型模式,原型動(dòng)態(tài)模式 ,感興趣的朋友參考下2016-04-04
Typescript高級(jí)類型Record,Partial,Readonly詳解
這篇文章主要介紹了Typescript高級(jí)類型Record,Partial,Readonly等介紹,keyof將一個(gè)類型的屬性名全部提取出來當(dāng)做聯(lián)合類型,本文通過實(shí)例代碼給大家詳細(xì)講解需要的朋友可以參考下2022-11-11
javascript cookie的簡(jiǎn)單應(yīng)用
這篇文章主要介紹了javascript cookie的簡(jiǎn)單應(yīng)用,我們先介紹一下cookie的使用,以及我后面簡(jiǎn)單封裝一個(gè)cookie操作的單例,便于實(shí)現(xiàn)cookie的設(shè)置,獲取,刪除的方法,感興趣的小伙伴們可以參考一下2016-02-02
JavaScript 聯(lián)動(dòng)的無限級(jí)封裝類,數(shù)據(jù)采用非Ajax方式,隨意添加聯(lián)動(dòng)
JavaScript 聯(lián)動(dòng)的無限級(jí)封裝類,數(shù)據(jù)采用非Ajax方式,隨意添加聯(lián)動(dòng)2010-06-06
JS簡(jiǎn)單實(shí)現(xiàn)點(diǎn)擊按鈕或文字顯示遮罩層的方法
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)點(diǎn)擊按鈕或文字顯示遮罩層的方法,涉及javascript鼠標(biāo)事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04

