JS 粘贴展示图片并读取图片
程序员文章站
2022-03-20 17:22:11
...
主要是通过给div绑定粘贴事件
div.addEventListener('paste', function(){})
粘贴事件 核心代码
(最下面有完整代码)
const div = document.getElementById("div")
const img = document.getElementById("img")
div.addEventListener('paste', handlepaste)
function handlepaste(e) {
// 粘贴对象
if (e.clipboardData || e.originalEvent) {
const clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
if (clipboardData.items) {
let blob;
for (let i = 0; i < clipboardData.items.length; i++) {
if (clipboardData.items[i].type.indexOf('image') !== -1) {
blob = clipboardData.items[i].getAsFile();
}
}
// 粘贴数据
console.log(blob, 'blob')
// 生成文件对象
const filer = new FileReader()
// 将获取的粘贴数据转成 URL格式的字符串（base64编码）
filer.readAsDataURL(blob)
// 这个回调在 filer.readAsDataURL(blob) 的时候触发
filer.onload = (e) => {
console.log(e, 'FileReader')
// 获取URL格式的字符串 Base64编码
const base64 = e.target.result;
console.log(base64, 'base64')
// 通过img输出
img.src = base64
};
}
}
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.div {
width: 500px;
height: 500px;
margin: 60px auto;
background-color: pink;
}
.div2 {
width: 400px;
height: 400px;
margin: 0 auto;
background-color: #fff;
}
p {
text-align: center;
}
.img {
width: auto;
height: 100%;
max-width: 100%;
}
</style>
<body>
<div>
同时按住Windows+Print Screen组合键，笔记本则按住Windows+Prt Sc SysRq组合键，则能全屏截图，仅适用Windows系统。
</div>
<div id="div" class="div">
<p>【Ctrl+v】粘贴图片试试</p>
<div class="div2">
<img id="img" src="" alt="" class="img" />
</div>
</div>
<script>
const div = document.getElementById("div")
const img = document.getElementById("img")
function handlepaste(e) {
// 粘贴对象
if (e.clipboardData || e.originalEvent) {
const clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
if (clipboardData.items) {
let blob;
for (let i = 0; i < clipboardData.items.length; i++) {
if (clipboardData.items[i].type.indexOf('image') !== -1) {
blob = clipboardData.items[i].getAsFile();
}
}
// 粘贴数据
console.log(blob, 'blob')
// 生成文件对象
const filer = new FileReader()
// 将获取的粘贴数据转成 URL格式的字符串（base64编码）
filer.readAsDataURL(blob)
// 这个回调在 filer.readAsDataURL(blob) 的时候触发
filer.onload = (e) => {
console.log(e, 'FileReader')
// 获取URL格式的字符串 Base64编码
const base64 = e.target.result;
console.log(base64, 'base64')
// 通过img输出
img.src = base64
};
}
}
}
div.addEventListener('paste', handlepaste)
</script>
</body>
</html>
上一篇： mongodb基础知识-内嵌数组总结
下一篇： mongodb基础知识-内嵌数组相关