-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtestFont.html
110 lines (100 loc) · 2.77 KB
/
testFont.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
102
103
104
105
106
107
108
109
110
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Do I have this char?</title>
<script type="text/javascript">
var n=0;
function fromOutsideBMP(cp) {
// 0x01D120
var x=cp-0x10000;
var top10=parseInt("11111111110000000000",2);
var end10=parseInt("1111111111",2);
var part1=(x&top10)/1024+0xD800;
var part2=(x&end10)+0xDC00;
console.log(part1.toString(16), part2.toString(16));
var s=String.fromCharCode(part1)+String.fromCharCode(part2);
return s;
}
function test() {
var myInput = document.getElementById('myInput').value;
if(myInput.substring(0,2)!="U+") return;
var val=parseInt("0x"+myInput.substring(2));
var myChar='';
if(val>0xFFFF) {
myChar=fromOutsideBMP(val);
} else {
myChar=String.fromCharCode();
}
var canvas = document.getElementById('mycanvas');
canvas.width=300;
canvas.height=100;
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#eee';
ctx.fillRect(0,0,100,50);
ctx.fillStyle = '#000';
ctx.font = '24px Sans-Serif';
ctx.textBaseline = 'Top';
ctx.fillText(myChar, 0, 20);
ctx.fillText(String.fromCharCode(0xFFFF), 30, 20);
n=0;
var score=testCanvas(ctx);
console.log(score);
ctx.font = 'Italic 14px Serif';
if(score>95){
ctx.fillText("Looks like your font doesn't have this one...", 0, 80);
} else {
ctx.fillText("Looks like your font has this one...", 0, 80);
}
}
function gPixel(myImageData, px, py) {
var i=((py*(myImageData.width*4)) + (px*4));
var imageData=myImageData.data;
var X=new Object();
X.red=imageData[i++];
X.green=imageData[i++];
X.blue=imageData[i++];
X.alpha=imageData[i];
return X;
}
function sPixel(myImageData, px, py, X) {
var i=((py*(myImageData.width*4)) + (px*4));
var imageData=myImageData.data;
imageData[i++]=X.red;
imageData[i++]=X.green;
imageData[i++]=X.blue;
imageData[i]=X.alpha;
myImageData.data=imageData;
}
function testCanvas(ctx) {
var i,j;
n=0;
var w=30;
var h=25;
var myImageData = ctx.getImageData(0, 0, w*2, h);
var score=0;
var maxPoints=0;
for(j=0;j<h;j++) {
var tmp=[];
for(i=0;i<w;i++) {
var c0=gPixel(myImageData, i, j);
var c1=gPixel(myImageData, i+w, j);
var k0=(c0.red+c0.green+c0.blue)/3;
var k1=(c1.red+c1.green+c1.blue)/3;
tmp.push(k0+" vs "+k1);
if(k0!=238)maxPoints++;
if(k0!=238||k1!=238){
if(k1==k0) score++;
}
}
}
return Math.floor(score/maxPoints*100);
}
</script>
</head><body>
<input type="text" name="myInput" id="myInput" value="U+9090" />
<input type="button" value="check" onClick="test();" />
<hr />
<canvas id="mycanvas"></canvas>
</body>
</html>