 |
概要 | ユーザーがアップロードした画像に自動的に透かしを追加します |
 |
リポジトリ | GitHub - Arkshine/discourse-watermark-image · GitHub |
 |
インストールガイド | テーマまたはテーマコンポーネントのインストール方法 |
 |
Discourse テーマに初めての方へ | Discourse テーマの利用に関する初心者向けガイド |
このテーマコンポーネントをインストールする
説明
このテーマコンポーネントは、ユーザーがアップロードした画像に自動的に透かしを追加します。画像または 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 コード透かしをテストしてください。
リアルタイムプレビュー
設定パネルにはリアルタイムプレビュー機能が含まれており、透かしの設定がサンプル画像にどのように影響するかを即座に確認できます。
プレビューウィンドウには、以下のインタラクティブな機能があります：
- サイズ変更および移動可能なプレビューウィンドウ
- ランダムなサンプル画像の読み込みオプション
- デバイスから独自のテスト画像をアップロードするサポート
デスクトップでは自動的に開きます。また、ページ下部のボタンから開くこともできます：
重要なお知らせ
-
元の画像は保存されません
透かしはサーバーへのアップロード前に適用され、元の画像は保持されません。本番環境にデプロイする前に、透かしの設定を徹底的にテストしてください。 -
管理パネルでテストする場合は、設定をすぐに検証しないようご注意ください。安全のために、グループまたはカテゴリを作成することをお勧めします。
よくある質問
なぜ画像形式が制限されているのですか？
Discourse はすべてのアップロードを JPEG に変換しますが、この TC の透かし処理はアップロード前の元の形式に対して行われ、特定の画像処理ライブラリを使用しています。アップロード後の透かし処理も可能ですが、複数のアップロード/ダウンロードサイクルが必要となり、コンポーザーの体験に影響します。私はこのワークフローの改善を検討中です。
なぜテキスト透かしはサポートされていないのですか？
テキスト透かしには、フォント選択やスタイル設定など、専用のインターフェースなしでは効果的に実装することが難しい広範な設定オプションが必要です。画像透かしはより柔軟性が高く、既存のデザインツールを使用して作成できます。
ロードマップ
今後の開発計画には以下が含まれる可能性があります：
クレジット
このテーマコンポーネントは、以下のライブラリによって動作しています：
- Photon：WebAssembly 画像処理ライブラリ
- QR Code Generator：WebAssembly サポート付きの修正版 フォーク
アップロード入力は オブジェクト設定タイプ で部分的にサポートされていますが、現時点では TC では実現できません。 ↩︎
プラグイン開発が必要になる可能性があります。 ↩︎
