经验分享:计算机 web 浏览器——访问剪切板图片

有时候,我们希望能访问用户的剪切板,来实现一些方便用户的功能;但是另一方面,剪切板里的数据对用户来说又是非常隐私的,所以浏览器在获取信息方面有安全限制,同时也提供访问接口。
当我们需要实现在富文本里进行粘贴操作的时候,如果我们复制的是图片,需要将图片上传服务器后,插入到文本内;看似合情合理的要求,却有很多坑。
一、如何访问剪切板
1、在用户触发 onPaste 事件时(只能是用户进行事件触发),通过事件对象(event)获取。查看官方文档来详细了解。
let text = (event.clipboardData || window.clipboardData).getData('text');
2、Chrome 新增异步剪贴板 API,可以跟用户申请访问权限,得到允许后则能访问。可以参考知乎的一篇文章。
二、访问剪切板图片
先说结论
从文件系统复制图片 mac os能拿到最后一张;windows 拿不到数据
截图 mac 和 windows 能获取
在浏览器界面复制 mac 和 windows 能获取
windows 为什么一张都拿不到呢,用户在文件系统复制的文件,在剪切板里存的并不是图片(猜测存的是图片的标记),所以是拿不到。

代码如下
/*** 触发 paste 事件,响应方法*/function paste(event)
{ // 拿到数据 let items = (event.clipboardData || event.originalEvent.clipboardData).items; let imgList = [];
// 获得图片数据,可以直接写入到 <img src=''> 的src内进行展示 let strList = []; for (let item of items) {
// 如果拿到的数据是文件 if (item.kind === 'file') { let blob = item.getAsFile();
let reader = new FileReader(); blobList.push(blob); reader.onload = ()=> { imgList.push(reader.result); }
reader.readAsDataURL(blob); } else if(item.kind === 'string')
{ // 如果拿到的数据是字符串 item.getAsString((s)=>{ strList.push(s); }); } }}
最后,想要完全实现用户 Contr+C、Contr+V 来发帖,目前还做不到。有一种替代方法,将图片拖动到富文本区域,这个操作也是很方便的,浏览器也都支持。
另外有一个公司的商业产品,他家开发的浏览器插件能支持在桌面复制图片后,粘贴到浏览器里。可惜目前只支持 windows 系统,mac os 还没有提供;
他们的方法我大致猜测是:安装浏览器插件并且允许运行后,当你在浏览器触发paste粘贴事件后,js调用插件方法,插件去访问系统里的文件(插件其实也是windows 的一个软件,所以能访问文件系统),然后返回给页面的 js。

经验分享:计算机 web 浏览器——访问剪切板图片的更多相关文章
- chrome浏览器下JavaScript实现clipboard时无法访问剪切板解决方案
在用JavaScript实现某个简单的复制到剪切板功能的时候,会考虑一下浏览器兼容性,主要是重点在IE和FireFox,把这个两个浏览器搞定后,基本上其他浏览器也不用太操心了,Chrome也一样,没出 ...
- JS访问剪切板中的图片
google出来一个html2canvas,它利用canvas来渲染读取的DOM树,也就是说它只能截取document里的内容,如果要像qq截图那样,应该怎么做?用过百度的Ueditor编辑器的朋友都 ...
- web复制到剪切板js
web复制到剪切板 clipboard.js 好使!开源项目,下载地址: https://github.com/zenorocha/clipboard.js 使用方法: 引入 clipboard.mi ...
- Python访问剪切板
剪切板访问工具 ----pyperclip he purpose of Pyperclip is to provide a cross-platform Python module for copyi ...
- Android 高仿UC浏览器监控剪切板弹出悬浮窗功能
UC浏览器应该是android手机里 最流行的浏览器之一了,他们有一个功能 相信大家都体验过,就是如果你复制了什么文字,(在其他app中 复制也有这个效果!,所以能猜到肯定是监控了剪切板),就会弹出一 ...
- java 访问剪切板(读取与设置)
设置文本到剪切板 public void setIntoClipboard(String data) { Clipboard clipboard = Toolkit.getDefaultToolkit ...
- java web浏览器访问工程前面添加一级目录学习笔记
有的时候因为nginx和f5策略问题需要在访问系统的时候前面添加一个前缀以区分不通地方需要用同一个工程的情况: 举个例子:当访问localhost:8080/webDemo/demo/shafei.j ...
- 计算机丨浏览器访问出现DNS_PROBE_POSSIBLE解决方法
方法1.打开命令控制台输入: netsh winsock reset.提示重启,电脑重启后就ok了. 其他方法待续......
- 在多浏览器使用JS复制内容到剪切板,无需插件
最近在学习DHTMLX,下载了一些JS源码,使用谷歌浏览器,在学习dhtmlxGrid部分进行复制表格内容时,发现,在线版的可以复制成功,而本地的不可以复制,报类似访问剪切板错误,经查找原因,原来是谷 ...
随机推荐
- Python爬虫学习第一记 (翻译小助手)
1 # Python爬虫学习第一记 8.24 (代码有点小,请放大看吧) 2 3 #实现有道翻译,模块一: $fanyi.py 4 5 import urllib.request 6 import u ...
- [Liunx]apt-get安装软件:依赖冲突问题及解决
正常使用apt-get install安装出现依赖冲突问题: 大概是这样: ga@ubuntu:$ sudo apt-get install gcc-5-base:i386 正在读取软件包列表... ...
- JS中call()、apply()、bind()的用法
其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge; //17 obj.myFun() //小张年龄undefined 例2 shows( ...
- MaaS系统概述
摘要:共享经济正改变着人们的生活方式,城市公共交通系统应该顺应共享经济的潮流进行转型.近年来,西方国家提出的“出行即服务(MaaS)”理念为我国解决日益严重的城市交通拥堵问题提供了新的思路.基于Maa ...
- selenium的文档API
你用WebDriver要做的第一件事就是指定一个链接,一般我们使用get方法: from selenium import webdriver from selenium.webdriver.commo ...
- 白话ansible-runner--1.环境搭建
最近在Windows10上的项目需要使用到ansible API调用,参考 本末大神 推荐ansible API用官网封装的ansible-runner开发比较友好,ansible-runner是an ...
- Android如何使用注解进行代码检查
原文首发于微信公众号:躬行之(jzman-blog),欢迎关注交流! Android Studio 内置了代码检查工具 Lint,可在菜单栏选择 Analyze > Inspect Code 执 ...
- xss小游戏通关
xss url:http://test.ctf8.com/level1.php?name=test 小游戏payload: <script>alert("'test'" ...
- vue下history模式刷新后404错误解决
官方说明文档: https://router.vuejs.org/zh/g... 一. 实测 Linux 系统 Apache 配置: 更改站点配置文件即可,我这里在 Directory 标签后面添加了 ...
- 040 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 02 while循环的执行流程
040 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 02 while循环的执行流程 本文知识点:while循环的执行流程 三种循环结构中的第一种--wh ...