即时设计里面可以选中元素将其复制为PNG图片且可以保留透明背景
点击复制PNG图片后，查看剪贴板里面的内容是一个字符串
此时使用Ctrl+V就可以将图片黏贴到指定为止(背景透明的效果也会被保留)
这是如何做到的？
即时设计测试地址: https://js.design/f/SOpJss?p=HXN1E98y9F&mode=design%20%E9%82%...
目前的尝试
即时设计和Clipboard API复制图片时剪切板中的区别
即时设计
Clipboard API
获取图片数据：首先，你需要获取图片的Blob数据（二进制大对象）。这通常意味着你需要有一个图片URL，并能够通过Fetch API获取其内容。
创建一个ClipboardItem：使用ClipboardItem将图片数据封装起来，以便可以将其放入剪贴板。
写入剪贴板：使用navigator.clipboard.write()方法将ClipboardItem写入剪贴板。
极客观点
研发管理
HarmonyOS
chrome
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Copy PNG Image to Clipboard</title>
</head>
<body>
<img id="myImage" src="path/to/your/image.png" alt="Image to Copy" style="display:none;">
<button id="copyButton">Copy Image</button>
<script>
document.getElementById('copyButton').addEventListener('click', async () => {
try {
// 获取图片的URL
const imageElement = document.getElementById('myImage');
const imageUrl = imageElement.src;
// 通过fetch获取图片的Blob数据
const response = await fetch(imageUrl);
const blob = await response.blob();
// 创建一个ClipboardItem
const clipboardItem = new ClipboardItem({'image/png': blob});
// 写入剪贴板
await navigator.clipboard.write([clipboardItem]);
alert('Image copied to clipboard!');
} catch (error) {
console.error('Failed to copy image: ', error);
alert('Failed to copy image.');
}
});
</script>
</body>
</html>大概就是这样的原理。
27 回答12.8k 阅读
8 回答3.4k 阅读✓ 已解决
6 回答963 阅读✓ 已解决
5 回答5.1k 阅读✓ 已解决
4 回答1.5k 阅读✓ 已解决
3 回答1.7k 阅读
6 回答729 阅读