記事にバナーを迅速に追加するための便利なツールを作成します。

背景#

今日はいくつかのウェブサイトに記事を投稿しようと思いましたが、掘金では記事にバナー画像の提供が必要であり、掘金の記事コレクションを作成する際も画像の提供が必要でした。画像の提供自体は問題ありませんが、サイズがすべて異なり、私はデフォルトで 1:1 の画像しか持っていません。

奇妙なサイズ + 繰り返しの編集作業 + 保存する必要のない使い捨ての画像 + スタイルを統一するための努力 = テンプレート画像生成ツールを作成することにしました。

現時点では、複雑なドラッグアンドドロップ機能やさまざまな素材は必要ありません。シンプルな背景画像 + テキスト + サイズ調整が要件を満たしています。

それでは、手を動かしてシンプルなバージョンを作成し、一部の一般的なコードを蓄積しましょう。

現在の実装結果は以下のようになります。アクセス先はこちら：https://ijust.cc/tools/canvas

制作のアイデア#

一般的なテンプレートを固定し、テキストを編集可能にする
スタイルには html2canvas（他のソリューションを特に使用）を使用して画像を生成する
スタイルが異なることを避け、背景を変更可能にする

技術選定#

shadcn スタイル#

機能は複雑ではないため、フォームを作成し、スタイルを適用して画像を生成するだけで十分です。タスクの完了に自信があるため、難易度を上げてみましょう。tailwind 関連のコンポーネントライブラリを学習できるかな。

ブログのウェブサイトではすでに tailwindcss + varlet コンポーネントを使用しているため、element-plus /arco-design 関連のコンポーネントを再度導入することは避けたいですが、tailwindcss が提供するコンポーネントは侵入性が少なく、パッケージサイズにはほとんど影響しないと思われます。

メモを見てみると、以前にブックマークに追加した shadcn が目に入りました。現在、shadcn-vue は非常に進歩しており、スタイルがシンプルで、低レベルのラッパーとして radix を使用しているため、良さそうです。将来的には shadcn テンプレートライブラリも立ち上げる予定なので、良い選択肢になるでしょう。

したがって、コンポーネントライブラリとして shadcn-vue を選択し、作業を開始します。

最初は少し違和感がありましたが、しばらく使ってみると慣れました。スタイルは非常にシンプルで、私は gray スタイルを選びましたが、特に問題はありません。

html-to-image 画像生成#

html から画像を生成するために、有名な html2canvas が非常に良いです。https://npmtrends.com/ で検索してみると、https://github.com/bubkoo/html-to-image が良さそうです。頻繁に更新され、モダンなスタイルのドキュメントと明確な API がありますので、使ってみましょう。

動的な色 hsl#

背景色には、少しシンプルな色を好む傾向があります。通常の taiwindcss のカラーだけでは十分ではないため、彩度と明度が同じで、色相の異なるアプローチを試してみました。

これは ps でよく使われるテクニックで、色相をドラッグすることで全体の色を素早く変更できます。

これには HSB カラーモデルが使用されており、同じ位置で色相のみを変更することができます。以下の図を参照してください。

したがって、hsb の後半 2 つの値が必要です。H はスライダーをドラッグするだけで設定できます。

最初の反応は filter、つまりhub-rotateです。

.hue{
  filter: hue-rotate(45deg);
}

実際に書いてみるとうまくいきませんでした。一部の要素（人物のイメージなど）は filter に参加しないため、個別に background と text を変更することはできません。

やはり css を動的に変更することにしましたが、css には hsb ではなく hsl があります。アドバイザーに尋ねてみましょう。

HSB と HSL の違いを教えてください。
HSB（色相、彩度、明度）と HSL（色相、彩度、明度）は、色を表現するための 2 つの一般的なカラーモデルであり、色を表現する方法にはいくつかの違いがあります。バラバラ

2 つのモデルの変換方法は？

// HSBからHSLへの変換
function hsbToHsl(h, s, b) {
  let l = (2 - s) * b / 2;
  s = s * b / (l < 0.5 ? l * 2 : 2 - l * 2);
  return [h, s, l];
}

// HSLからHSBへの変換
function hslToHsb(h, s, l) {
  let v = l + s * (l < 0.5 ? l : 1 - l);
  s = 2 * s / (v + l);
  return [h, s, v];
}

// 使用例
const hsbColor = [0.5, 0.7, 0.8];
const hslColor = hsbToHsl(...hsbColor);
console.log(hslColor); // [0.5, 0.4666666666666667, 0.65]

const convertedHsbColor = hslToHsb(...hslColor);
console.log(convertedHsbColor); // [0.5, 0.7, 0.8]

function hslToRgb(h: number, s: number, l: number) {
  // 色相値を0から1の小数に変換する
  h = h / 360;

  // 彩度と明度の値はパーセントであり、0から1の小数に変換する
  s = s / 100;
  l = l / 100;

  let r, g, b;

  if (s === 0) {
    // 彩度が0の場合、色はグレースケールです
    r = g = b = l;
  } else {
    const hue2rgb = (p, q, t) => {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1 / 6) return p + (q - p) * 6 * t;
      if (t < 1 / 2) return q;
      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
      return p;
    };

    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;

    r = hue2rgb(p, q, h + 1 / 3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1 / 3);
  }

  // RGB値を整数に変換し、値を0から255の範囲に制限する
  r = Math.round(r * 255);
  g = Math.round(g * 255);
  b = Math.round(b * 255);

  // return { r, g, b };
  return `rgb(${r},${g},${b})`;
}

わかりました、既存のメソッドがあります。試してみるとうまくいきましたし、ツールライブラリを使って新しいことを学びました。

操作の結果、css で h 色相を動的に変更することができました。

<div :style='{
background: 'hsl(' + config.hue[0] + ',48.1%,48.6%)',
}'>動的背景<div>

実際に chrome で実行すると、まだ rgb ですが、使いやすくなりました。スライダーをドラッグすると色が変わります。

色を変更する際に、will-change と transition を追加して快適にしました。

追加：後で 45 度の傾斜した線形グラデーションを追加しました。色相の色を A とし、対応する色に少し追加して、+50 で色 B を得ます。実際の効果もかなり良いです。

追加：後で低次元の背景画像を追加しましたが、とても素敵です。使用したのは以下のものです。

効果#

展望#

将来的には、独立したサービスとして使用できるように、画像のカスタマイズなどを試してみることができます。