[JS] JavaScript를 사용하여 이미지를 복사하기

JavaScript를 사용하여 이미지를 복사할 수 있습니다.

 

<div class="form-btns">
    <img id="image" src='./qr_img/img12'/>
    <button type="button" class="form-btn" id="copyBtn">QR 코드 이미지 복사</button>
</div>

    document.getElementById("copyBtn").addEventListener("click", function() {
        const img = document.getElementById("image");
        const imgSrc = img.src;

        // 이미지 파일 로딩
        fetch(imgSrc)
        .then(response => response.blob())
        .then(blob => {
            // Blob 객체 생성
            const clipboardItems = [
                new ClipboardItem({
                    "image/png": blob
                })
            ];

            // 클립보드에 복사
            navigator.clipboard.write(clipboardItems)
            .then(function() {
                alert("이미지가 복사되었습니다.");
            })
            .catch(function() {
                alert("이미지 복사에 실패했습니다.");
            });
        });
    });

해당 코드는 클립보드 API와 Fetch API를 사용하여 이미지 파일을 복사하는 JavaScript 코드이다.

fetch() 메서드를 사용하여 이미지 파일을 가져온 후, response.blob() 메서드를 사용하여 Blob 객체를 생성 한다.

그리고, new ClipboardItem()을 사용하여 클립보드에 저장할 데이터를 생성한 후, navigator.clipboard.write() 메서드를 사용하여 클립보드에 데이터를 복사한다.

이 방법은 이미지 파일을 복사할 때 유용하며, 이미지를 직접 선택하지 않고 이미지 파일의 URL만 사용하여 복사하는 것이 가능 하다.

 

 

 

대신 https에서만 가능하다.