文字列のAAを自動生成 デモ + サンプルコード JavaScript

文字列のAAを自動生成 デモ + サンプルコード JavaScript

2019-01-0313 min read

目次

  1. 概要
  2. サンプル画像
  3. デモ
  4. デモ解説

概要

文字列から文字列のAA(アスキーアート)を自動生成するデモを紹介します。

サンプル画像

普通のアルファベット平仮名漢字を変換してみました。

↓実際の文字列↓ (端末・ブラウザなど、環境によっては正しく表示されません)

                                                                          0000
                                                                          0000                                  000000000000000000000000000000000000000000
                                                                          0000                                  0000      0000000000000000000000  00000000
                                                                          0000        0000000000                00        0000                      00
                                    0000                        00000000000000000000000000000000                00      0000                        00
                                    0000                        0000000000000000                                00      0000                        00
                                  00000000                                0000          0000                    00    0000      00000000000000      00
                                  00000000                                00            0000                    00    0000      0000      0000      00
                                  00000000                                0000  000000000000                    00  000000      0000        00      00
    0000000000                  0000  000000                            000000000000000000000000                00    0000      0000        00      00
  0000    000000                00    000000                        0000000000      000000  000000              00      0000    0000        00      00
0000        0000              0000      000000                    0000000000        0000      000000            00      0000    0000        00      00
0000        0000              00        000000                  000000    00      000000        0000            00        0000  0000        00      00
          000000            0000          0000                  0000      00      0000          0000            00        0000  0000      0000      00
      0000000000            00000000000000000000              0000        0000  0000              00            00        0000  00000000000000      00
  0000      0000            00            000000              0000        0000000000            0000            00        0000  0000                00
0000        0000          0000              000000            0000        00000000              0000            00000000000000  0000                00
0000        0000          00                000000            0000        000000              000000            00    0000                          00
0000        0000        0000                  000000          000000    000000              000000              00                                  00
00000000000000000000    0000                  000000            000000000000            00000000                00                                  00
  00000000  000000  0000000000            00000000000000          000000          000000000000                  00                          0000000000
                                                                                  000000                        00                          0000000000
                                                                                                                00                                           

顔文字を変換するとこんな感じになります。

絵文字もAA化できました。

デモ

外部リンクで開く

デモ解説

ソース

HTML

<div class="markdown-body">
    <canvas id="canvas" width="200" height=30>
	図形を表示するには、canvasタグをサポートしたブラウザが必要です。
	</canvas>
    <input type="text" id="text">
    <input type="button" id=main value="RUN">
    <pre id="result">
    </pre>
</div>

JavaScript

function main() {
    var canvas = document.getElementById('canvas');
    if (!canvas.getContext) {
        return;
    }
    var context = canvas.getContext('2d');
    var text = document.getElementById("text").value;

    var charSize = 25;
    canvas.width = charSize * text.length;
    canvas.height = charSize + 2;
    context.font = "25px 'Times New Roman'";
    initCanvas();
    context.fillText(text, 0, 25);
    canvas2aa();
}

function initCanvas() {
    var canvas = document.getElementById('canvas');
    if (!canvas.getContext) {
        return -1
    }
    var context = canvas.getContext('2d');

    var dst = context.createImageData(canvas.width, canvas.height);

    for (var i = 0; i < dst.data.length; i++) {
        dst.data[i] = 255;
    }
    context.putImageData(dst, 0, 0);
}

function canvas2aa() {
    document.getElementById("result").innerHTML = ""
    var canvas = document.getElementById('canvas');
    if (!canvas.getContext) {
        return -1;
    }

    var context = canvas.getContext('2d');
    var src = context.getImageData(0, 0, canvas.width, canvas.height);
    var dst = context.createImageData(canvas.width, canvas.height);

    for (var i = 0; i < src.data.length; i = i + 4) {
        var x = (src.data[i] + src.data[i + 1] + src.data[i + 2]) / 3;
        dst.data[i] = x;
        dst.data[i + 1] = x;
        dst.data[i + 2] = x;
        dst.data[i + 3] = src.data[i + 3];

        var text = ""
        if (x <= 127) {
            text = "00";
        } else {
            text = "  ";
        }

        if (i / 4 % canvas.width === 0) {
            text = "\n";
        }
        document.getElementById("result").innerHTML += text
    }
    context.putImageData(dst, 0, 0);
}

document.getElementById("main").onclick = function() {
    main();
};

解説

任意の文字列をcanvasに描画した後、canvasのピクセルデータ(imageData)を走査します。

この時、2値化の処理と同じように、閾値より低いものは文字を描画、そうでなければ描画しない(実際にはスペースを描画)しています。

Recommends
JavaScriptで画像のヒストグラムの正規化
2019-06-10
html5
javascript
canvas
画像のヒストグラムを表示する Chart.js JavaScript canvas
2019-05-26
html5
javascript
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
画像のプーリング処理 canvas + JavaScript
2019-05-19
html5
javascript
%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92
画像にモザイクをかける JavaScript canvas デモあり
2019-01-24
html5
javascript
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
文字列のAAを自動生成 デモ + サンプルコード JavaScript
2019-01-03
html5
javascript
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
JavaScript + canvasで砂嵐を描画する サンプルコード
2018-12-12
html5
javascript
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
Firebase + Nuxt で認証付きページを作るときに参考にしたいところ
2020-03-23
html5
javascript
vue.js
MonacoEditor + Vue を使ってエディタを実装
2019-06-23
html5
javascript
monaco%20editor
async awaitで画像を読み込み canvasに描画 JavaScript
2019-06-23
html5
javascript
canvas
OpenCV.jsを動かしてみる + デモ
2019-06-22
javascript
%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
JSで画像をまとめて読み込む(プリロードする)
2019-05-06
html5
javascript
画像の減色処理 サンプルコードとデモ JavaScript + canvas
2019-04-10
javascript
canvas
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
画像のHSV変換 JavaScript + canvas
2019-04-08
javascript
canvas
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
大津の二値化で画像を2値化 JavaScript + canvas 【画像処理】
2019-04-07
javascript
canvas
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
画像を2値化する JavaScript + canvas 【画像処理】
2019-04-07
javascript
canvas
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
New Posts
[JS]Intl.DateTimeFormatで和暦と西暦を変換
2022-08-18
javascript
[NestJS]少し大きな規模のRESTfull APIを構築するディレクトリ構成を考えて...
2022-09-04
nestjs
typescript
%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3
Prisma MySQL でUTC以外の任意のタイムゾーンを利用するのが難しい件
2022-08-08
prisma
typescript
mysql
Prisma TypeScript MySQLなプロジェクトの構築
2022-08-08
prisma
typescript
mysql
Prisma TypeScript SQLiteなプロジェクトの構築
2022-08-06
prisma
typescript
sqlite
[AWS]Lambda vs Fargate. APIを実装する場合に思うこと
2022-07-30
amazon%20aws
amazon%20ecs
%E9%9B%91%E8%AB%87
macOSにzigをインストールしてHello World!する
2022-07-18
zig
mac
[AWS CDK] Cognito の OIDC プロバイダに Auth0 を設定
2022-07-03
auth0
amazon%20aws
aws%20cdk
Amazon S3 でライフサイクルポリシーを設定する
2022-06-19
amazon%20aws
amazon%20s3
AWS Certified Developer Associate に合格した
2022-06-19
amazon%20aws
%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93
Fisher-Yates shuffleで配列シャッフル [js/ts/php]
2022-06-19
javascript
node.js
typescript
JavaScriptでUTF-16コードを文字列に変換
2022-06-18
javascript
node.js
[JS]乱数でランダムな整数を生成する
2022-06-18
javascript
node.js
[JS]BigIntでMathが使えない件
2022-06-12
javascript
node.js
atcoder
AWS SAPに合格しました
2022-06-11
amazon%20aws
%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93
Hot posts!
Proxy環境下でcurlを実行する
2019-12-07
linux
curl
OpenCVのMatのタイプ一覧表
2018-11-25
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
opencv
Macでも利用できるDBクライアント MySQL PostgreSQL Oracle など
2019-12-21
linux
%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9
mysql
TablePlusを使ってみる。シンプルでモダンなSQLクライアントツール
2018-09-30
%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9
DBクライアントツールはDBeaverをおすすめしたい
2021-03-08
oracle
mysql
sqlite
AWS S3のアクセスキーIDとシークレットアクセスキーの取得 作業用ユーザを作成
2019-06-12
amazon%20aws
linux
amazon%20s3
AtCoderで初めて色がつくまでの話(茶色) レートが中々上がらなかった原因
2018-11-25
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0
%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0
%E9%9B%91%E8%AB%87
CentOS8でEPELとPowerToolsリポジトリの有効化
2020-11-30
centos
red%20hat
EPEL
Macでターミナルからポートスキャンを行う方法。
2018-12-09
linux
mac
apple
Python + OpenCVのfillConvexPolyで複雑なポリゴンを描画する
2018-11-27
python
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
opencv
Date
▶︎
2022 年 (39)
▶︎
2021 年 (40)
▶︎
2020 年 (30)
▶︎
2019 年 (90)
▶︎
2018 年 (89)
▶︎
2017 年 (1)
Tags
javascript(98)
amazon%20aws(47)
linux(47)
node.js(38)
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0(36)
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86(30)
html5(29)
typescript(28)
php(24)
centos(24)
python(22)
%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0(21)
mysql(19)
mac(19)
canvas(18)
opencv(17)
%E9%9B%91%E8%AB%87(16)
wordpress(15)
atcoder(14)
docker(14)
apache(12)
%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92(12)
%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9(12)
amazon%20s3(12)
red%20hat(12)
ubuntu(11)
github(10)
git(10)
vue.js(10)
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF(10)
mariadb(10)
aws%20cdk(9)
css3(8)
%E5%8F%AF%E8%A6%96%E5%8C%96(8)
%E5%B0%8F%E3%83%8D%E3%82%BF(8)
amazon%20lightsail(7)
react(7)
%E3%83%96%E3%83%AD%E3%82%B0(6)
cms(6)
oracle(6)
perl(6)
gitlab(6)
next.js(6)
iam(5)
amazon%20ec2(5)
%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93(5)
aws%20amplify(5)
curl(4)
webassembly(4)
ssh(4)
Author
s-yoshiki
s-yoshiki
githubzenntwitterqiita
ただの備忘録です。
JavaScript/TypeScript/node.js/React/AWS/OpenCV
※このブログの内容は個人の見解であり、所属する組織等の見解ではありません。