js实现图片粘贴到网页
更新时间：2019年12月06日 17:10:45 作者：hhzzcc_
这篇文章主要为大家详细介绍了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动态添加iframe的代码,需要的朋友可以参考下2015-09-09
使用JavaScript实现在页面中显示距离2017年中秋节的天数
这篇文章主要介绍了 使用JavaScript实现在页面中显示距离2017年中秋节的天数的相关资料,需要的朋友可以参考下2017-09-09
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台，这篇文章主要介绍了uni-app的基本使用,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了解决js图片加载时出现404问题的方法，具有一定的参考价值，这方面有困惑的朋友可以参考一下2015-11-11
这篇文章主要介绍了基于el-slider实现一个能拖动的时间范围选择器,并通过实例代码介绍了基于element-ui el-slider实现滑动限位器的方法,需要的朋友可以参考下2024-02-02
bootstrap3-dialog-master模态框使用详解
这篇文章主要为大家详细介绍了bootstrap3-dialog-master模态框的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
用javascript调出windows色版的代码...2007-07-07
javascript 程序库的比较（一）之DOM功能2010-04-04
动态删除select中的所有options、某一项option以及动态添加select中的项option，在IE和FireFox都能测试成功，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
其实为js文件传参是很久就接触过的一个问题，只是一直没有放在心上，今天在无忧看到又有人问这个问题，今日总结一下。2010-05-05
最新评论