Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Do not add the font-loader canvas to the page dom to save some load time

Browse Source
This commit is contained in:
Vivien Nicolas 2011-06-24 21:25:08 +02:00
parent 3955ed1b4c
commit 3d85caa212
1 changed files with 9 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
fonts.js
View File

@ -104,6 +104,7 @@ var FontsLoader = {
worker ? obj.bindWorker(str) : obj.bindDOM(str); worker ? obj.bindWorker(str) : obj.bindDOM(str);
} }
return ready; return ready;
} }
}; };
@ -766,96 +767,55 @@ var Font = (function () {
return fontData; return fontData;
}, },
bindWorker: function font_bind_worker(dataStr) { bindWorker: function font_bindWorker(data) {
postMessage({ postMessage({
action: "font", action: "font",
data: { data: {
raw: dataStr, raw: data,
fontName: this.name, fontName: this.name,
mimetype: this.mimetype mimetype: this.mimetype
} }
}); });
}, },
bindDOM: function font_bind_dom(dataStr) { bindDOM: function font_bindDom(data) {
var fontName = this.name; var fontName = this.name;
/** Hack begin */ /** Hack begin */
// Actually there is not event when a font has finished downloading so // Actually there is not event when a font has finished downloading so
// the following code are a dirty hack to 'guess' when a font is ready // the following code are a dirty hack to 'guess' when a font is ready
// This code could go away when bug 471915 has landed
var canvas = document.createElement("canvas"); var canvas = document.createElement("canvas");
var style = "border: 1px solid black; position:absolute; top: " +
(debug ? (100 * fontCount) : "-200") + "px; left: 2px; width: 340px; height: 100px";
canvas.setAttribute("style", style);
canvas.setAttribute("width", 340);
canvas.setAttribute("heigth", 100);
document.body.appendChild(canvas);
// Get the font size canvas think it will be for 'spaces'
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
ctx.font = "bold italic 20px " + fontName + ", Symbol, Arial"; ctx.font = "bold italic 20px " + fontName + ", Symbol";
var testString = " "; var testString = " ";
// When debugging use the characters provided by the charsets to visually
// see what's happening instead of 'spaces'
var debug = false;
if (debug) {
var name = document.createElement("font");
name.setAttribute("style", "position: absolute; left: 20px; top: " +
(100 * fontCount + 60) + "px");
name.innerHTML = fontName;
document.body.appendChild(name);
// Retrieve font charset
var charset = Fonts[fontName].properties.charset || [];
// if the charset is too small make it repeat a few times
var count = 30;
while (count-- && charset.length <= 30)
charset = charset.concat(charset.slice());
for (var i = 0; i < charset.length; i++) {
var unicode = GlyphsUnicode[charset[i]];
if (!unicode)
continue;
testString += String.fromCharCode(unicode);
}
ctx.fillText(testString, 20, 20);
}
// Periodicaly check for the width of the testString, it will be // Periodicaly check for the width of the testString, it will be
// different once the real font has loaded // different once the real font has loaded
var textWidth = ctx.measureText(testString).width; var textWidth = ctx.measureText(testString).width;
var interval = window.setInterval(function canvasInterval(self) { var interval = window.setInterval(function canvasInterval(self) {
this.start = this.start || Date.now(); this.start = this.start || Date.now();
ctx.font = "bold italic 20px " + fontName + ", Symbol, Arial"; ctx.font = "bold italic 20px " + fontName + ", Symbol";
// For some reasons the font has not loaded, so mark it loaded for the // For some reasons the font has not loaded, so mark it loaded for the
// page to proceed but cry // page to proceed but cry
if ((Date.now() - this.start) >= kMaxWaitForFontFace) { if ((Date.now() - this.start) >= kMaxWaitForFontFace) {
window.clearInterval(interval); window.clearInterval(interval);
Fonts[fontName].loading = false; Fonts[fontName].loading = false;
warn("Is " + fontName + " for charset: " + charset + " loaded?"); warn("Is " + fontName + " loaded?");
this.start = 0; this.start = 0;
} else if (textWidth != ctx.measureText(testString).width) { } else if (textWidth != ctx.measureText(testString).width) {
window.clearInterval(interval); window.clearInterval(interval);
Fonts[fontName].loading = false; Fonts[fontName].loading = false;
this.start = 0; this.start = 0;
} }
if (debug)
ctx.fillText(testString, 20, 50);
}, 30, this); }, 30, this);
/** Hack end */ /** Hack end */
// Convert the data string and add it to the page.
var base64 = window.btoa(dataStr);
// Add the @font-face rule to the document // Add the @font-face rule to the document
var url = "url(data:" + this.mimetype + ";base64," + base64 + ");"; var url = "url(data:" + this.mimetype + ";base64," + window.btoa(data) + ");";
var rule = "@font-face { font-family:'" + fontName + "';src:" + url + "}"; var rule = "@font-face { font-family:'" + fontName + "';src:" + url + "}";
var styleSheet = document.styleSheets[0]; var styleSheet = document.styleSheets[0];
styleSheet.insertRule(rule, styleSheet.length); styleSheet.insertRule(rule, styleSheet.length);