画像に枠線をつけて四コマ漫画風の１枚画像を生成する方法

フォルダを作成し、その中に以下のようなindex.htmlを作成する。

<style>
    <!--
        img{
            width:500px;
            border:5px solid #000;
            margin:20px 40px;

        }
        -->
</style>

<div style="text-align:center;">
    <img src="1.jpg" alt=""><br>
    <img src="2.jpg" alt=""><br>
    <img src="3.jpg" alt=""><br>
    <img src="4.jpg" alt=""><br>
</div>

同じフォルダ内に、４枚の画像を保存する。

chromeを起動し、index.htmlを表示させる。

画面全体をスクリーンショットする。
・Ctrl＋Shift＋I（デべロッパーツールを開く）
・Ctrl＋Shift＋P
・「full」と入力しEnter