原生js实现将图片内容复制到剪贴板

 


核心代码

/*复制图片*/
copyImg(dom) {/* 警告:dom不能是img标签,建议用DIV标签包裹img标签,否者会报错!不支持复制背景图! */dom.style.userSelect = 'auto';let selection = getSelection(), range = document.createRange();selection.removeAllRanges(), range.selectNodeContents(dom), selection.addRange
(range), document.execCommand('copy'), selection.removeAllRanges();
},

用例

<template><div><div ref="img"><imgsrc="https://gips2.baidu.com/it/u=1070828945,3304149431&fm=3028&app=3028&f=PNG&fmt=auto&q=75&size=f150_150"></div><el-input v-model.trim="inputValue" placeholder="请输入内容" clearable /><el-button type="primary" @click="copyImg($refs.img)">复制图片</el-button></div>
</template><script>
export default {data() { return { inputValue: '', } },methods: {/*复制图片*/copyImg(dom) {/* 警告:dom不能是img标签,建议用DIV标签包裹img标签,否者会报错!不支持复制背景图! */dom.style.userSelect = 'auto';let selection = getSelection(), range = document.createRange();selection.removeAllRanges(), range.selectNodeContents(dom), selection.addRange(range), document.execCommand('copy'), selection.removeAllRanges();},}
};
</script> 

扩展用法(自定义复制成功提示文本+弹窗方式)

/*复制图片*/
copyImg(dom, isAlert, successMsg = '') {/* 警告:dom不能是img标签,建议用DIV标签包裹img标签,否者会报错!不支持复制背景图! */dom.style.userSelect = 'auto';let selection = getSelection(), range = document.createRange();selection.removeAllRanges(), range.selectNodeContents(dom), selection.addRange(range), document.execCommand('copy'), selection.removeAllRanges();if (isAlert) {if (typeof isAlert === "function") {isAlert(successMsg || "图片复制成功");} else {Message.success(successMsg || "图片复制成功");}}
},

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

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

相关文章

大模型开发(五):实现Jupyter本地调用OpenAI API

全文共3000余字&#xff0c;预计阅读时间约15分钟 | 满满干货&#xff0c;建议收藏&#xff01; 大模型开发(五)&#xff1a;实现Jupyter本地调用OpenAI API OpenAI作为本轮大语言模型技术进步的先驱&#xff0c;其系列大型模型在效果上一直保持着领先。其推出的各类模型如文本…

springboot第30集:springboot集合问题

Logstash Logstash 是开源的服务器端数据处理管道&#xff0c;能够同时从多个来源采集数据、格式化数据&#xff0c;然后将数据发送到es进行存储。 ElasticSearch Elasticsearch 是基于JSON的分布式搜索和分析引擎&#xff0c;是利用倒排索引实现的全文索引。 KibanaKibana 能够…

数字化时代,如何做好用户体验与应用性能管理​

引言 随着数字化时代的到来&#xff0c;各个行业的应用系统从传统私有化部署逐渐转向公有云、行业云、微服务&#xff0c;这种变迁给运维部门和应用部门均带来了较大的挑战。基于当前企业 IT 运维均为多部门负责&#xff0c;且使用多种运维工具&#xff0c;因此&#xff0c;当…

Databend 开源周报第 102 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 为指定列创建 B…

极值理论 EVT、POT超阈值、GARCH 模型分析股票指数VaR、条件CVaR:多元化投资组合预测风险测度分析...

全文链接&#xff1a;http://tecdat.cn/?p24182 本文用 R 编程语言极值理论 (EVT) 以确定 10 只股票指数的风险价值&#xff08;和条件 VaR&#xff09;&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。 使用 Anderson-Darling 检验对 10 只股票的组合数据进行…

【文生图系列】stable diffusion webui 汉化(双语)教程

文章目录 安装双语插件下载json源文件设置双语 这篇博文记录于我成功安装双语插件之后&#xff0c;所以以下的示例页面均是双语。汉化教程分为三步&#xff0c;安装插件&#xff0c;JSON源文件下载和最后一步的双语设置。 安装双语插件 在扩展&#xff08;extensions&#xf…

k8s如何访问 pod 元数据

如何访问 pod 元数据 **我们在 pod 中运行容器的时候&#xff0c;是否也会有想要获取当前 pod 的环境信息呢&#xff1f;**咱们写的 yaml 清单写的很简单&#xff0c;实际上部署之后&#xff0c; k8s 会给我们补充在 yaml 清单中没有写的字段&#xff0c;那么我们的 pod 环境信…

数学建模-典型相关分析

上节回顾 论文&#xff1a;常州大学一等奖淡水养殖… 要进行 pearson 相关系数 画散点图、折线图看是否相关检验正态分布满足上述&#xff0c;利用pearson相关系数 刚开始推导不会没关系&#xff0c;会应用就行&#xff0c;推导过程略&#xff0c;之后学习了后续知识&#xff…

❤️创意网页:HTML5,canvas创作科技感粒子特效(科技感粒子、js鼠标跟随、粒子连线)

✨博主&#xff1a;命运之光 &#x1f338;专栏&#xff1a;Python星辰秘典 &#x1f433;专栏&#xff1a;web开发&#xff08;简单好用又好看&#xff09; ❤️专栏&#xff1a;Java经典程序设计 ☀️博主的其他文章&#xff1a;点击进入博主的主页 前言&#xff1a;欢迎踏入…

Ubuntu 的安装及其设置

文章目录 安装 Ubuntu屏幕分辨率设置修改软件源服务器锁屏时间设置设置 dash跨系统拖拽复制文件的设置 安装 Ubuntu 首先安装 VMware 虚拟机&#xff0c;虚拟机的安装比较简单&#xff0c;一步步点击Next即可完成安装。 安装完成后启动虚拟机&#xff0c;点击创建新的虚拟机。…

AC+AP 旁挂式连接配置(华为)

AR1路由器配置 # interface GigabitEthernet0/0/0 ip address 10.1.30.1 255.255.255.0 ip route-static 10.1.20.0 255.255.255.0 10.1.30.2 # LSW1核心交换机 # dhcp enable vlan batch 10 20 30 interface Vlanif20 ip address 10.1.20.1 255.255.255.0 dhcp select in…

回归预测 | MATLAB实现基于ELM-Adaboost极限学习机结合AdaBoost多输入单输出回归预测

回归预测 | MATLAB实现基于ELM-Adaboost极限学习机结合AdaBoost多输入单输出回归预测 目录 回归预测 | MATLAB实现基于ELM-Adaboost极限学习机结合AdaBoost多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于ELM-Adaboost极限学…

模拟面试2

1.说一说ArrayList的实现原理&#xff1f; ArrayList底层基于数组实现&#xff0c;内部封装了Object类型的数组&#xff0c;实现了list接口&#xff0c;通过默认构造器创建容器时&#xff0c;该数组被初始化为一个空数组&#xff0c;首次添加数据时再将其初始化为容量为10的数组…

【个人笔记】linux的cd命令与目录结构理解

cd命令 cd&#xff08;英文全拼&#xff1a;change directory&#xff09;命令用于改变当前工作目录的命令&#xff0c;切换到指定的路径。 若目录名称省略&#xff0c;则变换至使用者的 home 目录 (也就是刚 login 时所在的目录)。 另外&#xff0c;~ 也表示为 home 目录 的…

three.js学习记录(基础)

前言&#xff1a; 页面渲染3D特效&#xff0c;可以从各种图表库&#xff08;例如ECharts&#xff09;中寻找各种适用的模版&#xff0c;也可以寻找第三方插件。。。 一直以来都对three.js充满向往&#xff0c;终于偷闲找了个借口学了起来 参考资料 Three.js – JavaScript 3D…

什么?微信朋友圈能够一键转发了?

作为「国民级」聊天软件&#xff0c;微信朋友圈功能一直备受关注&#xff0c;毕竟社交 3 大巨头中&#xff0c;QQ 和微博都可以转发动态。那微信朋友圈能不能也像 QQ 空间这样&#xff0c;点击转发能分享到 QQ、微信和朋友圈呢&#xff1f; 那到底朋友圈转发怎么个转法&#xf…

流程图实现,基于vue2实现的流程图

1.基本思路 flex布局 伪元素实现竖直的连接线组件递归 2.效果图 2.1基础的&#xff08;未截全&#xff0c;大致长这样&#xff09; 2.2带有收缩功能的&#xff0c;可以展开和收缩并显示数量 3.待需要优化的点&#xff0c;根节点居中是基于整个流程图大小的来居中的&#xf…

使用 appium 进行微信小程序的自动化测试

目录 前言&#xff1a; 微信小程序结构 自动化用例的调整 示例代码 后记 前言&#xff1a; 微信小程序是一种流行的移动应用程序&#xff0c;它在移动设备上提供了丰富的功能和用户体验。为了确保微信小程序的质量和稳定性&#xff0c;自动化测试是必不可少的一环。Appiu…

VCSEL器件的常见参数有哪些?如何测试?

概述 垂直腔面发射激光器(VCSEL)是一种激光发射方向垂直于P-N结平面,而谐振腔面平行于P-N结平面的半导体激光器,它属于面发射激光器的一种。而EEL边射型激光器的光则是沿着水平方向,由芯片的边缘射出。与EEL相比, VCSEL的生产过程更具经济效益并且响应快,因此在越来越多的应用中…

element-ui message消息提示组件 ①延长提示消息在页面停留时间②提示消息换行

以实现下面的效果为示例 完整代码&#xff1a; let msgList ["数据1被引用", "数据2被引用"];// 使用html的换行标签拼接信息&#xff0c;默认行距太小&#xff0c;此处用两个<br/><br/>let message 以下数据不能删除&#xff0c;原因是&…