재우니의 블로그

스마트폰에서 canvas로 그려진 이미지를 꾹 눌러 저장 또는 공유하기

프로그래밍/jQuery 👍
2024. 12. 2. 10:47

 

스마트폰에서 canvas로 그려진 이미지를 꾹 눌러 저장 또는 공유할 수 있도록 구현하려면, 캔버스 이미지를 Base64 데이터 URL로 변환하고 <img> 태그를 사용하여 이를 표시해야 합니다. <img> 태그를 사용하면 스마트폰의 기본 동작(롱프레스 시 저장/공유 기능)이 활성화됩니다.

아래는 이를 구현한 전체 HTML 코드입니다:

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Image Interaction</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .content-box {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        canvas {
            display: none; /* 캔버스는 숨겨둠 */
        }
        img {
            max-width: 100%;
            margin-top: 20px;
            border: 2px solid #ccc;
            border-radius: 10px;
        }
    </style>
</head>
<body>

<div class="content-box" id="downContentArea">
    <h2>캡처할 영역</h2>
    <p>스마트폰에서 캔버스를 꾹 눌러 이미지를 저장하거나 공유하세요.</p>
    <div>
        <img src="https://via.placeholder.com/200" alt="Placeholder" style="display: block; margin: 0 auto;">
    </div>
</div>

<!-- 결과 이미지를 표시 -->
<div class="content-box">
    <h3>캡처된 이미지</h3>
    <canvas id="canvasElement"></canvas>
    <img id="imgContent" alt="Generated Image">
</div>

<script>
    $(document).ready(function () {
        let content = document.getElementById("downContentArea");
        let canvasElement = document.getElementById("canvasElement");
        let imgContent = document.getElementById("imgContent");

        // html2canvas를 사용하여 캡처
        html2canvas(content, {
            backgroundColor: '#ffffff'
        }).then(canvas => {
            // 캔버스 숨기기
            canvasElement.style.display = "none";

            // 캔버스 내용을 이미지로 변환
            let image = canvas.toDataURL('image/png');
            
            // 변환된 이미지를 <img> 태그에 추가
            imgContent.src = image;
            imgContent.style.display = "block"; // 이미지를 표시
        });
    });
</script>

</body>
</html>

 

 

 

코드 설명

  1. 캔버스 생성 및 캡처
    • html2canvas를 사용하여 #downContentArea 콘텐츠를 캡처.
    • 결과를 canvas 객체로 반환.
  2. 캔버스 데이터를 이미지로 변환
    • canvas.toDataURL('image/png')를 사용하여 Base64 포맷의 이미지 데이터를 생성.
    • 생성된 데이터를 <img> 태그의 src 속성에 할당.
  3. 롱프레스(꾹 누르기) 동작 지원
    • <img> 태그에 이미지를 렌더링함으로써 스마트폰에서 꾹 눌렀을 때 저장, 공유, 복사 등의 기본 기능이 활성화됩니다.
  4. 스타일
    • 캔버스는 숨겨져 있어 화면에 표시되지 않으며, 이미지는 <img> 태그를 통해 화면에 나타납니다.

스마트폰에서 동작

  • 이미지를 꾹 누르면 다음과 같은 옵션이 나타납니다:
    1. iOS (Safari): "이미지 저장", "복사", "공유" 등의 옵션.
    2. Android (Chrome): "이미지 다운로드", "공유", "이미지 보기" 등의 옵션.

개선 사항

  1. 다운로드 버튼 추가
    • 필요하다면 캡처된 이미지를 직접 다운로드할 수 있는 버튼을 추가할 수 있습니다.
     
  2. 캔버스 디버깅
    • 캔버스를 숨기지 않고 확인할 수 있도록 설정하면 디버깅에 유용합니다.
let downloadLink = document.createElement('a');
downloadLink.href = image; // 캡처된 이미지 URL
downloadLink.download = 'captured-image.png';
downloadLink.click();

결론

이 코드는 스마트폰에서 캔버스를 꾹 눌러 저장, 공유 등의 동작을 완벽히 지원하며, 사용성을 극대화하기 위해 <img> 태그를 활용합니다.

저작자표시 비영리 동일조건

'프로그래밍 > jQuery 👍' 카테고리의 다른 글

jqxGrid 와 JSONPlaceholder - 서버사이드 페이징/필터링  (0) 2024.10.18
jquery select 태그의 option 비활성화 disabled 또는 선택막기 ✔  (3) 2024.08.15
fullCalendar 의 좌측 시분 hour minute 표기 hh:mm 형태로 변경하기  (0) 2024.08.15
jsGrid를 이용한 CRUD 웹 애플리케이션 개발  (0) 2024.06.28
자바스크립트 JavaScript 에서 클립보드 Clipboard 에 복사하려면 어떻게 하나요?  (2) 2023.12.29

티스토리툴바