[html+js]canvasを使って文字の選択・検索対策

応急処置的な。

どういうことか
こんな感じ

どういうことか

コピペ対策とかでメールアドレスとかを画像にして貼り付けることがある。

画像を作るのめんどくさいからどうにかならんかという話。

canvasとjavascriptでやる。

こんな感じ

<canvas id="secretText" width="600" height="50"></canvas>

<script>
    const text = "非表示にしたい文字列ABC123漢字など"; // 23文字（全半角混在）
    const canvas = document.getElementById("secretText");
    const ctx = canvas.getContext("2d");

    // フォントサイズや種類を指定
    ctx.font = "20px sans-serif";
    ctx.fillStyle = "#000"; // 黒文字
    ctx.textBaseline = "top";

    // テキストを描画
    ctx.fillText(text, 10, 10);
</script>

画像サイズはcanvasで指定して、その中に何をどんな感じで配置するかというのをjsでやっている。

最後の方にあるfillText()の中で文字列の表示位置を指定しているので、微調整はそこで。
textBaselineは大味だった。

↓こうなる