原生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">
            <img
                src="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 || "图片复制成功");
        }
    }
},

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

支持向量机(SVM)的超参数调整 C 和 Gamma 参数

作者:CSDN @ _养乐多_ 支持向量机(Support Vector Machine,SVM)是一种广泛应用的监督式机器学习算法。它主要用于分类任务,但也适用于回归任务。在本文中,我们将深入探讨支持向量机的两个重要参数:C和gamma。在阅读本文前,我假设您对该算法有基本的了解,并专注于这些…

从网络安全行业人才需求讲讲【个人规划】

如果你是一名正在找工作的网络安全方向大学生&#xff0c;或者是刚刚踏入网络安全领域的新手&#xff0c;这篇文章很适合你&#xff0c;如果你是一名老网安人&#xff0c;看看有哪些你中招了。 当你打开BOSS直聘、拉钩等招聘类网站后&#xff0c;在首页的快速导航页面很难找到关…

微信小程序安装和使用 Vant Weapp 组件库

微信小程序安装和使用 Vant Weapp 组件库 1. Vant Weapp 介绍2. Vant Weapp 的 安装2.1. 通过npm安装2.2. 构建npm2.3. 修改 app.json2.4. 修改 project.congfig.json2.5. 测试一下&#xff0c;使用Vant Weapp提供的组件 1. Vant Weapp 介绍 Vant 是一个轻量、可靠的移动端组件…

《遗留系统现代化》读书笔记(基础篇)

你现在所写的每一行代码&#xff0c;都是未来的遗留系统 为什么要对遗留系统进行现代化&#xff1f; 什么是遗留系统&#xff1f; 判断遗留系统的几个维度&#xff1a;代码、架构、测试、DevOps 以及技术和工具。时间长短并不是衡量遗留系统的标准。代码质量差、架构混乱、没…

【深度学习笔记】正则化与 Dropout

本专栏是网易云课堂人工智能课程《神经网络与深度学习》的学习笔记&#xff0c;视频由网易云课堂与 deeplearning.ai 联合出品&#xff0c;主讲人是吴恩达 Andrew Ng 教授。感兴趣的网友可以观看网易云课堂的视频进行深入学习&#xff0c;视频的链接如下&#xff1a; 神经网络和…

Django实现简单的音乐播放器 4

在原有音乐播放器功能基础上&#xff0c;增加上传音乐功能。 效果&#xff1a; 目录 配置上传路径 配置路由 视图处理歌曲 引入类库 保存歌曲文件 模板上传 设置菜单列表 设置菜单列表样式 脚本设置 上传效果 1.显示菜单列表 2.点击上传歌曲 3.上传完成 4.查看保…

GEE:计算每个对象的面积、标准差、周长、宽度、高度

作者:CSDN @ _养乐多_ 本文记录了面对对对象分割,以及计算每个对象的面积、标准差、周长、宽度、高度的代码。 文章目录 一、代码一、代码 // 设置种子 var seeds = ee.Algorithms.Image.Segmentation.seedGrid(20)

如何通过 CrossOver 在 Mac 苹果电脑上安装使用 windows 应用程序?

首先我们可以先了解一下什么是 crossOver &#xff0c;CrossOver 是 Mac 和 Windows 系统之间的兼容工具。使 Mac 操作系统的用户可以运行 Windows 系统的应用&#xff0c;从办公软件、实用工具、游戏到设计软件&#xff0c; 您都可以在 Mac 程序和 Windows 程序之间随意切换。…

18.Lucas-Kanade光流及OpenCV中的calcOpticalFlowPyrLK

文章目录 光流法介绍OpenCV中calcOpticalFlowPyrLK函数补充reference 欢迎访问个人网络日志&#x1f339;&#x1f339;知行空间&#x1f339;&#x1f339; 光流法介绍 光流描述了像素在图像中的运动&#xff0c;就像彗星☄划过天空中流动图像。同一个像素&#xff0c;随着时…

MacOS触控板缩放暂时失灵问题解决

我的系统版本为Monterey 12.5.1&#xff0c;亲测有效 直接创建脚本xxx.sh&#xff0c;并在终端执行脚本bash xxx.sh即可解决此问题&#xff0c;脚本内容如下&#xff1a; #!/bin/bashkillall Finder #kill Finder如不需要可以删除 killall Dock #kill Dock 如不需要可以删…

【Maven】Maven下载,配置以及基本概念

文章目录 1. Maven简介2. Maven下载3. Maven环境配置4.Maven的基本概念4.1 仓库4.2 坐标4.3 仓库配置(修改IDEA默认Maven库) 1. Maven简介 Maven是一个Java项目管理工具和构建工具&#xff0c;用于管理项目的依赖关系、构建过程以及项目的部署。它是Apache软件基金会的开源项目…

『表面』在平面模型上提取凸(凹)多边形

原始点云 直通滤波,z轴0~1.1 分割模型为平面&#xff0c;分割结果进行投影 提取多边形 代码: #include <pcl/ModelCoefficients.h> // 模型系数的数据结构&#xff0c;如平面、圆的系数 #include <pcl/io/pcd_io.h>#include <pcl/point_types.h> // 点云数据…

nginx uwsgi配置django

uwsgi文件 [uwsgi] # 服务端口号&#xff0c;这里没有设置IP值&#xff0c;默认是加载服务器的IP地址 #http :5000 socket:8000 # flask项目地址 chdir /pyprogram/electric # wsgi文件 /home/flask_project/mange.py #module app:app wsgi-file/pyprogram/electric/electr…

手搓一台简单的网络损伤仪——弱网测试

1、介绍 支持对链路带宽、传输时延、丢包率和无码率的手动设置&#xff1b; 1.1、网络损伤仪在使用时&#xff0c;网络拓扑连接 1.2、网络损伤仪管理页面展示 2、使用的设备及相关技术栈 一台Intel 赛扬 J1900的迷你主机【拥有4个千兆网口】&#xff1b;ubuntu-18.04.5-live…

【机器学习】了解 AUC - ROC 曲线

一、说明 在机器学习中&#xff0c;性能测量是一项基本任务。因此&#xff0c;当涉及到分类问题时&#xff0c;我们可以依靠AUC - ROC曲线。当我们需要检查或可视化多类分类问题的性能时&#xff0c;我们使用AUC&#xff08;曲线下面积&#xff09;ROC&#xff08;接收器工作特…

Coggle 30 Days of ML(23年7月)任务六:训练FastText、Word2Vec词向量

Coggle 30 Days of ML&#xff08;23年7月&#xff09;任务六&#xff1a;训练FastText、Word2Vec词向量 任务六&#xff1a;学会训练FastText、Word2Vec词向量 说明&#xff1a;在这个任务中&#xff0c;你将学习如何训练FastText和Word2Vec词向量模型&#xff0c;这些词向量…

Linux地盘上AMD处理器称王了

近日资讯&#xff0c;尽管从全局来看&#xff0c;Linux系统份额远不及Windows&#xff0c;但在程序员、开发者、硬核玩家圈子&#xff0c;Linux则备受推崇。 来自Steam的最新数据显示&#xff0c;在Linux游戏用户中&#xff0c;AMD处理器的份额占据绝对优势&#xff0c;达到了…

ts学习(一):基础篇1

旨在记录&#xff01; 这篇人都学废了&#xff0c;本想记录常用类型&#xff0c;越学越多&#xff0c;每一个都很重要… 一、string: 字符串类型二、number: 数字类型三、boolean: 布尔值四、array:数组五、tuple: 元组六、字面量七、object:对象八、any: 任意类型九、unknown:…

Spring MVC文件上传

Spring MVC文件上传 Spring MVC 框架的文件上传基于 commons-fileupload 组件&#xff0c;并在该组件上做了进一步的封装&#xff0c;简化了文件上传的代码实现&#xff0c;取消了不同上传组件上的编程差异。 1. MultipartResolver接口 在 Spring MVC 中实现文件上传十分容易…

云和DevOps如何帮助加速数字化转型?

1.云和 DevOps&#xff1a;概述 数字化转型已成为寻求在现代时代蓬勃发展的企业的一项关键举措。为了加速这一转型&#xff0c;组织正在利用云计算的力量并采用DevOps实践。云计算提供可扩展且灵活的基础架构&#xff0c;而 DevOps 则支持协作和持续交付的文化。本文将探讨云和…