clipboard 复制图片 | 便捷教程网

便捷教程网

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>clipboard 复制图片例子</title>
    <script src="https://php.bian-jie.cn/interface/staticDownload/clipboard/clipboard.min.js"></script>
</head>
<body style="padding:10px;">
    <div id="msg"></div>
    <div id="html">
        
        <img src='http://www.baidu.com/img/bd_logo1.png' style='width:50px;'><br />
        <img src='http://www.baidu.com/img/bd_logo1.png' style='width:50px;'><br />
        【搜索关键词】桂圆枸杞红枣茶
    </div>
    
    <input id="btn1" type="button" onclick="copy('#btn1')" value="点击复制">
    <script>
        /* 自定义复制函数
            * obj 触发器元素对象或id、class
            * text 需要复制的内容
            */
        function copy(obj, text) {
            var clipboard = new ClipboardJS(obj, {
                target: function (trigger) {
                    return document.getElementById("html");
                }
            });

clipboard.on('success', function (e) {
                e.clearSelection();
                document.getElementById("msg").innerHTML = "复制成功";
            });

clipboard.on('error', function (e) {
                document.getElementById("msg").innerHTML = "复制失败";
            });
        }
    </script>
</body>

</html>

运行结果如下：结果如下：尺寸：