-
Notifications
You must be signed in to change notification settings - Fork 8
/
freetype.html
executable file
·101 lines (90 loc) · 3.24 KB
/
freetype.html
1
2
3
4
5
6
7
8
9
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!doctype html>
<html><head><title>FreeType test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript">
var Module = {
preRun:[ function() {
Module.FS_createPreloadedFile("/", "Inconsolata.otf",
"Inconsolata.otf", true, false);
} ],
postRun:[ function() {
load_font("Inconsolata.otf", "INCONSOLATA", 108);
} ]
};
</script>
<script type="text/javascript" src="freetype.js"></script>
<script type="text/javascript">
var monochrome = Module.cwrap("monochrome", 'number', ['number']);
var load_font = Module.cwrap("load_font", 'number', ['string','string','number']);
var find_font = Module.cwrap("find_font", 'number', ['string']);
var get_bitmap = Module.cwrap("get_bitmap", 'number', ['number','number','number','number']);
var get_width = Module.cwrap("get_width", 'number', []);
var get_height = Module.cwrap("get_height", 'number', []);
var get_left = Module.cwrap("get_left", 'number', []);
var get_top = Module.cwrap("get_top", 'number', []);
var get_advance = Module.cwrap("get_advance", 'number', []);
function go() {
var text = document.getElementById("text").value;
var sizex = +document.getElementById("sizex").value || 12;
var sizey = +document.getElementById("sizey").value || 12;
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext('2d');
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, cvs.width, cvs.height);
ctx.fillStyle = '#000';
var id = ctx.getImageData(0, 0, cvs.width, cvs.height);
var dat = id.data;
// Anti-aliased or monochrome?
monochrome(document.getElementById('fontAnti').checked ? 0 : 1);
render(find_font("OCR-A"), 100);
render(find_font("OCR-B"), 200);
render(find_font("INCONSOLATA"), 300);
ctx.putImageData(id, 0, 0);
function render(font, where) {
var x = 10;
var y = where; // baseline
for (var n = 0; n < text.length; n++) {
var offset = get_bitmap(font, text.charCodeAt(n), sizex, sizey);
if (!offset)
continue;
var width = get_width();
var height = get_height();
var width4x = cvs.width * 4;
var buff = Module.HEAPU8.subarray(offset, offset + width * height);
if (n == 0) console.log(text.charAt(n) + ': height=' + height);
var l = get_left();
var t = get_top();
for (var i = 0; i < width; i++) {
for (var j = 0; j < height; j++) {
var val = 255-buff[j * width + i];
if (val == 255)
continue;
val = Math.min(dat[(j+y-t)*width4x + (x+l+i)*4],val);
dat[(j+y-t)*width4x + (x+l+i)*4] = val;
dat[(j+y-t)*width4x + (x+l+i)*4 + 1] = val;
dat[(j+y-t)*width4x + (x+l+i)*4 + 2] = val;
dat[(j+y-t)*width4x + (x+l+i)*4 + 3] = 255;
}
}
x += get_advance();
}
}
}
</script>
</head>
<body>
<table border=0>
<tr><th>Sample Text<th>Width<th>Height
<tr><td><input type="text" style="width:24ex" id="text">
<td><input type="text" style="width:6ex" id="sizex" value="16">
<td><input type="text" style="width:6ex" id="sizey" value="16">
<td><button onclick="go()">Render</button>
<td><label for="fontAnti"><input type="radio" name="font" value="A"
id="fontAnti" checked>Anti-Aliased</label>
<label for="fontMono"><input type="radio" name="font" value="M"
id="fontMono">Monochrome</label>
</table>
<br>
<canvas width=1000 height=500 id="canvas"></canvas>
</body>
</html>