up主审陌，本文转载于审陌大大的资料：
源码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片粘贴</title> <style> #img{ width: 800px; box-shadow: 0 0 5px blue; } </style> </head> <body> <h2>复制或剪切图片后以ctrl + V 粘贴</h2> <img id="img" src="" alt=""> </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> </html>
效果：
前端实现粘贴图片预览的功能，原来如此简单_哔哩哔哩_bilibili
up主大伟聊前端
图片转成base64的两种实现方式
前端实现粘贴图片预览的功能，原来如此简单_哔哩哔哩_bilibili
第一步：我要在Html中定义一个div
备份和提取
第二步：获取之后，可以
第三步 如果是image文件，我们就把他存成file的文件
第四步：base64字符串
大伟聊前端的源码，这个源码没有跑起来：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .img { width: auto; height: 100%; max-width: 100%; } </style> <body> <div class="past-contener"> </div> </body> </html> <script> const el = document.getElementById('past-contener'); window.onload=function(){ el.addEventListener('paste',function(e){ let file = null; const items = (e.clipboardData || window.clipboardData).items; if (items && items.length){ for ( var i = 0; i< items.length; i++){ if (items[i].type.indexOf('image') !== -1){ file = items[i].getAsFile(); break; } } } console.log(file,'file') if(file) { var reader = new FileReader() reader.onload = function(event){ // event.target.reslt就是图片的base64地址 let img = document.createElement('img'); el.appendChild(img); } reader.readAsDataURL(file) } } )} } // 此事件监听可以在document上，该时间有冒泡行为，页面上任何粘贴操作都会触发 </script> </body> </html>
