- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<canvas id='pixel_canvas'></canvas>
<pre id='text_canvas'></pre>
<script>
'use strict';
function tryFetch() {
const array = arguments[0];
const onError = arguments[arguments.length - 1];
let result = array;
for (let i = 1; i < arguments.length - 1; ++i) {
if (arguments[i] < result.length) {
result = result[arguments[i]];
} else {
return onError;
}
}
return result;
}
function bitmap2tetramap(bitmap) {
let tetramap = []
for (let i = 0; i < bitmap.length; i += 2) {
tetramap.push([]);
for (let j = 0; j < bitmap[i].length; j += 2) {
tetramap[tetramap.length - 1].push(
tryFetch(bitmap, i, j, 0) << 3 |
tryFetch(bitmap, i, j + 1, 0) << 2 |
tryFetch(bitmap, i + 1, j, 0) << 1 |
tryFetch(bitmap, i + 1, j + 1, 0)
);
}
}
return tetramap;
}
function renderTetramap(tetramap) {
const tiles = [
' ', '▗', '▖', '▄',
'▝', '▐', '▞', '▟',
'▘', '▚', '▌', '▙',
'▀', '▜', '▛', '█'
];
return tetramap.map(row => row.map(i => tiles[i]).join('')).join('<br>');
}
function renderBitmap(bitmap) {
return renderTetramap(bitmap2tetramap(bitmap));
}
function rgba2bitmap(rgba, width, height) {
let bitmap = [];
for (let i = 0; i < height; ++i) {
bitmap.push([]);
for (let j = 0; j < width; ++j) {
const currentRGBAElementIndex = (i * width * 4) + j * 4;
const red = rgba[currentRGBAElementIndex];
const green = rgba[currentRGBAElementIndex + 1];
const blue = rgba[currentRGBAElementIndex + 2];
const a = rgba[currentRGBAElementIndex + 3];
bitmap[i].push((red + green + blue + a) / 4 > 0? 1 : 0);
}
}
return bitmap;
}
function renderImageData(imageData) {
return renderBitmap(rgba2bitmap(imageData.data, imageData.width, imageData.height));
}
const ctx = pixel_canvas.getContext("2d");
ctx.font = "16px serif";
ctx.fillText("Какой багор )))", 0, 16);
text_canvas.innerHTML = renderImageData(ctx.getImageData(0, 0, pixel_canvas.width, pixel_canvas.height));
</script>
</body>
Follow us!