瀏覽器監聽Ctrl+V貼上圖片
阿新 • • 發佈：2020-06-28
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>利用 clipboardData 在網頁中實現截圖貼上的功能</title> <style type="text/css"> #box{ width:200px; height:200px; border:1px solid #ddd; } </style> </head> <body> <h1>利用 clipboardData 在網頁中實現截圖貼上的功能</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>