js实现图片粘贴到网页


Posted in Javascript onDecember 06, 2019

本文实例实现通过按下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实现图片粘贴到网页

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

Javascript 相关文章推荐
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
validform表单验证的实现方法
Mar 08 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 #Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 #Javascript
微信小程序实现滚动加载更多的代码
Dec 06 #Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 #Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 #Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 #Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 #Javascript
You might like
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
Python实现发送与接收邮件的方法详解
2018/03/28 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
Python装饰器简单用法实例小结
2018/12/03 Python
python 求定积分和不定积分示例
2019/11/20 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
Android笔试题总结
2014/11/29 面试题
Servlet的生命周期
2013/08/25 面试题
保险专业自荐信范文
2014/02/20 职场文书
学生请假条
2014/04/11 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
研修心得体会
2014/09/04 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
七年级数学教学反思
2016/02/17 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
SQL语句多表联合查询的方法示例
2022/04/18 MySQL