当前位置:网站首页>JS copy picture to clipboard read clipboard
JS copy picture to clipboard read clipboard
2022-07-07 08:11:00 【qiphon3650】
JS Copy the image to the clipboard Read the clipboard
navigator.clipboard Copy pictures
Picture writing clipboard
function handleCopyImg() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
canvas.width = testImg.width;
canvas.height = testImg.height;
img.crossOrigin = "Anonymous";
img.src = testImg.src;
img.onload = () => {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, 0, 0); // take canvas To blob
canvas.toBlob(async blob => {
console.log(blob);
const data = [
new ClipboardItem({
[blob.type]: blob,
}),
]; // https://w3c.github.io/clipboard-apis/#dom-clipboard-write
await navigator.clipboard.write(data)
.then(
() => {
console.log("Copied to clipboard successfully!");
},
() => {
console.error("Unable to write to clipboard.");
}
);
});
}}
btn.addEventListener("click", handleCopyImg, false);
read Method returns a Promise, Get the copied content
async function foo() {
const items = await navigator.clipboard.read();
const imageBlob = await items[0].getType("image/png");
console.log("imageBlob==>", imageBlob);
}
// Read text
async function foo() {
await navigator.clipboard.readText().then((data) => {
console.log(data);
});
}
write Method , Write clipboard contents , Such as pictures or other documents
const data = [
new ClipboardItem({
"text/plain": new Blob(["hello clipboard"], {
type: "text/plain" })
})
];
navigator.clipboard.write(data).then(
() => {
console.log("Copied to clipboard successfully!");
},
() => {
console.error("Unable to write to clipboard. :-(");
}
);
// writeText Method to write text content
navigator.clipboard.writeText("hello!!!");
边栏推荐
- 漏洞复现-easy_tornado
- 【踩坑系列】uniapp之h5 跨域的问题
- DNS server configuration
- Recursive method to construct binary tree from preorder and inorder traversal sequence
- Bayes' law
- Force buckle 144 Preorder traversal of binary tree
- 让Livelink初始Pose与动捕演员一致
- Téléchargement des données de conception des puces
- [quickstart to Digital IC Validation] 15. Basic syntax for SystemVerilog Learning 2 (operator, type conversion, loop, Task / Function... Including practical exercises)
- LeetCode简单题之判断一个数的数字计数是否等于数位的值
猜你喜欢
Force buckle 144 Preorder traversal of binary tree
LeetCode中等题之我的日程安排表 I
Use of JMeter
藏书馆App基于Rainbond实现云原生DevOps的实践
通俗易懂单点登录SSO
Network learning (III) -- highly concurrent socket programming (epoll)
The charm of SQL optimization! From 30248s to 0.001s
eBPF Cilium实战(1) - 基于团队的网络隔离
Unityhub cracking & unity cracking
Force buckle 145 Binary Tree Postorder Traversal
随机推荐
Implementation of replacement function of shell script
Linux server development, redis source code storage principle and data model
CTF-WEB shrine模板注入nmap的基本使用
Qinglong panel -- finishing usable scripts
Chip design data download
青龙面板-今日头条
Rainbond 5.7.1 支持对接多家公有云和集群异常报警
【數字IC驗證快速入門】15、SystemVerilog學習之基本語法2(操作符、類型轉換、循環、Task/Function...內含實踐練習)
Make LIVELINK's initial pose consistent with that of the mobile capture actor
Fast parsing intranet penetration escorts the document encryption industry
【数字IC验证快速入门】10、Verilog RTL设计必会的FIFO
力扣(LeetCode)187. 重复的DNA序列(2022.07.06)
Myabtis_ Plus
Jmeter 的使用
Find the mode in the binary search tree (use medium order traversal as an ordered array)
game攻防世界逆向
Recursive method to construct binary tree from preorder and inorder traversal sequence
Qinglong panel - today's headlines
Introduction to basic components of wechat applet
Basic use of CTF web shrink template injection nmap