コンテンツにスキップ

オーバーレイとウォーターマークの描画

リサイズされた画像の上に追加の画像を透明度やブレンド効果を使って描画できます。これにより、リサイズされた画像にウォーターマーク、ロゴ、署名、ビネット、その他の効果を追加できます。

この機能は、Workersでのみ利用可能です。オーバーレイ画像を描画するには、fetch()リクエストのオプションに描画コマンドの配列を追加します。描画オプションはoptions.cf.image.drawにネストされており、以下の例のようになります。

fetch(imageURL, {
  cf: {
    image: {
      width: 800,
      height: 600,
      draw: [
        {
          url: 'https://example.com/branding/logo.png', // この画像を描画
          bottom: 5, // 下端から5ピクセル
          right: 5, // 右端から5ピクセル
          fit: 'contain', // 100x50の領域に収める
          width: 100,
          height: 50,
          opacity: 0.8, // 20%透明
        },
      ],
    },
  },
});

描画オプション

drawプロパティは配列です。オーバーレイは配列に表示される順序で描画されます（最後の配列エントリが最上層になります）。draw配列の各アイテムはオブジェクトで、以下のプロパティを持つことができます：

  • url

    • 描画に使用する画像ファイルの絶対URL。サポートされているファイル形式のいずれかである必要があります。ウォーターマークや非矩形オーバーレイを描画する場合、CloudflareはPNGまたはWebP画像の使用を推奨しています。

  • widthとheight

    • オーバーレイ画像の最大サイズ（ピクセル単位）。整数である必要があります。

  • fitとgravity

  • opacity

    • 0（透明）から1（不透明）の間の浮動小数点数。例えば、opacity: 0.5はオーバーレイを半透明にします。

  • repeat

    • trueに設定すると、オーバーレイ画像が全体を覆うようにタイル状に配置されます。これはストックフォトのようなウォーターマークに便利です。
    • "x"に設定すると、オーバーレイ画像が水平方向にのみタイル状に配置されます（線を形成）。
    • "y"に設定すると、オーバーレイ画像が垂直方向にのみタイル状に配置されます（線を形成）。

  • top, left, bottom, right

    • 指定されたエッジに対するオーバーレイ画像の位置。各プロパティはピクセル単位のオフセットです。0はエッジに正確に揃えます。例えば、left: 10はオーバーレイの左側を画像の左端から10ピクセルの位置に配置します。bottom: 0はオーバーレイの下部を背景画像の下部に揃えます。

      leftとrightの両方、またはtopとbottomの両方を設定することはエラーです。

      位置が指定されていない場合、画像は中央に配置されます。

  • background

  • rotate

例

ストックフォトウォーターマーク

image: {
  draw: [
    {
      url: 'https://example.com/watermark.png',
      repeat: true, // 画像全体にタイル状に配置
      opacity: 0.2, // そして微妙にブレンド
    },
  ];
}

署名

image: {
  draw: [
    {
      url: 'https://example.com/by-me.png', // 事前定義されたロゴ/署名
      bottom: 5, // 右下隅付近に配置
      right: 5,
    },
  ];
}

中央に配置されたアイコン

image: {
  draw: [
    {
      url: 'https://example.com/play-button.png',
      // 中央位置はデフォルト
    },
  ];
}

組み合わせ

複数の操作を1つの画像に組み合わせることができます：

image: {
  draw: [
    { url: 'https://example.com/watermark.png', repeat: true, opacity: 0.2 },
    { url: 'https://example.com/play-button.png' },
    { url: 'https://example.com/by-me.png', bottom: 5, right: 5 },
  ];
}
Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings