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实现点击图片将图片地址复制到粘贴板的方法，包括了js实现点击图片将图片地址复制到粘贴板的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现点击图片将图片地址复制到粘贴板的方法。分享给大家供大家参考。具体如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍js实现图片粘贴上传到服务器并展示的实例，包括了js实现图片粘贴上传到服务器并展示的实例的使用技巧和注意事项，需要的朋友参考一下 最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴) demo1: demo2: 注意:因为只支持右键复制图片,所以并不能一下复制两张图片,所有图片复制并粘贴上传待研究. html: 接口返回数据格
-
本文向大家介绍javascript在网页中实现读取剪贴板粘贴截图功能，包括了javascript在网页中实现读取剪贴板粘贴截图功能的使用技巧和注意事项，需要的朋友参考一下 见某网站的输入框支持截屏粘贴的功能，觉得有点意思，于是将代码扒出来分享下。 可惜，目前仅有高版本的 Chrome 浏览器支持这样直接粘贴，其他浏览器目前为止还无法粘贴( IE11没测试过 )，当然这种增强型的用户体验功能有总比没
-
本文向大家介绍用js实现一个复制粘贴的功能相关面试题，主要包含被问及用js实现一个复制粘贴的功能时的应答技巧和注意事项，需要的朋友参考一下 把 @wwqin 的内容实践了一下 注意测试时不要focus在控制台，不然不生效
-
本文向大家介绍JS基于clipBoard.js插件实现剪切、复制、粘贴，包括了JS基于clipBoard.js插件实现剪切、复制、粘贴的使用技巧和注意事项，需要的朋友参考一下 摘要： 最近做了一个项目，其中有这样一需求：实现一个点击按钮复制链接的功能，通过网上找相关资料，找到了几个插件，ZeroClipboard是通过flash实现的复制功能，随着越来越多的提议废除flash，于是就想能不能通过j
-
我有几个Excel图表，我想用Python导出为图像。每个图表都在一个单独的Excel文件中，只有一张工作表。此脚本适用于几乎所有我的图表： 我有一个图表，但是不能导出...我得到这个错误后导出函数： 图表被复制到临时工作表，但导出失败。在一些为导出此图表而编写的旧Excel-VBA代码中，我看到这一行： Python的等价物是什么？这： 不工作（属性错误：对象没有属性'Paste特殊'） 编辑-