 |
요약 | 사용자가 업로드한 이미지에 자동으로 워터마크를 추가합니다 |
 |
저장소 | GitHub - Arkshine/discourse-watermark-image · GitHub |
 |
설치 가이드 | 테마 또는 테마 컴포넌트 설치 방법 |
 |
디스코urs 테마가 처음이신가요? | 디스코urs 테마 사용 입문가이드 |
이 테마 컴포넌트 설치
설명
이 테마 컴포넌트는 사용자가 업로드한 이미지에 자동으로 워터마크를 추가합니다. 이미지나 QR 코드를 워터마크로 사용할 수 있으며, 위치, 외관, 분포 패턴에 대한 광범위한 사용자 지정 옵션을 제공합니다.
카테고리 및 사용자 그룹 설정을 통해 세밀한 제어가 가능하며, 커뮤니티의 필요에 맞게 워터마킹 동작을 맞춤 설정할 수 있습니다.
구현 전에 중요 참고 사항 섹션을 검토해 주세요.
기능
- WebAssembly 및 Web Workers를 사용한 고품성 처리
- 포괄적인 이미지 형식 지원 (PNG, JPEG, BMP, ICO, TIFF, WEBP)
- 동적 QR 코드 워터마크 생성
- 유연한 크기 옵션 (상대적 또는 절대적)
- 다양한 위치 지정 시스템
- 고급 외관 사용자 지정 (불투명도, 회전, 스케일, 여백 등)
- 여러 블렌딩 모드
- 패턴 분포 옵션 (단일, 그리드, 대각선, 랜덤)
- 카테고리 및 사용자 그룹별 설정
- 설정 패널에서 실시간 미리보기
설정
| 설정 | 설명 |
|---|---|
image |
워터마크로 사용할 이미지. 지원 형식: PNG, JPEG, BMP, ICO, TIFF, WEBP. 기본값: "" |
size_mode |
워터마크 크기가 계산되는 방법: - relative: 대상 이미지 폭에 대한 상대적 크기.- absolute: 원래 크기로 적용.기본값: "relative" |
relative_width |
대상 이미지 폭에 대한 워터마크 폭 (%). 워터마크 크기 모드가 relative로 설정된 경우에만 적용됩니다.범위: 1-100 기본값: 10 |
absolute_scale |
원래 워터마크 크기의 스케일 팩터 (절대 모드에서만 사용). 최소값: 0.01 기본값: 1 |
max_size |
이미지 치수의 백분율로 된 최대 크기. 범위: 1-100 기본값: 50 |
position |
워터마크 위치: top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-right기본값: "bottom-right" |
margin_x |
가장자리로부터의 수직 여백 (대상 이미지의 %) 기본값: 0 |
margin_y |
가장자리로부터의 수직 여백 (대상 이미지의 %) 기본값: 0 |
opacity |
워터마크 불투명도. 범위: 1-100 기본값: 100 |
rotate |
회전 각도. 범위: -360도에서 360도까지 기본값: 0 |
blend_mode |
워터마크가 이미지와 블렌딩되는 방식: normal, overlay, over, atop, xor, plus, multiply, burn, difference, soft_light, screen, hard_light, dodge, exclusion, lighten, darken. 기본값: "normal" |
pattern |
워터마크 반복 패턴: single, grid, diagonal, random기본값: "single" |
pattern_allow_partial |
이미지 가장자리에 부분적인 워터마크 허용 기본값: true |
pattern_max_count |
워터마크 반복 최대 횟수 (0은 무한) 기본값: 50 |
pattern_spacing |
반복되는 워터마크 사이의 간격 (대상 이미지의 %) 기본값: 15 |
qrcode_enabled |
QR 코드 워터마크 활성화 기본값: false |
qrcode_text |
QR 코드에 인코딩할 텍스트. 플레이스홀더 지원: {homepage}, {username}, {topic_url}기본값: "" |
qrcode_color |
QR 코드 색상 (16진수 또는 CSS 변수) 기본값: "var(--primary)" |
qrcode_background_color |
QR 코드 배경색 (16진수 또는 CSS 변수) 기본값: "var(--secondary)" |
qrcode_quiet_zone |
QR 코드 주위의 흰색 여백 경계 폭 (0-10 모듈) 기본값: 2 |
qrcode_error_correction |
오류 정정 레벨: Low (~7%), Medium (~15%), Quarter (~25%), High (~30%)오류 정정 레벨에 대한 자세한 정보는 여기에서 찾을 수 있습니다. 기본값: "Medium" |
categories |
워터마크가 적용되어야 하는 카테고리. 기본값: "" |
groups |
워터마크가 적용되어야 하는 그룹. 기본값: "0" |
skip_small_images |
이미지가 min_image_dimensions보다 작으면 워터마킹을 건너뜀.기본값: false |
min_image_dimensions |
필요한 최소 치수 (폭 x 높이) 기본값: "200x200" |
allow_non_supported_uploads |
형식이 지원되지 않더라도 이미지 업로드를 계속 허용 기본값: false |
워터마크 유형
이미지
이 컴포넌트는 여러 이미지 형식을 지원합니다: PNG, JPEG, BMP, ICO, TIFF, WEBP.
형식 지원 제한에 대한 중요한 정보는 FAQ 섹션을 참조하세요.
QR 코드
다음 변수를 사용하여 사용자 지정 가능한 내용으로 동적 QR 코드를 생성할 수 있습니다:
{homepage}- 홈페이지 URL{username}- 사용자 이름{topic_url}- 주제 URL
중요: QR 코드 워터마크를 스타일링할 때 대비와 크기를 고려하세요. 낮은 대비 비율이나 과도한 스타일링은 QR 코드를 읽을 수 없게 만들 수 있습니다. 항상 스캐닝 앱으로 QR 코드 워터마크를 테스트하세요.
실시간 미리보기
설정 패널에는 실시간 미리보기 기능이 포함되어 있어 워터마크 구성이 샘플 이미지에 미치는 영향을 즉시 확인할 수 있습니다.
미리보기 창은 몇 가지 인터랙티브 기능을 제공합니다:
- 크기 조절 및 이동 가능한 미리보기 창
- 랜덤 샘플 이미지 로드 옵션
- 장치에서 직접 테스트 이미지 업로드 지원
데스크톱에서는 자동으로 열립니다. 페이지 하단의 버튼에서도 열 수 있습니다:
중요 참고 사항
-
원본 이미지는 보존되지 않음
워터마크는 서버 업로드 전에 적용되며, 원본 이미지는 유지되지 않습니다. 프로덕션 환경에 배포하기 전에 워터마크 설정을 철저히 테스트하세요. -
관리 패널에서 테스트할 경우, 설정을 즉시 확인하지 않도록 주의하세요. 안전을 위해 그룹이나 카테고리를 생성하는 것을 권장합니다.
FAQ
왜 이미지 형식이 제한되어 있나요?
디스코urs는 모든 업로드를 JPEG로 변환하지만, 이 TC 워터마킹은 특정 이미지 처리 라이브러리를 사용하여 원본 형식에서 업로드 전에 발생합니다. 업로드 후 워터마킹도 가능하지만, 여러 번의 업로드/다운로드 사이클이 필요하며 컴포저 경험을 영향을 미칠 것입니다. 이 워크플로우에 대한 개선 사항을 계속 탐구하고 있습니다.
왜 텍스트 워터마킹이 지원되지 않나요?
텍스트 워터마킹은 전용 인터페이스 없이 효과적으로 구현하기 어려운 광범위한 설정 옵션(폰트 선택, 스타일링 등)이 필요합니다. 이미지 워터마크는 더 많은 유연성을 제공하며 기존 디자인 도구를 사용하여 생성할 수 있습니다.
로드맵
미래 개발 계획에는 다음이 포함될 수 있습니다:
크레딧
이 테마 컴포넌트는 다음으로 구동됩니다:
- Photon: WebAssembly 이미지 처리 라이브러리
- QR Code Generator: WebAssembly 지원이 포함된 수정된 포크
업로드 입력은 Object 설정 유형으로 부분적으로 지원됩니다 – 현재 TC에서는 수행할 수 없습니다. ↩︎
플러그인 개발이 필요할 수 있습니다. ↩︎
