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面向对象之体会[总结]
Nov 13 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
jquery实现弹出层效果实例
May 19 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 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
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
5 cool javascript apps
2007/03/24 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
SVG描边动画
2017/02/23 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
Python的print用法示例
2014/02/11 Python
python实现爬虫下载美女图片
2015/07/14 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
Python按钮的响应事件详解
2019/03/04 Python
深入了解Python在HDA中的应用
2019/09/05 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
构建高效的python requests长连接池详解
2020/05/02 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
python字典按照value排序方法
2020/12/28 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
技校毕业生自荐书
2014/05/23 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书