tencent cloud

Cloud Object Storage

最新情報とお知らせ
製品アップデート情報
製品のお知らせ
製品概要
製品概要
機能概要
応用シナリオ
製品の優位性
基本概念
リージョンとアクセスドメイン名
仕様と制限
製品の課金
課金概要
課金方式
課金項目
無料利用枠
記帳例
請求書の確認とダウンロード
お支払い遅れについて
よくある質問
クイックスタート
コンソールクイックスタート
COSBrowserクイックスタート
ユーザーガイド
リクエストの作成
バケット
オブジェクト
データ管理
バッチ処理
グローバルアクセラレーション
監視とアラーム
運用管理センター
データ処理
インテリジェントツールボックス使用ガイド
データワークフロー
アプリ統合
ツールガイド
ツール概要
環境のインストールと設定
COSBrowserツール
COSCLIツール
COSCMDツール
COS Migrationツール
FTP Serverツール
Hadoopツール
COSDistCpツール
HDFS TO COSツール
オンラインツール (Onrain Tsūru)
セルフ診断ツール
実践チュートリアル
概要
アクセス制御と権限管理
パフォーマンスの最適化
AWS S3 SDKを使用したCOSアクセス
データディザスタリカバリバックアップ
ドメイン名管理の実践
画像処理の実践
COSオーディオビデオプレーヤーの実践
データセキュリティ
データ検証
COSコスト最適化ソリューション
サードパーティアプリケーションでのCOSの使用
移行ガイド
サードパーティクラウドストレージのデータをCOSへ移行
データレークストレージ
クラウドネイティブデータレイク
メタデータアクセラレーション
データアクセラレーター GooseFS
データ処理
データ処理概要
画像処理
メディア処理
コンテンツ審査
ファイル処理
ドキュメントプレビュー
トラブルシューティング
RequestId取得の操作ガイド
パブリックネットワーク経由でのCOSへのファイルアップロード速度の遅さ
COSへのアクセス時に403エラーコードが返される
リソースアクセス異常
POST Objectの一般的な異常
セキュリティとコンプライアンス
データ災害復帰
データセキュリティ
クラウドアクセスマネジメント
よくある質問
よくあるご質問
一般的な問題
従量課金に関するご質問
ドメインコンプライアンスに関するご質問
バケット設定に関する質問
ドメイン名とCDNに関するご質問
ファイル操作に関するご質問
権限管理に関するご質問
データ処理に関するご質問
データセキュリティに関するご質問
署名付きURLに関するご質問
SDKクラスに関するご質問
ツール類に関するご質問
APIクラスに関するご質問
Agreements
Service Level Agreement
プライバシーポリシー
データ処理とセキュリティ契約
連絡先
用語集
ドキュメントCloud Object Storage実践チュートリアル画像処理の実践画像テキスト混合ウォーターマークの実践

画像テキスト混合ウォーターマークの実践

PDF
フォーカスモード
フォントサイズ
最終更新日: 2024-06-26 10:42:27

ユースケース

Cloud Infinite基本画像処理のウォーターマーク機能は画像上への画像ウォーターマークまたはテキストウォーターマークの追加をサポートしています。ただし、現実の業務シーンにおいては、1枚の画像上に、固定のロゴウォーターマークと動的に変化するテキストウォーターマーク（ユーザー名など）の両方がある状況がしばしば発生します。上記の状況について、参考までに以下の方法をご紹介します。実際の業務シーンに応じて、適切な統合方法を選択することができます。

方法の優位性比較

方法
メリット
デメリット
方法1
統合が簡単で、手軽に実装できます。
ウォーターマークのサイズを画像の大きさに合わせて動的に変えることができず、タイリング操作を行うことができません。
方法2
画像サイズがよく変わる場合に、方法1に比べてよりアダプティブな効果が得られます。
統合のフローがより煩雑であり、2回分の処理料金がかかります。

操作方法

方法1：パイプラインオペレーターを使用してURLを実装すると同時に2種類のウォーターマークを付与する

Cloud Infiniteの基本画像処理機能では、パイプラインオペレーター "|"を使用して、1回のリクエストで複数回の処理を行うことができ、なおかつ処理料金とトラフィック料金は1回分として計算されます。この方式ではリクエストの繰り返しによる遅延と追加料金を大幅に減らすことができます。

操作手順

1. 画像ウォーターマークのAPIドキュメントを参照し、画像ウォーターマークのパラメータを定義します。 APIパラメータに不慣れな場合は、スタイル管理のドキュメントを参照し、コンソールでスタイルを追加してパラメータを生成することができます。
watermark/1/image/aHR0cDovL2V4YW1wbGVzLTEyNTgxMjU2MzguY29zLmFwLWd1YW5nemhvdS5teXFjbG91ZC5jb20vbG9nby5wbmc/dissolve/60/dx/10/dy/50/gravity/southeast
説明：
ここのコードaHR0cDovL2V4YW1wbGVzLTEyNTgxMjU2MzguY29zLmFwLWd1YW5nemhvdS5teXFjbG91ZC5jb20vbG9nby5wbmcは、ウォーターマーク画像リンク（COS bucket上に保存されている画像のリンク）にURLセーフなBase64エンコードを経て生成されたものです。
2. テキストウォーターマークのAPIドキュメントを参照し、テキストウォーターマークのパラメータを定義します。 APIパラメータに不慣れな場合は、スタイル管理を参照し、コンソールでスタイルを追加してパラメータを生成することができます。
watermark/2/text/VUlOOiAxMjM0NTY3OA/font/SGVsdmV0aWNhLmRmb250/fontsize/36/fill/IzAwMDAwMA/dissolve/50/gravity/southeast/dx/10/dy/10
説明：
ここのコードVUlOOiAxMjM0NTY3OAはテキスト情報UIN: 12345678にURLセーフなBase64エンコードを行って生成されたものです。
3. パイプラインオペレーターを使用して画像ウォーターマークとテキストウォーターマークの2つの部分のパラメータをスプライシングします。
watermark/2/text/VUlOOiAxMjM0NTY3OA/font/SGVsdmV0aWNhLmRmb250/fontsize/36/fill/IzAwMDAwMA/dissolve/50/gravity/southeast/dx/10/dy/10|watermark/1/image/aHR0cDovL2V4YW1wbGVzLTEyNTgxMjU2MzguY29zLmFwLWd1YW5nemhvdS5teXFjbG91ZC5jb20vbG9nby5wbmc/gravity/southeast/dx/10/dy/50/dissolve/60
4. スプライシングしたパラメータを画像のダウンロードリンクの後ろにつなげます。
https://examples-1258125638.cos.ap-guangzhou.myqcloud.com/preview.png?watermark/2/text/VUlOOiAxMjM0NTY3OA/font/SGVsdmV0aWNhLmRmb250/fontsize/36/fill/IzAwMDAwMA/dissolve/50/gravity/southeast/dx/10/dy/10|watermark/1/image/aHR0cDovL2V4YW1wbGVzLTEyNTgxMjU2MzguY29zLmFwLWd1YW5nemhvdS5teXFjbG91ZC5jb20vbG9nby5wbmc/gravity/southeast/dx/10/dy/50/dissolve/60
これで混合ウォーターマークの画像が得られます。
URLの長さを短縮するには、スタイル管理のドキュメントを参照し、コンソールで画像ウォーターマーク（変更なし）の部分をスタイルwatermark1として追加します。
こうすることで、リンクは次のように短縮されます。
https://examples-1258125638.cos.ap-guangzhou.myqcloud.com/preview.png/watermark1?watermark/2/text/VUlOOiAxMjM0NTY3OA/font/SGVsdmV0aWNhLmRmb250/fontsize/36/fill/IzAwMDAwMA/dissolve/50/gravity/southeast/dx/10/dy/10
その後テキストの内容を変更したい場合は、リンク内のVUlOOiAxMjM0NTY3OAの部分を更新後のBase64エンコードに変更するだけで実現できます。例えばUIN: 88888888のコードはVUlOOiA4ODg4ODg4OAであり、この場合リンクを次の内容に変更するだけで、テキスト内容の入れ替えが実現できます。
https://examples-1258125638.cos.ap-guangzhou.myqcloud.com/preview.png/watermark1?watermark/2/text/VUlOOiA4ODg4ODg4OA/font/SGVsdmV0aWNhLmRmb250/fontsize/36/fill/IzAwMDAwMA/dissolve/50/gravity/southeast/dx/10/dy/10

方法2：テキストおよび画像ウォーターマークを透明な画像上に印刷し、それを画像ウォーターマークにする

1. 400px * 400pxサイズの透明PNG画像1枚を用意し、 バケットにアップロードします。詳細についてはファイルのアップロードのドキュメントをご参照ください。 例：https://examples-1258125638.cos.ap-guangzhou.myqcloud.com/transparent.png
2. 方法1のステップ1 - ステップ3を参照し、画像ウォーターマークとテキストウォーターマークの2つの部分のパラメータを生成し、スプライシングします。
3. スプライシングしたパラメータを透明PNG画像のダウンロードリンクの後ろにつなげます。
https://examples-1258125638.cos.ap-guangzhou.myqcloud.com/transparent.png?watermark/2/text/VUlOOiAxMjM0NTY/font/SGVsdmV0aWNhLmRmb250/fontsize/48/fill/IzAwMDAwMA/dissolve/60/gravity/south/dx/0/dy/60|watermark/1/image/aHR0cDovL2V4YW1wbGVzLTEyNTgxMjU2MzguY29zLmFwLWd1YW5nemhvdS5teXFjbG91ZC5jb20vbG9nby5wbmc/gravity/center/dx/0/dy/0/dissolve/71
4. この透明画像をウォーターマーク画像とし、オリジナル画像に対してウォーターマーク付与操作を行えば完了です。
https://examples-1258125638.cos.ap-guangzhou.myqcloud.com/preview.png?watermark/1/image/aHR0cDovL2V0ZXJuYXV4LTEzMDE0NTM1NTAuY29zLmFwLWd1YW5nemhvdS5teXFjbG91ZC5jb20vdHJhbnNwYXJlbnQucG5nP3dhdGVybWFyay8yL3RleHQvVlVsT09pQXhNak0wTlRZL2ZvbnQvU0dWc2RtVjBhV05oTG1SbWIyNTAvZm9udHNpemUvNDgvZmlsbC9JekF3TURBd01BL2Rpc3NvbHZlLzYwL2dyYXZpdHkvc291dGgvZHgvMC9keS82MHx3YXRlcm1hcmsvMS9pbWFnZS9hSFIwY0RvdkwyVjBaWEp1WVhWNExURXpNREUwTlRNMU5UQXVZMjl6TG1Gd0xXZDFZVzVuZW1odmRTNXRlWEZqYkc5MVpDNWpiMjB2Ykc5bmJ5NXdibWMvZ3Jhdml0eS9jZW50ZXIvZHgvMC9keS8wL2Rpc3NvbHZlLzcx/gravity/southeast/dx/0/dy/0/dissolve/90
また、scatypeパラメータによって、ウォーターマーク画像のサイズを画像の大きさに基づいて同じ比率でズームし、batchパラメータによってタイリングを設定することもできます。
https://examples-1258125638.cos.ap-guangzhou.myqcloud.com/preview.png?watermark/1/image/aHR0cDovL2V0ZXJuYXV4LTEzMDE0NTM1NTAuY29zLmFwLWd1YW5nemhvdS5teXFjbG91ZC5jb20vdHJhbnNwYXJlbnQucG5nP3dhdGVybWFyay8yL3RleHQvVlVsT09pQXhNak0wTlRZL2ZvbnQvU0dWc2RtVjBhV05oTG1SbWIyNTAvZm9udHNpemUvNDgvZmlsbC9JekF3TURBd01BL2Rpc3NvbHZlLzYwL2dyYXZpdHkvc291dGgvZHgvMC9keS82MHx3YXRlcm1hcmsvMS9pbWFnZS9hSFIwY0RvdkwyVjBaWEp1WVhWNExURXpNREUwTlRNMU5UQXVZMjl6TG1Gd0xXZDFZVzVuZW1odmRTNXRlWEZqYkc5MVpDNWpiMjB2Ykc5bmJ5NXdibWMvZ3Jhdml0eS9jZW50ZXIvZHgvMC9keS8wL2Rpc3NvbHZlLzcx/scatype/3/spcent/30/gravity/southeast/dx/0/dy/0/dissolve/90/batch/1/degree/45

前の記事へ: カスタム CDN ドメイン名が Gzip 圧縮に対応するように設定する次の記事へ: COSオーディオビデオプレーヤーの概要

ヘルプとサポート

この記事はお役に立ちましたか？

フィードバック