
文字列のAAを自動生成 デモ + サンプルコード JavaScript
2019-01-0313 min read
目次
概要
文字列から文字列の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
デモ
デモ解説
ソース
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
画像のヒストグラムを表示する Chart.js JavaScript canvas
2019-05-26
画像のプーリング処理 canvas + JavaScript
2019-05-19
画像にモザイクをかける JavaScript canvas デモあり
2019-01-24
文字列のAAを自動生成 デモ + サンプルコード JavaScript
2019-01-03
JavaScript + canvasで砂嵐を描画する サンプルコード
2018-12-12
Firebase + Nuxt で認証付きページを作るときに参考にしたいところ
2020-03-23
MonacoEditor + Vue を使ってエディタを実装
2019-06-23
async awaitで画像を読み込み canvasに描画 JavaScript
2019-06-23
OpenCV.jsを動かしてみる + デモ
2019-06-22
JSで画像をまとめて読み込む(プリロードする)
2019-05-06
画像の減色処理 サンプルコードとデモ JavaScript + canvas
2019-04-10
画像のHSV変換 JavaScript + canvas
2019-04-08
大津の二値化で画像を2値化 JavaScript + canvas 【画像処理】
2019-04-07
画像を2値化する JavaScript + canvas 【画像処理】
2019-04-07
New Posts
[AWS CDK]S3 CloudFront OAI Route53 構成 で NextJ...
2022-05-23
[CDK]SNS+SQS+DynamoDBでBounceとComplaint情報を収集する...
2022-04-11
[AmazonSES] node.js と ejs を利用してEメールを送信する
2022-04-09
GatsbyからNext.jsへのサイト移行
2022-04-04
[AWS CDK] Lambda で S3 オブジェクトを読み書きするStackの構築
2022-03-18
[AWS CDK] S3 + CloudFrontの構築とOriginAccessIden...
2022-03-09
[AWS CDK] Bastion(踏み台)構築。SSMとEC2InstanceConne...
2022-03-06
[AWS CDK] Cognito を構築
2022-03-04
AWS CDK v2 でVPC上にAPI Gateway + Lambda + RDS +...
2022-02-28
javascriptで累積和を解く
2022-02-27
AWS Amplify で monorepo を導入し 単一リポジトリで複数プロジェクトを...
2022-02-25
AWS CDK v2 で Lambda関数のデプロイ
2022-02-23
NextJSでDevToysのようなものを作成した
2022-02-22
JSで動的計画法を利用して部分和問題を解く
2022-02-20
NestJSアプリケーションをwebpackでBundle
2022-02-20
Hot posts!
Proxy環境下でcurlを実行する
2019-12-07
OpenCVのMatのタイプ一覧表
2018-11-25
Macでも利用できるDBクライアント MySQL PostgreSQL Oracle など
2019-12-21
TablePlusを使ってみる。シンプルでモダンなSQLクライアントツール
2018-09-30
DBクライアントツールはDBeaverをおすすめしたい
2021-03-08
AWS S3のアクセスキーIDとシークレットアクセスキーの取得 作業用ユーザを作成
2019-06-12
AtCoderで初めて色がつくまでの話(茶色) レートが中々上がらなかった原因
2018-11-25
CentOS8でEPELとPowerToolsリポジトリの有効化
2020-11-30
Macでターミナルからポートスキャンを行う方法。
2018-12-09
Python + OpenCVのfillConvexPolyで複雑なポリゴンを描画する
2018-11-27
Date
▶︎
2022 年 (22)
▶︎
2021 年 (40)
▶︎
2020 年 (30)
▶︎
2019 年 (90)
▶︎
2018 年 (89)
▶︎
2017 年 (1)
Tags
Author