Moved font metrics to seperate file

This commit is contained in:
Niklas von Hertzen 2012-12-30 21:26:25 +02:00
parent ba9ace71ba
commit 496c8488bd
3 changed files with 68 additions and 68 deletions

64
src/Font.js Normal file
View File

@ -0,0 +1,64 @@
_html2canvas.Util.Font = (function () {
var fontData = {};
return function(font, fontSize, doc) {
if (fontData[font + "-" + fontSize] !== undefined) {
return fontData[font + "-" + fontSize];
}
var container = doc.createElement('div'),
img = doc.createElement('img'),
span = doc.createElement('span'),
sampleText = 'Hidden Text',
baseline,
middle,
metricsObj;
container.style.visibility = "hidden";
container.style.fontFamily = font;
container.style.fontSize = fontSize;
container.style.margin = 0;
container.style.padding = 0;
doc.body.appendChild(container);
// http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever (handtinywhite.gif)
img.src = "data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=";
img.width = 1;
img.height = 1;
img.style.margin = 0;
img.style.padding = 0;
img.style.verticalAlign = "baseline";
span.style.fontFamily = font;
span.style.fontSize = fontSize;
span.style.margin = 0;
span.style.padding = 0;
span.appendChild(doc.createTextNode(sampleText));
container.appendChild(span);
container.appendChild(img);
baseline = (img.offsetTop - span.offsetTop) + 1;
container.removeChild(span);
container.appendChild(doc.createTextNode(sampleText));
container.style.lineHeight = "normal";
img.style.verticalAlign = "super";
middle = (img.offsetTop-container.offsetTop) + 1;
metricsObj = {
baseline: baseline,
lineWidth: 1,
middle: middle
};
fontData[font + "-" + fontSize] = metricsObj;
doc.body.removeChild(container);
return metricsObj;
};
})();

View File

@ -3,7 +3,6 @@ _html2canvas.Parse = function (images, options) {
var element = (( options.elements === undefined ) ? document.body : options.elements[0]), // select body by default var element = (( options.elements === undefined ) ? document.body : options.elements[0]), // select body by default
numDraws = 0, numDraws = 0,
fontData = {},
doc = element.ownerDocument, doc = element.ownerDocument,
support = _html2canvas.Util.Support(options, doc), support = _html2canvas.Util.Support(options, doc),
ignoreElementsRegExp = new RegExp("(" + options.ignoreElements + ")"), ignoreElementsRegExp = new RegExp("(" + options.ignoreElements + ")"),
@ -66,67 +65,6 @@ _html2canvas.Parse = function (images, options) {
return text.replace(/^\s*/g, "").replace(/\s*$/g, ""); return text.replace(/^\s*/g, "").replace(/\s*$/g, "");
} }
function fontMetrics (font, fontSize) {
if (fontData[font + "-" + fontSize] !== undefined) {
return fontData[font + "-" + fontSize];
}
var container = doc.createElement('div'),
img = doc.createElement('img'),
span = doc.createElement('span'),
sampleText = 'Hidden Text',
baseline,
middle,
metricsObj;
container.style.visibility = "hidden";
container.style.fontFamily = font;
container.style.fontSize = fontSize;
container.style.margin = 0;
container.style.padding = 0;
body.appendChild(container);
// http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever (handtinywhite.gif)
img.src = "data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=";
img.width = 1;
img.height = 1;
img.style.margin = 0;
img.style.padding = 0;
img.style.verticalAlign = "baseline";
span.style.fontFamily = font;
span.style.fontSize = fontSize;
span.style.margin = 0;
span.style.padding = 0;
span.appendChild(doc.createTextNode(sampleText));
container.appendChild(span);
container.appendChild(img);
baseline = (img.offsetTop - span.offsetTop) + 1;
container.removeChild(span);
container.appendChild(doc.createTextNode(sampleText));
container.style.lineHeight = "normal";
img.style.verticalAlign = "super";
middle = (img.offsetTop-container.offsetTop) + 1;
metricsObj = {
baseline: baseline,
lineWidth: 1,
middle: middle
};
fontData[font + "-" + fontSize] = metricsObj;
body.removeChild(container);
return metricsObj;
}
function drawText(currentText, x, y, ctx){ function drawText(currentText, x, y, ctx){
if (currentText !== null && trimText(currentText).length > 0) { if (currentText !== null && trimText(currentText).length > 0) {
ctx.fillText(currentText, x, y); ctx.fillText(currentText, x, y);
@ -136,11 +74,9 @@ _html2canvas.Parse = function (images, options) {
function setTextVariables(ctx, el, text_decoration, color) { function setTextVariables(ctx, el, text_decoration, color) {
var align = false, var align = false,
font_style = getCSS(el, "fontStyle"),
bold = getCSS(el, "fontWeight"), bold = getCSS(el, "fontWeight"),
family = getCSS(el, "fontFamily"), family = getCSS(el, "fontFamily"),
size = getCSS(el, "fontSize"), size = getCSS(el, "fontSize");
font_variant = getCSS(el, "fontVariant");
switch(parseInt(bold, 10)){ switch(parseInt(bold, 10)){
case 401: case 401:
@ -152,11 +88,11 @@ _html2canvas.Parse = function (images, options) {
} }
ctx.setVariable("fillStyle", color); ctx.setVariable("fillStyle", color);
ctx.setVariable("font", [font_style, font_variant, bold, size, family].join(" ")); ctx.setVariable("font", [getCSS(el, "fontStyle"), getCSS(el, "fontVariant"), bold, size, family].join(" "));
ctx.setVariable("textAlign", (align) ? "right" : "left"); ctx.setVariable("textAlign", (align) ? "right" : "left");
if (text_decoration !== "none"){ if (text_decoration !== "none"){
return fontMetrics(family, size); return _html2canvas.Util.Font(family, size, doc);
} }
} }

View File

@ -11,7 +11,7 @@ var h2cSelector, h2cOptions;
document.write(srcStart + '/tests/assets/jquery-1.6.2.js' + scrEnd); document.write(srcStart + '/tests/assets/jquery-1.6.2.js' + scrEnd);
document.write(srcStart + '/tests/assets/jquery.plugin.html2canvas.js' + scrEnd); document.write(srcStart + '/tests/assets/jquery.plugin.html2canvas.js' + scrEnd);
var html2canvas = ['Core', 'Generate', 'Parse', 'Preload', 'Queue', 'Renderer', 'Util', 'Support', 'renderers/Canvas'], i; var html2canvas = ['Core', 'Generate', 'Parse', 'Preload', 'Queue', 'Renderer', 'Util', 'Support', 'Font', 'renderers/Canvas'], i;
for (i = 0; i < html2canvas.length; ++i) { for (i = 0; i < html2canvas.length; ++i) {
document.write(srcStart + '/src/' + html2canvas[i] + '.js' + scrEnd); document.write(srcStart + '/src/' + html2canvas[i] + '.js' + scrEnd);
} }