웹 애플리케이션에서 이미지 위에 직접 마킹을 하거나 자유롭게 그림을 그려야 하는 경우, jQuery 기반의 wPaint 플러그인은 매우 효율적인 선택지입니다. 실시간 드로잉 기능을 제공할 뿐만 아니라, 생성된 결과물을 서버로 전송하여 저장하는 일련의 과정을 간결하게 구현할 수 있습니다.

1. 드로잉 컨테이너 및 리소스 설정

먼저 그림이 그려질 영역을 HTML로 정의하고, 필요한 라이브러리(wColorPicker, wPaint)를 로드해야 합니다. 캔버스가 표시될 영역은 명확한 크기와 스타일이 지정되어야 레이아웃 깨짐을 방지할 수 있습니다.

<!-- 관련 CSS 로드 -->
<link rel="stylesheet" type="text/css" href="/assets/wpaint/wColorPicker.min.css" />
<link rel="stylesheet" type="text/css" href="/assets/wpaint/wPaint.min.css" />

<!-- 드로잉 영역 정의 -->
<div id="drawing-canvas"></div>

<style>
#drawing-canvas {
    position: relative;
    width: 700px;
    height: 500px;
    background-color: #f0f0f0;
    border: 2px solid #333;
    margin: 20px 0;
}
</style>

<!-- 의존성 스크립트 로드 -->
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/assets/wpaint/wColorPicker.min.js"></script>
<script type="text/javascript" src="/assets/wpaint/wPaint.min.js"></script>

2. 플러그인 초기화 및 배경 이미지 설정

wPaint를 초기화할 때 image 속성을 사용하면 특정 이미지를 배경으로 깔고 그 위에 드로잉을 시작할 수 있습니다. 이때 이미지는 절대 경로 URL이나 Base64 인코딩 데이터를 사용할 수 있습니다.

$(document).ready(function() {
    $('#drawing-canvas').wPaint({
        menuOffsetLeft: -35,
        menuOffsetTop: -45,
        saveImg: null, // 커스텀 저장 로직을 위해 null 설정 가능
        bg: '#ffffff',
        image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...", // 초기 배경 이미지 데이터
        strokeStyle: "#ff0000" // 기본 선 색상
    });
});

서버측(Java)에서 이미지를 Base64 문자열로 변환하여 클라이언트에 전달하는 방식은 다음과 같습니다. 최신 Java 버전에서는 java.util.Base64 라이브러리를 권장합니다.

import java.util.Base64;

public String convertImageToBase64(byte[] fileData) {
    if (fileData == null || fileData.length == 0) {
        return "";
    }
    return Base64.getEncoder().encodeToString(fileData);
}

3. 드로잉 결과물 저장 및 서버 전송

사용자가 드로잉을 마친 후 해당 이미지를 서버로 저장하려면 wPaint 객체로부터 이미지 데이터를 추출해야 합니다. image 메서드를 호출하면 현재 캔버스 상태가 Base64 문자열로 반환됩니다.

// 클라이언트에서 이미지 데이터 추출
var finalImageData = $("#drawing-canvas").wPaint("image");

// AJAX 등을 이용해 서버로 전송
$.post("/api/save-drawing", { imgBase64: finalImageData }, function(response) {
    alert("이미지가 저장되었습니다.");
});

서버에서는 전달받은 Base64 데이터를 다시 바이트 배열로 디코딩하여 파일로 저장하거나 DB에 보관할 수 있습니다.

import java.util.Base64;
import java.io.IOException;

public byte[] decodeDrawingData(String base64Content) {
    try {
        // "data:image/png;base64," 접두사가 포함된 경우 이를 제거해야 함
        String cleanData = base64Content.replaceFirst("^data:image/[^;]+;base64,", "");
        byte[] decodedBytes = Base64.getDecoder().decode(cleanData);
        
        // 데이터 보정 로직 (필요 시)
        for (int i = 0; i < decodedBytes.length; ++i) {
            if (decodedBytes[i] < 0) {
                decodedBytes[i] += 256;
            }
        }
        return decodedBytes;
    } catch (IllegalArgumentException e) {
        throw new RuntimeException("Base64 디코딩 중 오류가 발생했습니다.", e);
    }
}

이와 같은 방식을 통해 브라우저 환경에서 별도의 라이브러리 설치 없이 강력한 이미지 편집 및 마킹 기능을 사용자에게 제공할 수 있습니다.