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

news2025/2/4 3:51:21

核心代码

/*复制图片*/
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 || "图片复制成功");
        }
    }
},

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！