JavaScript 实现 Ctrl+V 粘贴图片到网页
作者:函数茶馆时间:2026-10-23 13:37:17浏览:322
本文介绍如何使用 JavaScript 监听 paste 事件,通过 Clipboard API 获取剪贴板中的图片数据,并将其转换为 Base64 格式后显示在网页中。该方法适用于需要支持直接粘贴图片功能的 Web 应用场景,代码简洁且兼容主流浏览器。
JavaScript 实现 Ctrl+V 粘贴图片到网页
本文介绍如何通过监听 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大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
