文字列の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
[AWS CDK]S3 CloudFront OAI Route53 構成 で NextJ...
2022-05-23
amazon%20aws
aws%20cdk
typescript
[CDK]SNS+SQS+DynamoDBでBounceとComplaint情報を収集する...
2022-04-11
amazon%20aws
node.js
typescript
[AmazonSES] node.js と ejs を利用してEメールを送信する
2022-04-09
javascript
node.js
amazon%20aws
GatsbyからNext.jsへのサイト移行
2022-04-04
next.js
gatsby
amazon%20aws
[AWS CDK] Lambda で S3 オブジェクトを読み書きするStackの構築
2022-03-18
aws%20cdk
amazon%20aws
typescript
[AWS CDK] S3 + CloudFrontの構築とOriginAccessIden...
2022-03-09
amazon%20aws
aws%20cdk
typescript
[AWS CDK] Bastion(踏み台)構築。SSMとEC2InstanceConne...
2022-03-06
amazon%20aws
aws%20cdk
node.js
[AWS CDK] Cognito を構築
2022-03-04
amazon%20aws
aws%20cdk
node.js
AWS CDK v2 でVPC上にAPI Gateway + Lambda + RDS +...
2022-02-28
amazon%20aws
aws%20cdk
node.js
javascriptで累積和を解く
2022-02-27
%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%A0%E3%83%9F%E3%83%B3%E3%82%B0
atcoder
AWS Amplify で monorepo を導入し 単一リポジトリで複数プロジェクトを...
2022-02-25
git
github
amazon%20aws
AWS CDK v2 で Lambda関数のデプロイ
2022-02-23
typescript
amazon%20aws
aws%20cdk
NextJSでDevToysのようなものを作成した
2022-02-22
javascript
typescript
vercel
JSで動的計画法を利用して部分和問題を解く
2022-02-20
javascript
typescript
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0
NestJSアプリケーションをwebpackでBundle
2022-02-20
javascript
typescript
nestjs
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 年 (22)
▶︎
2021 年 (40)
▶︎
2020 年 (30)
▶︎
2019 年 (90)
▶︎
2018 年 (89)
▶︎
2017 年 (1)
Tags
javascript(92)
linux(47)
amazon%20aws(40)
%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)
node.js(30)
html5(29)
centos(24)
php(23)
python(22)
typescript(21)
%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(20)
canvas(18)
mac(18)
opencv(17)
mysql(17)
%E9%9B%91%E8%AB%87(15)
wordpress(15)
docker(14)
atcoder(13)
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)
red%20hat(12)
ubuntu(11)
amazon%20s3(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)
css3(8)
%E5%8F%AF%E8%A6%96%E5%8C%96(8)
%E5%B0%8F%E3%83%8D%E3%82%BF(8)
mariadb(8)
amazon%20lightsail(7)
react(7)
aws%20cdk(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)
aws%20amplify(5)
curl(4)
webassembly(4)
ssh(4)
homebrew(4)
Author
s-yoshiki
s-yoshiki
githubzenntwitterqiita
ただの備忘録です。
JavaScript/TypeScript/node.js/React/AWS/OpenCV
※このブログの内容は個人の見解であり、所属する組織等の見解ではありません。