こんにちは@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長押しからの画像化、またはエディタの画像化機能で利用しています。
まとめ
昨今、AAをTwitterに投下したりと画像化する機会は増えてます。
サーバ側で画像化するのもありですが、負荷分散を考えるとクライアント側でできるなら、その方がよいですよね。
クライアント側だとHTML特殊文字への対応も楽ちんですしね。
HTML特殊文字の例：https://codepen.io/scrpgil/pen/NWPKObO
それでは。
その他の画像化方法
過去のアスキーアートを画像化する方法の記事です。
AAを画像に変換する(Python編)
GolangでMLTを画像に変換する
ズレずにAAを表示するためにテキストを画像にするライブラリ色々