割烹エディター　紹介カードを作ってみる

こんにちは。

今回は小説の紹介文やレビューを画像化させるためのツールを作ってみたいと思います。

基本方針

• 出力は1ページ。スマホで見た時に画面に収まるようにしたい。

• 最大400文字くらい、改行ありで余裕をもって入れられるようにしたい。

• 使用用途は小説書き出し、またはレビュー用。

• フォントを選択できるようにする。

• 文字色や背景色を変えられるようにする。

パラメータ

• レイアウト　縦とか横とか

• ヘッダー（文字）

• フッター（文字）

• 本文（文字）

• 文字色（CSS）

• 背景色（CSS）

• フォント（CSS）

実装

HTMLから画像への変換はSVGからキャンバス出力で実現させます。

function saveSvg(selector, fileName){
    const svg = document.querySelector(selector);
    const svgData = new XMLSerializer().serializeToString(svg);
    const canvas = document.createElement("canvas");
    canvas.width = 540 ;// svg.width.baseVal.value;
    canvas.height = 775 ;// svg.height.baseVal.value;

    const ctx = canvas.getContext("2d");
    const image = new Image;
    image.onload = function(){
        ctx.drawImage( image, 0, 0 );
        const a = document.createElement("a");
        a.href = canvas.toDataURL("image/png");
        a.download = fileName+'.png';
        a.click();
    }
    image.src = "data:image/svg+xml;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(svgData)));
}

あるSVGを指定してそれをimageにしてダウンロードしています。

<svg id="wrapper-svg" viewBox="0 0 400 574" style="font-family:sans-serif;width:100%;background: #f9f9f9;line-height: 1.5;font-size: 16px;white-space: pre-wrap;line-break:strict;word-break:break-word;overflow-wrap: break-word;word-wrap:break-word;" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="352" height="24" x="24" y="502" style="overflow: hidden;text-align: center;">
                <div id="output-header-text">走れメロス</div>
    </foreignObject>
        <foreignObject width="352" height="24" x="24" y="526" style="overflow: hidden;text-align: center;">
                <div id="output-footer-text">冒頭より</div>
    </foreignObject>
    <foreignObject width="352" height="452" x="24" y="32" style="overflow: hidden">
        <div id="output-text">※これはサンプルです。

メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。

メロスには政治がわからぬ。

メロスは、村の牧人である。

笛を吹き、羊と遊んで暮して来た。

けれども邪悪に対しては、人一倍に敏感であった。
        </div>
    </foreignObject>
</svg>

SVGでテキストを扱う場合、改行とか色々とややこしいのでforeignObjectを埋め込んでその中にテキストを入れるようにしました。サイズと位置を指定することができるので便利です。

はみ出た部分はhiddenで隠します。

あとはカスタマイズ用の部分を作って変更があればsvgの要素へ反映されるようにします。

今後の課題

• Webフォントの読み込みが画像に反映されない

svgからcanvasに変換するときはインストールされているフォントで表示されるのでWebフォントを使った場合は反映されないです。

• 選べるレイアウトが少ない

文庫メーカーみたいに色々なレイアウトを選べるようにしたいです。サイズも今は固定なので柔軟に対応できるようにしたいですね。

• 背景画像が使えない

今は文字だけなので背景画像も使えるようにしたいです

• 設定が保存できない

カスタマイズしても次に来た時に、初期化されるので自分独自の設定を保存できるようにしたいです。

色々と課題はあるので、少しずつ改善していきたいと思います。

割烹エディター