js实现图片粘贴到网页
更新时间:2019年12月06日 17:10:45 作者:hhzzcc_
这篇文章主要为大家详细介绍了js实现图片粘贴到网页,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例实现通过按下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>
演示结果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
JavaScript实现按照指定长度为数字前面补零输出的方法
这篇文章主要介绍了JavaScript实现按照指定长度为数字前面补零输出的方法,实例分析了javascript操作数字补零的技巧,需要的朋友可以参考下2015-03-03JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
这篇文章主要介绍了JSON在Javascript中的使用以及eval和JSON.parse的区别详细解析,本文对eval()和JSON.parse()的区别介绍的非常详细,需要的朋友可以参考下2017-09-09
最新评论