js實現(xiàn)圖片粘貼到網(wǎng)頁
更新時間:2019年12月06日 17:10:45 作者:hhzzcc_
這篇文章主要為大家詳細介紹了js實現(xiàn)圖片粘貼到網(wǎng)頁,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例實現(xiàn)通過按下ctrl + v將粘貼板上的圖片粘貼到網(wǎng)頁中,話不說直接上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片粘貼</title>
<style>
#img{
width: 500px;
}
</style>
<img id="img" src="" alt="">
通過Ctrl + v將圖片粘貼
</head>
<body>
<script>
setPasteImg();
//獲取粘貼板上的圖片
function setPasteImg(){
//粘貼事件
document.addEventListener('paste', function(event){
if (event.clipboardData || event.originalEvent) {
var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
if(clipboardData.items){
var blob;
for (var i = 0; i < clipboardData.items.length; i++) {
if (clipboardData.items[i].type.indexOf("image") !== -1) {
blob = clipboardData.items[i].getAsFile();
}
}
var render = new FileReader();
render.onload = function (evt) {
//輸出base64編碼
var base64 = evt.target.result;
document.getElementById('img').setAttribute('src',base64);
}
render.readAsDataURL(blob);
}
}
})
}
</script>
</body>
</html>
演示結(jié)果

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用JavaScript實現(xiàn)在頁面中顯示距離2017年中秋節(jié)的天數(shù)
這篇文章主要介紹了 使用JavaScript實現(xiàn)在頁面中顯示距離2017年中秋節(jié)的天數(shù)的相關(guān)資料,需要的朋友可以參考下2017-09-09
基于el-slider實現(xiàn)一個能拖動的時間范圍選擇器
這篇文章主要介紹了基于el-slider實現(xiàn)一個能拖動的時間范圍選擇器,并通過實例代碼介紹了基于element-ui el-slider實現(xiàn)滑動限位器的方法,需要的朋友可以參考下2024-02-02
bootstrap3-dialog-master模態(tài)框使用詳解
這篇文章主要為大家詳細介紹了bootstrap3-dialog-master模態(tài)框的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08
用javascript調(diào)出windows色版的代碼
用javascript調(diào)出windows色版的代碼...2007-07-07
使用js對select動態(tài)添加和刪除OPTION示例代碼
動態(tài)刪除select中的所有options、某一項option以及動態(tài)添加select中的項option,在IE和FireFox都能測試成功,感興趣的朋友可以參考下,希望對大家有所幫助2013-08-08

