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

背景#

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

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

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

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

現在の実装結果は次のようになります。

制作の考え方#

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

技術選択#

shadcn スタイル#

機能は複雑ではないため、フォームを作成し、スタイルを追加して画像を生成するだけで十分です。タスクを完了する自信があるため、困難な i+1 を試して、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 カラーモデルが使用されており、同じ位置で色相のみを変更できます。以下の図を参照してください。

そこで、hue-rotateというフィルターを最初に試しました。

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

実際にはうまくいきませんでした。人物のような一部の要素がフィルターに参加しないため、個別に背景とテキストを変更する必要があります。

それでは、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]

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

いくつかの操作を経て、css で h 色相を動的に変更することができました。

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

実際に実行すると、chrome ではまだ rgb ですが、使い心地が良く、スライダーをドラッグすると色が変わります。

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

効果#

展望#

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