js實(shí)現(xiàn)圖片粘貼到網(wǎng)頁(yè)
本文實(shí)例實(shí)現(xiàn)通過(guò)按下ctrl + v將粘貼板上的圖片粘貼到網(wǎng)頁(yè)中,話不說(shuō)直接上代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片粘貼</title> <style> #img{ width: 500px; } </style> <img id="img" src="" alt=""> 通過(guò)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é)果
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用JavaScript實(shí)現(xiàn)在頁(yè)面中顯示距離2017年中秋節(jié)的天數(shù)
這篇文章主要介紹了 使用JavaScript實(shí)現(xiàn)在頁(yè)面中顯示距離2017年中秋節(jié)的天數(shù)的相關(guān)資料,需要的朋友可以參考下2017-09-09解決js圖片加載時(shí)出現(xiàn)404的問(wèn)題
這篇文章主要為大家詳細(xì)介紹了解決js圖片加載時(shí)出現(xiàn)404問(wèn)題的方法,具有一定的參考價(jià)值,這方面有困惑的朋友可以參考一下2015-11-11基于el-slider實(shí)現(xiàn)一個(gè)能拖動(dòng)的時(shí)間范圍選擇器
這篇文章主要介紹了基于el-slider實(shí)現(xiàn)一個(gè)能拖動(dòng)的時(shí)間范圍選擇器,并通過(guò)實(shí)例代碼介紹了基于element-ui el-slider實(shí)現(xiàn)滑動(dòng)限位器的方法,需要的朋友可以參考下2024-02-02bootstrap3-dialog-master模態(tài)框使用詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap3-dialog-master模態(tài)框的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08用javascript調(diào)出windows色版的代碼
用javascript調(diào)出windows色版的代碼...2007-07-07javascript 程序庫(kù)的比較(一)之DOM功能
javascript 程序庫(kù)的比較(一)之DOM功能2010-04-04使用js對(duì)select動(dòng)態(tài)添加和刪除OPTION示例代碼
動(dòng)態(tài)刪除select中的所有options、某一項(xiàng)option以及動(dòng)態(tài)添加select中的項(xiàng)option,在IE和FireFox都能測(cè)試成功,感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08