[javascript] Clipboard.js를 사용하여 이미지 복사 기능 모바일에서 사용하기

30 Nov 2023

javascript

모바일 디바이스에서 이미지를 복사하는 기능은 종종 필요한 기능입니다. 하지만 모바일 브라우저에서는 JavaScript의 execCommand 메서드를 통한 복사 기능이 지원되지 않아 어려움을 겪는 경우가 있습니다. 이 문제를 해결하기 위해 Clipboard.js 라이브러리를 사용하여 모바일에서도 이미지 복사 기능을 사용할 수 있습니다.

Clipboard.js란?

Clipboard.js는 클립보드에 텍스트나 이미지를 복사하고 붙여넣기 할 수 있는 JavaScript 라이브러리입니다. 클립보드의 내용을 수정하려면 사용자의 동의가 필요하기 때문에 버튼이나 링크를 클릭할 때에만 텍스트를 복사하거나 붙여넣기 할 수 있도록 설계되어 있습니다.

모바일에서 이미지 복사 기능 사용하기

이제 Clipboard.js를 사용하여 모바일에서 이미지 복사 기능을 구현해보겠습니다.

1. Clipboard.js 라이브러리 추가하기

먼저, Clipboard.js 라이브러리를 HTML 파일에 추가합니다. 아래의 코드를 <head> 태그 안에 삽입하세요.

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

2. 이미지 복사 버튼 추가하기

이미지를 복사할 버튼을 HTML 파일에 추가합니다. 아래의 코드를 원하는 위치에 삽입하세요.

<button id="copy-img-btn">이미지 복사</button>

3. 스크립트 작성하기

이제 JavaScript 파일을 작성하여 Clipboard.js를 초기화하고 복사 버튼과 이미지를 연결해야 합니다. 아래의 코드를 <script> 태그 안에 추가하세요.

const copyImgBtn = document.querySelector('#copy-img-btn');
const imgSrc = '이미지 주소'; // 복사할 이미지의 URL

copyImgBtn.addEventListener('click', () => {
  const img = new Image();
  img.src = imgSrc;

  img.onload = () => {
    const clipboard = new ClipboardJS(copyImgBtn, {
      text: () => imgSrc,
    });

    clipboard.on('success', (e) => {
      console.log('이미지 복사 성공:', e.text);
    });

    clipboard.on('error', (e) => {
      console.error('이미지 복사 실패:', e.text);
    });

    img.remove(); // 사용이 끝나면 이미지 제거
  };
});

4. 실행해보기

이제 웹페이지에서 이미지 복사 버튼을 눌러 복사 기능을 테스트해볼 수 있습니다. 모바일 브라우저에서 이미지 주소를 클릭하여 이미지를 복사해보세요.

결론

Clipboard.js를 사용하면 모바일에서도 이미지 복사 기능을 구현할 수 있습니다. 모바일 브라우저에서 지원되지 않는 execCommand 메서드로 인한 제약을 극복할 수 있으며, 사용자의 동의를 받아 클립보드에 이미지를 복사할 수 있습니다.

더 자세한 정보는 Clipboard.js 공식 문서에서 확인할 수 있습니다.