JS - 获取剪切板内容 Clipboard API

目录

  • 1,需求
    • 最终效果
  • 2,实现
    • 示例
  • 3,注意点
    • 1,只支持安全上下文环境
    • 2,只能读取当前页面的剪切板
    • 3,权限获取问题
    • 4,获取内容的 MIME_TYPE 问题
      • 1,文本内容
      • 2,图片内容
    • 5,只能获取剪切板内容的 blob 类型
    • 6,`URL.revokeObjectURL` 的时机
  • 4,其他
    • paste 事件简单举例

1,需求

一个问题咨询表单页,可以上传图片。因为有截图的场景,所以需要得先截图保存在本地再上传,比较繁琐。

想从剪切板获取截图后,直接上传。

最终效果

在这里插入图片描述

2,实现

从剪切板获取的内容分为文本和非文本,分别对应2个API,

  • navigator.clipboard.readText()
  • navigator.clipboard.read(),可以用它来获取图片。

获取的内容是 ClipboardItem 对象。

示例

完整代码:

<template><div ref="refPasteBox"></div><button @click="getClipImg">获取剪切板图片</button>
</template><script setup lang="ts">
import { ref } from "vue";const refPasteBox = ref<HTMLDivElement>();
const getClipImg = async () => {try {const clipboardContent = await navigator.clipboard.read();const clipboardItem = clipboardContent[0];let noImg = true;for (const type of clipboardItem.types) {if (type === "image/png") {noImg = false;const blob = await clipboardItem.getType(type);const url = URL.createObjectURL(blob);// 如果需要 File 对象const file = new File([blob], "clipboard-image.png", { type });console.log(file);const img = document.createElement("img");img.src = url;img.width = 300;img.onload = () => {URL.revokeObjectURL(img.src);};refPasteBox.value?.appendChild(img);}}if (noImg) {alert("当前剪切板中没有图片。\n Windows 系统可通过快捷键\n ⌘+V \n查看剪切板");}} catch (err: any) {if (err.name === "NotAllowedError") {console.log("用户拒绝了访问剪贴板");} else {console.error("无法读取剪贴板内容: ", err);}}
};
</script>

3,注意点

1,只支持安全上下文环境

安全上下文,可以简单理解为只支持 https 协议和本地 http://127.0.0.1http://localhost

http 环境下是 undefined

在这里插入图片描述

2,只能读取当前页面的剪切板

有5个区域:

  1. 页面内容显示区域
  2. 地址栏
  3. 书签栏
  4. 控制台
  5. 其他应用

在这里插入图片描述

在执行 await navigator.clipboard.read() 相关 API 时,必须聚焦到区域1,否则会有如下报错!

在这里插入图片描述

正常情况下通过按钮点击来执行 API 时,都是满足的。

如果想在控制台中简单测试,可以用计时器。在控制台执行后,迅速点击页面区域就可以正常执行。

setTimeout(async () => {const clipboardContent = await navigator.clipboard.read();console.log(clipboardContent);
}, 2000);

3,权限获取问题

当第一次请求剪切板【读权限】时,也就是执行 await navigator.clipboard.read() 时,会弹出确认弹窗:

在这里插入图片描述

允许后就可以正常使用了。如果禁止了,无法通过再次执行代码打开该弹窗!只能手动重置权限。

在这里插入图片描述

4,获取内容的 MIME_TYPE 问题

const getClipImg = async () => {try {const clipboardContent = await navigator.clipboard.read();const clipboardItem = clipboardContent[0];console.log(clipboardItem);for (const type of clipboardItem.types) {if (type === "image/png") {const blob = await clipboardItem.getType(type);}}} catch (err) {console.log(err)}
};

示例代码中,通过 for 循环获取了剪切板内容的 type,它有几个特点:

1,文本内容

无论是从什么地方手动复制的文本,type 都是2个:text/plaintext/html

在这里插入图片描述

2,图片内容

1,如果是截图,type 统一为 image/png

在这里插入图片描述

2,如果是从网页上复制的图片(无论原图片是什么格式),type 统一都是2个:text/htmlimage/png

在这里插入图片描述

在这里插入图片描述

所以,只需要判断 MIME 类型为 image/png 即可获取对应的图片。

另外,从本地复制的文件(图片,excel等) 无法通过 await navigator.clipboard.read() API 获取。

5,只能获取剪切板内容的 blob 类型

// ...
for (const type of clipboardItem.types) {if (type === "image/png") {const blob = await clipboardItem.getType(type);}
}

通过 getType 可以获取剪切板的内容,结果为 blob 类型,

如果需要预览,需要转换为 url

const url = URL.createObjectURL(blob);

如果需要 File 对象(比如上传),需要手动转换。

const file = new File([blob], "clipboard-image.png", { type });

6,URL.revokeObjectURL 的时机

if (type === "image/png") {const blob = await clipboardItem.getType(type);const url = URL.createObjectURL(blob);const img = document.createElement("img");img.src = url;img.width = 300;img.onload = () => {URL.revokeObjectURL(img.src);};document.body.appendChild(img);
}

当通过 URL.createObjectURL() 创建可用于预览的对象 url 后,不能通过 URL.revokeObjectURL 立即释放该对象,否则图片无法显示。需要等到图片加载完成才行,或者不释放问题也不大。

4,其他

剪切板 API 获取的内容,和 paste 事件得到的内容是有区别的。

paste 事件一般用于富文本编辑,粘贴各种类型的文件。

  • 剪切板不能获取本地复制的文件,paste 事件可以。
  • MIME 类型问题,从网页复制的是 type/html,但却可以获取 File 对象。为了兼容,应该用 event.clipboardData?.files[0] 并加判断,而不是 items[0].getAsFile(), getAsFile-参考。
  • 获取的 DataTransfer 对象,虽然 MDN 上的解释是拖动获取的内容,但其实也是粘贴事件获取的内容。

paste 事件简单举例

注意,ClipboardEvent 对象中部分内容通过 console.log 是看不到输出的,类似打印 currentTarget 得到的是 null,但是可以使用的。

<template><div ref="refClipBox" class="clip-box" @paste="getPasteImage" contenteditable="true"></div>
</template><script setup lang="ts">
import { ref } from "vue";const refClipBox = ref<HTMLDivElement>();
function getPasteImage(event: ClipboardEvent) {event.preventDefault();console.log(event);// 检查剪贴板项目const items = event.clipboardData?.items || [];if (items[0].type.indexOf("image") === 0 || items[0].type === "text/html") {// const blob = items[0].getAsFile();const blob = event.clipboardData?.files[0];const url = URL.createObjectURL(blob);const img = document.createElement("img");img.src = url;img.width = 300;img.onload = () => {URL.revokeObjectURL(img.src);};refClipBox.value?.appendChild(img);} else {console.log("不是图片");}
}
</script>
<style>
.clip-box {width: 300px;height: 300px;border: 1px solid #000;
}
</style>

以上。

参考

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/879696.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

魅思-视频管理系统 getOrderStatus SQL注入漏洞复现

0x01 产品简介 魅思-视频管理系统是一款集成了视频管理、用户管理、手机端应用封装等功能的综合性视频管理系统。该系统不仅以其强大的视频管理功能、灵活的用户管理机制、便捷的手机端应用封装功能以及高安全性和现代化的界面设计,成为了市场上备受关注的视频管理系统之一。…

【MySQL】使用C语言连接数据库

看到标题&#xff0c;可能会疑惑&#xff0c;我们学习的不是C吗&#xff0c;为什么使用C语言去连接数据库呢??实际上&#xff0c;这两种语言都可以连接数据库&#xff0c;但是C语言提供的API没有进行封装&#xff0c;更有利于我们学习数据库连接。面向API编程&#xff0c;哈哈…

一个基于 laravel 和 amis 开发的后台框架, 友好的组件使用体验,可轻松实现复杂页面(附源码)

前言 随着互联网应用的发展&#xff0c;后台管理系统的复杂度不断增加&#xff0c;对于开发者而言&#xff0c;既要系统的功能完备&#xff0c;又要追求开发效率的提升。然而&#xff0c;传统的开发方式往往会导致大量的重复劳动&#xff0c;尤其是在构建复杂的管理页面时。有…

Web植物管理系统-下位机部分

本节主要展示上位机部分&#xff0c;采用BSP编程&#xff0c;不附带BSP中各个头文件的说明&#xff0c;仅仅是对main逻辑进行解释 main.c 上下位机通信 通过串口通信&#xff0c;有两位数据验证头&#xff08;verify数组中保存对应的数据头 0xAA55) 通信格式 上位发送11字节…

SpringBoot:自定义异常

我们在实现自定义异常的时候&#xff0c;我们需要继承 RuntimeException &#xff0c;参考代码&#xff1a; /*** <b>Function: </b> todo** program: BizException* Package: com.kingbal.king.common.core.exception* author: dingcho* date: 2024/09/14* versi…

STL容器中的填充fill和generate

STL容器中的填充fill和generate &#x1f4a2;fill and fill_n&#x1f4a2;generate and generate_n 算法描述fill(beg, end, val)将val赋值给[beg, end)之间的所有元素fill_n(beg, n, val)将val赋值给[beg, begn)之间的所有元素generate(beg, end, func)连续调用func填充[beg…

大数据框架常用端口号总结

框架组件端口HadoopNameNode (HDFS)50070 (Hadoop 2.x) / 9870 (Hadoop 3.x)DataNode (HDFS)50075 (Hadoop 2.x) / 9864 (Hadoop 3.x)ResourceManager (YARN)8088, 8032NodeManager (YARN)8042, 8040HBaseHMaster16010, 16000RegionServer16030, 16020Zookeeper2181HiveHiveSer…

QT串口发送数据的一个问题

一.问题与解决 1.问题&#xff1a; 在做串口发送固件升级数据的时候&#xff0c;总是莫名提示错误&#xff1a; QObject::startTimer: Timers cannot be started from another thread QObject::startTimer: Timers cannot be started from another thread QObject::startTi…

python 2024-9

第一课 问题 a, b 求最大值&#xff1f;分类讨论 if a > b:print("最大值 "&#xff0c; a)else:print("最大值 "&#xff0c; b)a, b, c 求最大值&#xff1f; 条件语句 if ... elif ... else列表最大值&#xff1f;与参照物循环比较 a [1.7, 1.…

机器学习:opencv--图像金字塔

目录 一、图像金字塔 1.图像金字塔是什么&#xff1f; 2.有哪些常见类型&#xff1f; 3.金字塔的构建过程 4.图像金字塔的作用 二、图像金字塔中的操作 1.向下采样 2.向上采样 3.注意--无法复原 三、代码实现 1.高斯金字塔向下采样 2.高斯金字塔向上采样 3.无法复…

基于SpringBoot+Vue+MySQL的志愿服务管理系统

系统展示 用户前台界面 管理员后台界面 系统背景 随着社会对志愿服务需求的日益增长&#xff0c;传统的志愿服务管理方式已难以满足高效、透明、精准的管理需求。为提升志愿服务组织的运营效率&#xff0c;优化资源配置&#xff0c;增强志愿者参与度和满意度&#xff0c;开发基…

LinuxC高级作业1

1.已知网址www.hqyj.com截取出网址的每一个部分 2.整理思维导图 3.将配置桥接网络的过程整理成文档 i)) 保证虚拟机提供了桥接模式 菜单栏中 ----> 虚拟机 -----> 设置 -----> 网络适配器 ii) 保证虚拟机可以设置桥接网络 菜单栏中 ----> 编辑 -----> 虚拟网…

linux第一课(操作系统核心)

一.关于linux (1)linux是一款开源的操作系统(是多用户&#xff0c;多任务&#xff0c;多线程)。 (2)一般所说的linux指的是linux核心&#xff0c;即对计算机硬件资源负责调度管理&#xff0c;主要职责是进程管理&#xff0c;内存管理文件系统&#xff0c;设备驱动&#xff0c…

禹神3小时快速上手typescript

一、TypeScript简介 TypeScript 由微软开发&#xff0c;是基于 JavaScript 的⼀个扩展语⾔。TypeScript 包含了 JavaScript 的所有内容&#xff0c;即&#xff1a; TypeScript 是 JavaScrip t 的超集。TypeScript 增加了&#xff1a;静态类型检查、接⼝、 泛型等很多现代开发特…

事件冒泡和事件捕获一般用在什么场景

事件冒泡和事件捕获是JavaScript中处理DOM事件时的两种不同传播方式&#xff0c;它们各自有特定的应用场景。 事件冒泡&#xff08;Event Bubbling&#xff09; 定义&#xff1a;事件冒泡是指当某个元素上的事件被触发时&#xff0c;这个事件会沿着DOM树向上传播&#xff0c;…

算法练习题24——查找杨辉三角中的组合数

题目描述 杨辉三角中的每个元素是一个组合数。第 ( i ) 行的第 ( j ) 个元素表示组合数 ( C(i, j) ) &#xff0c;即从 ( i ) 个元素中选 ( j ) 个元素的组合方式。已知一个正整数 ( N )&#xff0c;要求在杨辉三角中找到这个数&#xff0c;并输出它在杨辉三角中的具体位置。位…

(计算机毕设)基于SpringBoot+Vue的“乐锄”农产品销售网站的设计与实现

毕业设计&#xff08;论文&#xff09; 博主可接毕设&#xff01;&#xff01;&#xff01; 基于SpringBootVue的“乐锄”农产品销售网站的设计与实现 摘 要 传统的农资采购销售模式&#xff0c;造成农业生产的效率和质量低&#xff0c;人们对食品安全问题关注不断增加&#x…

golang 字符串浅析

go的字符串是只读的 测试源代码 package mainimport ("fmt""unsafe" )func swap(x, y string) (string, string) {return y, x }func print_string(obj *string, msg string) {string_ptr : (*[2]uintptr)(unsafe.Pointer(obj))first_obj_addr : string_…

前后端分离,使用MOCK进行数据模拟开发,让前端攻城师独立于后端进行开发

mock是什么 Mock生成随机数据,拦截Ajax 请求&#xff0c;前后端分离&#xff0c;让前端攻城师独立于后端进行开发。 增加单元测试的真实性 通过随机数据,模拟各种场景。 在实际开发过程中&#xff0c;前端是通过axios来请求数据的&#xff0c;很多时候前端开发者就是通过写固定…

idea2023版使用Free MyBatis plugin插件报错

项目场景&#xff1a; 新版的idea使用Free MyBatis plugin插件报错 问题描述 错误信息 java.lang.Throwable: #LineMarkerInfo(T, TextRange, Icon, int, Function, GutterIconNavigationHandler, Alignment) is deprecated and going to be removed soon. Please use LineM…