目前僅有高版本的 Chrome 瀏覽器支持這樣直接粘貼，其他瀏覽器目前為止還無法粘貼,不過火狐和ie11瀏覽器在可編輯的div中能夠粘貼截圖的圖片也是base64位和Chrome利用clipboardData的效果是一樣的，只是在火狐和ie11瀏覽器中目前還無法實現類似用clipboardData直接獲取圖片的base64數據，它是自帶的直接進去img數據。
完整實例：
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>利用clipboardData在網頁中實現截屏粘貼的功能</title><style type="text/css"> .box{ width:500px; height:300px; border:1px solid #ddd; } .box img{max-width:480px; max-height: 100%; text-align: center;}</style></head><body><div class="box" contenteditable="true" id="testInput"></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; console.log(img); document.getElementById('testInput').appendChild( img ); }; reader.readAsDataURL( blob ); }; document.getElementById( 'testInput' ).addEventListener( 'paste', function( e ){ //window.clipboardData.getData("Text") ie下獲取黏貼的內容 e.clipboardData.getData("text/plain")火狐谷歌下獲取黏貼的內容 //alert(e.clipboardData.getData("text/plain") ) var clipboardData = e.clipboardData,//谷歌 i = 0, items, item, types; console.log('0') if( clipboardData ){ console.log('1') items = clipboardData.items; if( !items ){ console.log(2) return; } console.log(3) 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 ); } } },false);})(); </script></script></body></html> 實例二：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="div" style="width:100%;height:700px;border:1px solid #ccc;padding:20px" contenteditable="true"></div> <script> var div = document.getElementById('div'); div.addEventListener('paste', function(e) { if(e.clipboardData) { for(var i = 0; i < e.clipboardData.items.length; i++) { var c = e.clipboardData.items[i]; var f = c.getAsFile(); var reader = new FileReader(); reader.onload = function(e) { div.innerHTML += '<img src="' + e.target.result + '">'; } reader.readAsDataURL(f); } } }); </script></body></html>實現的方法：
方法一：在Chrome瀏覽器中能夠直接通過clipboardData獲取截圖的圖片數據，可以用ajax將數據傳給后臺，然后由后臺開發返回帶域名的圖片地址
方法二：由于在火狐等瀏覽器中無法直接獲取圖片數據，所以可以在粘貼的時候獲取div中的img的數據是base64的url數據，然后同方法一用ajax
方法三：可以統一在點擊發布或者保存消息時，獲取div中的img的數據是base64的url數據，然后同方法一用ajax，如果有多張就循環，也或者是直接點擊保存和發布的時候，后端開發做處理，返回來的顯示信息中直接做處理，這樣我們在div中就不需要把base64的url替換成后端返回的帶域名的地址
方法四：在div中粘貼的時候彈出一個彈出層，然后彈出層中有截圖的圖片預覽可確認上傳按鈕，點擊上傳按鈕走ajax上傳圖片同方法一
新聞熱點
疑難解答
