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>

演示结果

js实现图片粘贴到网页相关推荐

js实现图片粘贴功能
实现一个截取图片内容在粘贴板上,粘贴到指定的div的一个功能. 话不多说,上效果: 粘贴后: 实现思路:用一个div去监听paste事件,通过获取clipboardData的image对象,转化为fi ...
node.js 爬虫实现爬取网页图片并保存到本地
node.js 爬虫实现爬取网页图片并保存到本地没有废话直接看代码 /*** 请求网站数据* 将数据保存本地文件*/ //不同协议引用不同模块,http https const http = re ...
摘自人民网体育频道的JS卷角翻转方块图片切换_网页代码站(www.webdm.cn)
1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
js复制、粘贴完整实例代码
前端哥最近在做在线工具箱,用到了js复制.粘贴的功能,刚好现在有时间就记录下来,避免将来需要用到时候随机可查阅,同时也希望帮助到各位正在学习的前端小伙伴们前端哥用到的是浏览器自带clipboard ...
html文本框监听粘贴,HTML5将粘贴板上的图片粘贴到文本框中
小C的第一篇技术贴,不知道怎么写,就随便写点了,如果内容不是很好还请大家见谅,尽量给小C提点建议,遇到出错的地方请告诉小C,小C会根据错误的严重程度给大家发红包,小C在这里非常感谢了. 在一次开发中遇 ...
用js创建audio对象实现网页迷你音乐播放器
主要是靠咋没的audio对象,我就不多说废话了,也不会说,直接上代码: HTML <!DOCTYPE html> <html><head><meta http ...
原生JS实现图片跑马灯特效
今天给大家分享一个用原生JS实现的图片跑马灯特效,效果如下: 实现的代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html><head><m ...
vue+element-ui实现富文本(含有图片粘贴拖拽上传)
vue+element-ui实现富文本(含有图片粘贴拖拽上传) Just For Share | 仅仅分享首先需要安装 cnpm i vue-quill-editor -D 富文本编辑器 cnpm ...
html+css+js实现图片，文字，视频，背景音乐盛宴
你进来了吗? 好吧,如果你感受到了欺骗,请您退出吧! 人菜瘾大,时隔一年,终究还是选了web前端,回想去年写的第一条博客也是html,命运总是这么巧合,哈哈哈哈! html+css+js实现图片,文字 ...

js实现图片粘贴到网页

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

js实现图片粘贴到网页相关推荐

最新文章

热门文章