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)
}
);
}