js实现图片粘贴到网页

时间:2021-05-26

本文实例实现通过按下ctrl + v将粘贴板上的图片粘贴到网页中,话不说直接上代码

<!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>

演示结果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章