dom-to-imageをAAに対応させた話 #JavaScript

こんにちは@scrpgilです。

本記事は、アスキーアート総合アドベントカレンダーの1日目の記事になります。
この記事では、HTMLを画像化できるライブラリdom-to-imageをAAに対応させたので、その紹介です。

クライアント側で処理が完結するので、サーバーもいらないし、余計な通信もないので高速です。❤️とかのHTML特殊文字にも対応してますし。

*この記事で扱うアスキーアートは、モナー系のアスキーアートです。shift-jis artとも呼ばれるらしいです。

dom-to-imageとは

HTMLを画像化するライブラリです。仕組みは単純で、HTMLを一度SVGに変換→その後Canvasに描画して画像(jpeg、png)に変換できるライブラリです。

シンプルだし、多くのブラウザで動きますがiPhoneのSafariでimgタグを描画しようとすると、クロスオリジンに引っかかることもあるので、注意しましょう。

GitHub: https://github.com/tsayen/dom-to-image

dom-to-image-more-sjis-artとは

ざっくり、dom-to-imageをフォークしたdom-to-image-moreをフォークしてaahub_lightフォントを埋め込んだものです。dom-to-imageとの差分は以下。

AngularのAOTコンパイルで落ちない
aahub_lightフォントが埋め込んである。

GitHub: https://github.com/asciiartdevelopers/dom-to-image-more-sjis-art

フォント埋め込んであるあたり、極めて雑な変更ですが、動くのでまあ良いでしょう。

使い方

まず、次のスクリプトをheaderで読み込みましょう。

<script src='https://unpkg.com/dom-to-image-more-sjis-art@2.8.2/src/dom-to-image-more.js'></script>

画像化したいアスキーアートを描画します。

<div class="mona" id="mona">
　 ∧＿∧
　（　´∀｀） 　
　（　　　　）
　｜ ｜　|
　（_＿）＿）
</div>

次にCSSを実装します。このライブラリはaahubフォントした対応していないため、font-familyはaahubで記述を...。

.mona {
  font-family: "aahub";
  white-space: pre-wrap;
  font-size:16px;
  line-height: 17px
}

最後に、スクリプトを実行します。

var node = document.getElementById('mona');

domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

そうすると、次の画像のようにAAが画像化されます。

サンプルをcodepenで公開してます。
https://codepen.io/scrpgil/pen/YzPKJXZ

このライブラリは、npmで公開しているので、npm installで導入することもできます.

npm install dom-to-image-more-sjis-art

importする時は、次のように記述します。

import domtoimage from "dom-to-image-more-sjis-art";

このライブラリ自体は、aahubで利用しているので、興味ある人は見に来てください。
各種AA長押しからの画像化、またはエディタの画像化機能で利用しています。

aahub - スマホ対応AAビューワーサイト

まとめ

昨今、AAをTwitterに投下したりと画像化する機会は増えてます。
サーバ側で画像化するのもありですが、負荷分散を考えるとクライアント側でできるなら、その方がよいですよね。
クライアント側だとHTML特殊文字への対応も楽ちんですしね。

HTML特殊文字の例：https://codepen.io/scrpgil/pen/NWPKObO

それでは。

その他の画像化方法

過去のアスキーアートを画像化する方法の記事です。
AAを画像に変換する(Python編)
GolangでMLTを画像に変換する
 ズレずにAAを表示するためにテキストを画像にするライブラリ色々