帳票作成ツールで、テスト用の社印データが欲しくなり、ChatGPT に作ってもらった。
概要

こんな感じで、文字入力した名前で、png データを作成します。
縦横、文字の大きさ・フォント等の調整機能で適当な文字から生成できます。
htmlファイルをブラウザーで表示するだけで、動作します。
ちょっとしたツールは、すぐにどこに置いたか忘れてしまうので、メモしておきます。
※BASE64化機能追加
テスト用社印の作成例

楕円
角丸
ツールのコード

.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社印 HTML & PNG 変換</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Yuji+Syuku&family=Kosugi+Maru&display=swap');

        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin: 20px;
        }
        .controls {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 8px;
            width: 350px;
            align-items: center;
        }
        label {
            font-size: 16px;
            text-align: left;
        }
        input, select {
            width: 100%;
            padding: 5px;
            font-size: 16px;
            border: 1px solid #ccc;
        }
        .preview-container {
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 10px;
        }
        /* 社印のデザイン */
        .seal {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 5px solid red;
            color: red;
            font-weight: bold;
            text-align: center;
            background: transparent;
            padding: 10px;
        }
        .seal span {
            display: block;
            word-break: break-word;
        }
        .base64-output {
            word-break: break-all;
            font-size: 12px;
            max-width: 90%;
            overflow-wrap: break-word;
            background: #f8f8f8;
            padding: 10px;
            border: 1px solid #ddd;
            cursor: pointer;
            user-select: all;
        }
    </style>
</head>
<body>

    <h2>社印設定</h2>
    
    <div class="controls">
        <label for="companyName">会社名</label>
        <input type="text" id="companyName" placeholder="会社名を入力" oninput="updateSeal()">

        <label for="widthInput">横幅 (px)</label>
        <input type="number" id="widthInput" value="250" oninput="updateSeal()"> 

        <label for="heightInput">縦幅 (px)</label>
        <input type="number" id="heightInput" value="150" oninput="updateSeal()"> 

        <label for="borderWidthInput">枠の厚さ (px)</label>
        <input type="number" id="borderWidthInput" value="5" oninput="updateSeal()"> 

        <label for="fontSizeInput">文字サイズ (px)</label>
        <input type="number" id="fontSizeInput" value="34" oninput="updateSeal()"> 

        <label for="paddingInput">余白 (px)</label>
        <input type="number" id="paddingInput" value="10" oninput="updateSeal()"> 

        <label for="fontFamilyInput">フォント</label>
        <select id="fontFamilyInput" onchange="updateSeal()">
            <option value="'Noto Sans JP', sans-serif">Noto Sans JP</option>
            <option value="'Yuji Syuku', serif">Yuji Syuku</option>
            <option value="'Kosugi Maru', sans-serif">Kosugi Maru</option>
            <option value="'MS Gothic', sans-serif">MSゴシック</option>
            <option value="Arial, sans-serif">Arial</option>
        </select>

        <label for="shapeInput">形状</label>
        <select id="shapeInput" onchange="updateSeal()">
            <option value="square">角丸四角</option>
            <option value="ellipse">楕円</option>
        </select>

        <label for="bgColorInput">背景透過</label>
        <select id="bgColorInput" onchange="updateSeal()">
            <option value="transparent" selected>透過</option>
            <option value="white">白</option>
        </select>
    </div>

    <h3>プレビュー</h3>
    <div class="preview-container">
        <div id="seal" class="seal"></div>
    </div>

    <button onclick="convertToPng()">PNG に変換してダウンロード</button>

    <h3>Base64 形式（クリックでコピー）</h3>
    <div id="base64Output" class="base64-output" onclick="copyBase64()">ここにBase64データが表示されます</div>

    <script>
        function updateSeal() {
            const companyName = document.getElementById("companyName").value.trim();
            const seal = document.getElementById("seal");
            const width = document.getElementById("widthInput").value;
            const height = document.getElementById("heightInput").value;
            const borderWidth = document.getElementById("borderWidthInput").value;
            let fontSize = document.getElementById("fontSizeInput").value;
            const padding = document.getElementById("paddingInput").value;
            const fontFamily = document.getElementById("fontFamilyInput").value;
            const shape = document.getElementById("shapeInput").value;
            const bgColor = document.getElementById("bgColorInput").value;

            // Seal スタイル更新
            seal.style.width = width + "px";
            seal.style.height = height + "px";
            seal.style.borderWidth = borderWidth + "px";
            seal.style.padding = padding + "px";
            seal.style.backgroundColor = bgColor;
            seal.style.fontFamily = fontFamily;
            seal.style.borderRadius = shape === "square" ? (borderWidth * 4) + "px" : "50%";

            seal.innerHTML = "";
            if (companyName === "") return;

            let lines = companyName.split(/\s+/).slice(0, 5);
            const autoFontSize = Math.min(fontSize, (height - padding * 2) / lines.length * 0.8);

            lines.forEach(text => {
                let span = document.createElement("span");
                span.style.fontSize = autoFontSize + "px";
                span.textContent = text;
                seal.appendChild(span);
            });

            convertToBase64();
        }

        function convertToPng() {
            convertToBase64(true);
        }

        function convertToBase64(download = false) {
            const sealElement = document.getElementById("seal");
            const isTransparent = document.getElementById("bgColorInput").value === "transparent";

            html2canvas(sealElement, { backgroundColor: isTransparent ? null : "white" }).then(canvas => {
                const pngUrl = canvas.toDataURL("image/png");
                document.getElementById("base64Output").textContent = pngUrl;

                if (download) {
                    const downloadLink = document.createElement("a");
                    downloadLink.href = pngUrl;
                    downloadLink.download = "company-seal.png";
                    document.body.appendChild(downloadLink);
                    downloadLink.click();
                    document.body.removeChild(downloadLink);
                }
            });
        }

        function copyBase64() {
            navigator.clipboard.writeText(document.getElementById("base64Output").textContent);
            alert("Base64がクリップボードにコピーされました！");
        }

        updateSeal();
    </script>

</body>
</html>