js实现图片粘贴到网页
2019-12-07 07:08
1151 查看
本文实例实现通过按下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>
演示结果
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- js实现图片粘贴上传到服务器并展示的实例
- 动态生成二维码图片后通过js(JavaScript)或jq实现网页图片转base64格式下载
- 网页中图片轮翻效果(js+jQuery实现)
- [转贴]CSS+JS实现网页(图片)特效
- js实现网页图片轮换播放
- JS实现让网页背景图片斜向移动的方法
- js实现网页随机切换背景图片的方法
- js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)【转载】
- js实现网页随机切换背景图片的方法
- JS实现网页图片拖动
- JS中实现网页中禁止下载图片
- js实现网页图片延时加载的原理和代码 提高网站打开速度
- js+HTML5实现图片粘贴上传功能
- js实现网页图片延时加载 提升网页打开速度
- js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
- 网页动态加载图片 通过JS和jquery实现。
- 进击的KFC:iOS WebView 如何通过js获取网页中所有图片并加入点击事件,实现浏览图片的功能
- JS实现网页图片延迟加载[随滚动条渐显]
- js ctrl+v实现图片粘贴
- js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)