4
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

こんにちは@scrpgilです。

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

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

*この記事で扱うアスキーアートは、モナー系のアスキーアートです。shift-jis artとも呼ばれるらしいです。
https___qiita-image-store.s3.amazonaws.com_0_165335_a1c2879c-48f6-4b14-ffd0-ee923b3ac544.jpeg

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が画像化されます。
Screen Shot 2019-12-01 at 14.16.13.png

サンプルを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を表示するためにテキストを画像にするライブラリ色々

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
4
Help us understand the problem. What are the problem?