问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

即时设计中可以保留透明效果的PNG图片复制是如何实现的？

头像
画笔
    426

    即时设计里面可以选中元素将其复制为PNG图片且可以保留透明背景
    image.png
    点击复制PNG图片后，查看剪贴板里面的内容是一个字符串
    image.png
    此时使用Ctrl+V就可以将图片黏贴到指定为止(背景透明的效果也会被保留)
    image.png
    这是如何做到的？

    即时设计测试地址: https://js.design/f/SOpJss?p=HXN1E98y9F&mode=design%20%E9%82%...

    目前的尝试

    1. 在控制台中查找click事件的事件监听器，还没有找到对应的处理函数
    2. 使用 Clipboard API 写入PNG图片到剪切板，无法保留图片的透明效果(粘贴到微信聊天框的时候会导致图片的透明背景消失)，且在剪切板预览中是可以直接看到图片的

    即时设计和Clipboard API复制图片时剪切板中的区别
    即时设计
    image.png
    Clipboard API
    image.png

    前端javascriptchrome
    阅读 1k
    2 个回答
    得票最新
    头像
    未选择的路
      1263
      内蒙古赤峰市
      ✓ 已被采纳

      头像
      寅春树
        1.3k11206458

        获取图片数据：首先，你需要获取图片的Blob数据（二进制大对象）。这通常意味着你需要有一个图片URL，并能够通过Fetch API获取其内容。
        创建一个ClipboardItem：使用ClipboardItem将图片数据封装起来，以便可以将其放入剪贴板。
        写入剪贴板：使用navigator.clipboard.write()方法将ClipboardItem写入剪贴板。

        <!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>

        大概就是这样的原理。

        查看全部 2 个回答
        推荐问题
        宣传栏