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

简介: 原生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 || "图片复制成功");
        }
    }
},


相关文章
|
前端开发 JavaScript API
使用 JavaScript 实现图片上传
使用 JavaScript 实现图片上传
561 1
|
移动开发 JavaScript 前端开发
【Html.js——图片折叠效果】折叠手风琴(蓝桥杯真题-1763)【合集】
本项目实现了一个图片折叠手风琴效果,使用jQuery完成。主要包括以下部分: - **介绍**:任务是通过点击图片实现折叠和展开的效果。 - **准备**:内置初始代码,包含 `css/style.css`、`images/` 文件夹、`js/` 文件夹及 `index.html` 等文件。启动 Web Server 服务可运行项目。 - **目标**:完善 `index.js` 文件,使页面达到预期的折叠效果。 - **规定**:严格按步骤操作,保持默认文件结构不变,并在完成后保持 Web 服务正常访问状态。 - **通关代码**:使用 jQuery 实现点击事件,为选中元素添加 `act
396 19
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
602 3
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
552 1
原生JavaScript+canvas实现五子棋游戏_值得一看
|
JavaScript 前端开发
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
248 0
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
294 0
|
JavaScript 前端开发
JS - 如何上传 Base64 编码的图片
本文展示了如何将Base64编码的图片在前端转换为Blob对象,并使用`FormData`上传到服务器端的方法。
765 0

热门文章

最新文章