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对象的动态选择及遍历对象
Mar 10 Javascript
跟我学习javascript的定时器
Nov 19 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
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
PHP邮件专题
2006/10/09 PHP
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
js字符编码函数区别分析
2008/06/05 Javascript
javascript function、指针及内置对象
2009/02/19 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
VUE实现图片验证码功能
2020/11/18 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
Python Web开发模板引擎优缺点总结
2014/05/06 Python
python中文编码问题小结
2014/09/28 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
python实现浪漫的烟花秀
2019/01/30 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
Python如何合并多个字典或映射
2020/07/24 Python
Python基于Faker假数据构造库
2020/11/30 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
应届毕业生求职自荐书
2014/01/03 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
温馨提示标语
2014/06/26 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
市场营销工作计划书
2014/09/15 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript