前端复制与粘帖Demo

Demo

前端html测试代码如下

复制文本：<input id="copy-text" type="text">
粘帖文本：<input id="paste-text" type="text">
<br/>
<button οnclick="copyTextToClipboard()">复制文本</button>
<button οnclick="pasteTextFromClipboard()">粘帖文本</button>
<br/>
复制图片：<input type="file" id="copy-img" accept="image/*"/>
粘帖图片：<img id="paste-img" src="#" alt="没有粘贴图片">
<br/>
<button οnclick="copyImageToClipboard()">复制图片</button>
<button οnclick="pasteImageFromClipboard()">粘帖图片</button>

一、文本的复制与粘帖

    // 复制文本
    function copyTextToClipboard() {
        var text = document.getElementById('copy-text').value;
        if (navigator.clipboard) {
            // 浏览器支持navigator.clipboard API
            navigator.clipboard.writeText(text)
                .then(function () {
                    alert('已复制文本到粘贴板');
                })
                .catch(function (err) {
                    console.error('复制文本到粘贴板发送异常', err);
                });
        } else {
            // （IE）浏览器不支持navigator.clipboard API
            const textArea = document.createElement("textarea");
            textArea.value = text;

            document.body.appendChild(textArea);
            textArea.select();

            try {
                document.execCommand('copy');
                console.log('(非navigator.clipboard)已复制文本到粘贴板');
            } catch (err) {
                console.error('(非navigator.clipboard)复制文本到粘贴板发送异常', err);
            }

            document.body.removeChild(textArea);
        }
    }

    // 粘帖文本
    function pasteTextFromClipboard() {
        if (navigator.clipboard) {
            // 浏览器支持navigator.clipboard API
            navigator.clipboard.readText()
                .then(function (clipboardText) {
                    document.getElementById('paste-text').value = clipboardText;
                    console.log('从粘贴板获取到文本:', clipboardText);
                })
                .catch(function (err) {
                    console.error('从粘贴板获取文本发送异常', err);
                });
        } else {
            // （IE）浏览器不支持navigator.clipboard API
            const textArea = document.createElement("textarea");
            document.body.appendChild(textArea);

            textArea.focus();

            try {
                document.execCommand('paste');
                const clipboardText = textArea.value;
                document.getElementById('paste-text').value = clipboardText;
                console.log('(非navigator.clipboard)从粘贴板获取到文本:', clipboardText);
            } catch (err) {
                console.error('(非navigator.clipboard)从粘贴板获取文本发送异常', err);
            }

            document.body.removeChild(textArea);
        }
    }

二、图片的复制与粘贴

图片的复制与粘帖需要依赖navigator.clipboard，IE不支持

    // 复制图片到粘贴板
    function copyImageToClipboard() {
        const img = new Image();
        img.crossOrigin = 'Anonymous';

        img.onload = function () {
            const canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;

            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);

            canvas.toBlob(function (blob) {
                const item = new ClipboardItem({'image/png': blob});
                navigator.clipboard.write([item]).then(function () {
                    alert('复制图片到粘贴板');
                }).catch(function (err) {
                    console.error('复制图片到粘贴板出现异常', err);
                });
            }, 'image/png');
        };

        img.src = URL.createObjectURL(document.getElementById('copy-img').files[0]);

    }

    // 粘帖图片
    function pasteImageFromClipboard() {
        navigator.clipboard.read().then(function (clipboardItems) {
            var item = clipboardItems[0];
            var type = item.types[0];
            if (type.indexOf("image") > -1) {
                item.getType(type).then(function (blob) {
                    document.getElementById('paste-img').src = URL.createObjectURL(blob);
                });
            }
        }).catch(function (err) {
                console.error('从粘帖板获取图片发送异常', err)
            }
        );
    }