JavaScript 如何實現點擊按鈕複製圖片功能？-js教程-PHP中文網

JavaScript 如何實現點擊按鈕複製圖片功能？

WBOY

發布： 2023-10-24 10:49:41

原創

1354 人瀏覽過

JavaScript 如何实现点击按钮复制图片功能？

JavaScript 如何實作點擊按鈕複製圖片功能？

在現代網路開發中，我們經常遇到需要複製圖片的需求，例如將圖片連結傳送給其他人或儲存到剪貼簿中。本文將介紹如何透過JavaScript實現點擊按鈕複製圖片的功能。

實現這個功能的關鍵在於複製圖片的位址。以下是一個簡單的範例程式碼：

<!DOCTYPE html>
<html>
<head>
    <title>点击按钮复制图片</title>
    <style>
        .image-container {
            position: relative;
        }
        .copy-button {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img id="my-image" src="image.jpg" alt="图片">
        <button class="copy-button">复制图片链接</button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var copyButton = document.querySelector('.copy-button');
            var myImage = document.querySelector('#my-image');

            copyButton.addEventListener('click', function() {
                var imageUrl = myImage.src;
                copyToClipboard(imageUrl);
                alert('已复制图片链接到剪贴板！');
            });

            // 复制到剪贴板的实现函数
            function copyToClipboard(value) {
                var input = document.createElement('input');
                input.style.position = 'fixed';
                input.style.opacity = 0;
                input.value = value;
                document.body.appendChild(input);
                input.select();
                document.execCommand('copy');
                document.body.removeChild(input);
            }
        });
    </script>
</body>
</html>

登入後複製

在這個範例程式碼中，我們首先定義了一個包含圖片和按鈕的容器。然後，我們使用JavaScript選取到了圖片元素和按鈕元素，並為按鈕新增了一個點擊事件監聽器。

在點擊事件處理函數中，我們取得了圖片的位址，並呼叫了copyToClipboard函數將圖片位址複製到剪貼簿。 copyToClipboard函數的實作如下：