【技术】JS 操作剪贴板

JS 操作剪贴板

  • 1、原生 JS 操作剪贴板复制文本
  • 2、原生 JS 操作剪贴板读取图片实现异步上传
    • navigator 对象
    • 监听粘贴事件
  • 3、剪贴板插件

1、原生 JS 操作剪贴板复制文本

在博客类网站看到一段代码,想复制,如果代码量比较大,选中内容复制会比较麻烦。多数情况下会在代码右上角看到一个复制按钮,点击即可复制代码,是如何实现的呢?

准备一个按钮,样式可以自定,绑定一个单击事件

<button type="button" onclick="copyVal()">复制</button>
<div class="content">这里是一段文字...</div>

编写 copyVal() 方法

<script>function copyVal(){// 获取内容的组件let content = document.querySelector(".content");// 选中组件内容window.getSelection().selectAllChildren(content);// 执行拷贝命令document.execCommand("Copy");}
</script>

2、原生 JS 操作剪贴板读取图片实现异步上传

navigator 对象

navigator 对象在使用时有弊端,仅在安全域环境下生效。安全域环境是指:https 请求、localhost、127.0.0.1 作为请求的情况。如果是 IP 地址访问则会出现 navigator.clipboard 是 underfind 的情况。原因是浏览器的安全限制,不希望代码随意访问用户的剪贴板。不过可以采用另外一种方案解决。

async function getImageFromClipboard() {try {// 异步读取剪贴板内容let clipboardItems = clipboardItems = await navigator.clipboard.read();// 遍历剪贴板for (const clipboardItem of clipboardItems) {// 获取剪贴板内容类型for (const type of clipboardItem.types) {// 图片格式判断if (type === 'image/png' || type === 'image/jpeg') {// 获取图片元数据const blob = await clipboardItem.getType(type);// 创建文件读取对象const reader = new FileReader();// 文件读取成功reader.onload = (e) => {// 创建图片文件对象const img = new Image();// 把图片添加到页面元素中$(".img-box")[0].appendChild(img);};// 将数据读取为数据URLreader.readAsDataURL(blob);/* 异步上传图片 */// 构建文件对象,传递 blob 参数const file = new File([blob], "pasted-image." + type.split("/")[1], {type: type,});// 构建表单对象var formData = new FormData();formData.append('files', file);formData.append('language', $("#language").val());ajaxUpload(formData);/* 异步上传图片 */} else {alert("剪贴板最近内容不是图片!");return;}}}} catch (error) {console.error('Failed to read clipboard contents:', error);}
}
/*** 通过表单提交*/
function ajaxUpload(data){$.ajax({url: "/upload",type: "post",cache: false,data: data,processData: false,// 不处理数据contentType: false, // 不设置内容类型dataType: "json",success: function (data) {console.log("请求成功:", data);// 这里是请求成功的业务逻辑},error: function () {console.log("请求失败!")}});
}

监听粘贴事件

navigator 对象的使用弊端可以曲线救国,通过监听粘贴事件实现相关业务。

document.onpaste = function(event){try {// 获取剪贴板的元素集合var items = (event.clipboardData || event.originalEvent.clipboardData).items;// 遍历剪贴板元素for (var i = 0 ; i < items.length ; i++) {var item = items[i];// 判断图片类型if (item.type.indexOf("image") != -1) {// 元素转换为文件对象var file = item.getAsFile();/* 图片展示到页面 */// 创建读取文件组件(JS内置对象)var fr = new FileReader();// 读取文件fr.readAsDataURL(file);// 当数据读取完成的触发一个事件fr.onload = function () {// 获取文件数据var url = fr.result;let img = `<img src="${url}" id="showImg"/>`;// 把图片展示到页面$(".img-box").append(img);}/* 图片展示到页面 *//* 异步上传图片 */// 构建表单对象var formData = new FormData();// 表单添加文件,注意第一个参数是传递数据的 key,也就是 input file 的 name 属性的值formData.append('files', file);ajaxUpload(formData);/* 异步上传图片 */break;}}} catch (error) {console.error('Failed to read clipboard contents:', error);}
}

3、剪贴板插件

因为代码兼容问题,可以使用剪贴板插件:https://clipboardjs.com/

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

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

相关文章

基于python深度学习的CNN图像识别鲜花-含数据集+pyqt界面

代码下载&#xff1a; https://download.csdn.net/download/qq_34904125/89383615 本代码是基于python pytorch环境安装的。 下载本代码后&#xff0c;有个requirement.txt文本&#xff0c;里面介绍了如何安装环境&#xff0c;环境需要自行配置。 或可直接参考下面博文进行…

WPF 使用Image控件显示图片

Source属性 Source属性用来告诉Image组件要展示哪张图片资源的一个入口&#xff0c;通常是图片的路径。也许是本地路径&#xff0c;也许是网络路径。 本地图片路径加载方式 使用相对路径&#xff0c;相对于工程目录的路径&#xff0c;当设置Width属性时&#xff0c;图片会等…

Linux:基础IO(二.缓冲区、模拟一下缓冲区、详细讲解文件系统)

上次介绍了&#xff1a;Linux&#xff1a;基础IO&#xff08;一.C语言文件接口与系统调用、默认打开的文件流、详解文件描述符与dup2系统调用&#xff09; 文章目录 1.缓冲区1.1概念1.2作用与意义 2.语言级别的缓冲区2.1刷新策略2.2具体在哪里2.3支持格式化 3.自己来模拟一下缓…

FFMpeg解复用流程

文章目录 解复用流程图复用器与解复用器小结 解复用流程图 流程图&#xff0c;如上图所示。 复用器与解复用器 复用器&#xff0c;就是视频流&#xff0c;音频流&#xff0c;字幕流&#xff0c;其他成分&#xff0c;按照一定规则组合成视频文件&#xff0c;视频文件可以是mp4…

Linux各目录的作用

Linux各目录的作用 目录作用~登录用户对应的目录.当前工作目录$PATH环境变量/根目录/boot启动Linux使用的文件&#xff0c;例如Linux内核&#xff0c;包括连接文件和镜像文件&#xff0c;&#xff08;删了就启动不了了&#xff09;/bin(/usr/bin,/usr/local/bin)Binary&#x…

如何在vector中插入和删除元素?

在C的std::vector中插入和删除元素通常使用其成员函数来完成。以下是如何在std::vector中插入和删除元素的示例&#xff1a; 插入元素 在末尾插入元素&#xff1a;使用push_back函数。 cpp复制代码 #include <vector> int main() { std::vector<int> v; v.push_…

实现贪吃蛇小游戏【简单版】

1. 贪吃蛇游戏设计与分析 1.1 地图 我们最终的贪吃蛇大纲要是这个样子&#xff0c;那我们的地图如何布置呢&#xff1f; 这里不得不讲⼀下控制台窗口的⼀些知识&#xff0c;如果想在控制台的窗口中指定位置输出信息&#xff0c;我们得知道该位置的坐标&#xff0c;所以首先介…

CPN Tools学习——从平面网构建分层 PN

1.先创建平面petri网 创建如下petri网&#xff1a; CPN ide创建petri网真的舒服很多&#xff0c;但是教程又是CPN Tools的&#xff0c;我的想法是看两个版本能不能互通&#xff0c;在前者创建&#xff0c;在后者运行学习。 新增定义&#xff1a; colset E unit with e; 但…

nginx全解

一、Nginx配置文件 1.1 主配置文件 主配置文件位置&#xff1a;nginx.conf tip&#xff1a;安装方式不同&#xff0c;路径不同 #主配置文件格式 ​ main block&#xff1a;主配置段&#xff0c;即全局配置段&#xff0c;对http,mail都有效 ​ #配置Nginx服务器的事件模块相…

深度学习 --- stanford cs231学习笔记三(卷积神经网络CNN)

卷积神经网络CNN 1&#xff0c;有效的利用了图像的空间信息/局部感受野 全连接神经网络中的神经是由铺平后的所有像素计算决定。 由于计算时是把图像的所有像素拉成了一条线&#xff0c;因此在拉伸的同时也损失了图像像素之间固有的空间信息。 卷积层中的神经只由5x5x3(假设fil…

57.Linux/Unix 系统编程手册(下) -- SOCKET : Unix domain

https://blog.51cto.com/u_15567199/5204540 【linux网络编程】容错处理文件 wrap.h、wrap.c_wx623c6c9. // 容错处理 wrap.h #ifndef _WRAP_H_ #define _WRAP_H_#include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <error.h> #i…

LViT: 语言与视觉Transformer在医学图像分割中的应用| 文献速递-深度学习结合医疗影像疾病诊断与病灶分割

Title 题目 LViT: Language Meets Vision Transformer in Medical Image Segmentatio LViT: 语言与视觉Transformer在医学图像分割中的应用 01 文献速递介绍 医学图像分割是医学图像分析中最关键的任务之一。在临床实践中&#xff0c;准确的分割可以帮助医生诊断疾病&…

js继承,原型链继承,构造函数继承,组合式继承,原型式继承,寄生式继承,组合寄生式继承,extends继承

继承的理解&#xff0c;复用父类的属性和方法并增加新的属性和方法 目录 1. 原型链继承&#xff1a; 2. 构造函数继承 3. 组合式继承 4. 原型式继承 5. 寄生式继承 6. 组合寄生式继承 7. extends继承 1. 原型链继承&#xff1a; 父类构造函数的实例赋值给子类原型 func…

谷粒商城实战(033 业务-秒杀功能4-高并发问题解决方案sentinel 2)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第332p-第p335的内容 熔断降级 开启对Feign远程服务的熔断保护机制 feign.sentinel.enabletrue 这里我们只是调用方加就行 被调用方不用加 正常…

C调用C++中的类

文章目录 测试代码 测试代码 在C语言中调用C类&#xff0c;需要遵循几个步骤&#xff1a; 在C代码中&#xff0c;确保C类的函数是extern “C”&#xff0c;这样可以防止名称修饰&#xff08;name mangling&#xff09;。 使用头文件声明C类的公共接口&#xff0c;并且为这个…

JS如何判断一个对象是否为数组?

在JavaScript中&#xff0c;有多种方法可以判断一个对象是否为数组。以下是一些常用的方法&#xff1a; 使用Array.isArray()方法&#xff1a; 这是ECMAScript 5.1引入的一个方法&#xff0c;专门用于判断一个对象是否为数组。 let obj [1, 2, 3]; console.log(Array.isA…

NetSuite Saved Search 之 Filter By Summary

在某些业务场景中&#xff0c;用户需要一个TOP X的报表。例如&#xff0c;过去一段时间内&#xff0c;最多数量的事务处理类型。这就需要利用Saved Search中的Filter By Summary功能。 这在Criteria下的Summary页签里可以定义。其作用是对Result中Summary类型的结果进行过滤。也…

华为od-C卷200分题目 - 1分月饼

华为od-C卷200分题目 - 1分月饼 题目描述 中秋节&#xff0c;公司分月饼&#xff0c;m个员工&#xff0c;买了n个月饼&#xff0c;m<n&#xff0c;每个员工至少分1个月饼&#xff0c;但可以分多个&#xff0c; 单人分到最多月饼的个数是Max1&#xff0c;单人分到第二多月饼…

Flutter 实现StackAllocator简化FFI局部变量的内存管理

文章目录 前言一、为何简化&#xff1f;1、通常做法2、简化 二、完整代码三、使用示例1、局部内存管理2、支持嵌套 总结 前言 使用Flutter通过FFI调用c库的时候&#xff0c;经常需要传字符串或者一些指针变量&#xff0c;这里变量通常都是局部变量&#xff0c;在一个代码块运行…

Spock mock私有方法

mock私有方法 ‍ 被测试的方法是MiddleGroundAppListBO​类下的getPromptIdKeyAppPromptInfoMap方法 private Map<Long, AppPromptInfoModel> getPromptIdKeyAppPromptInfoMap(String cubeAppIdentity) {List<AppPromptInfoDO> promptByApp knowledgeCubeQueryR…