Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Local font loading into SVG in Phantom.js

Ensures use of Verdana server-side when rendering images.
  • Loading branch information...
commit 6620d46f234f0c9fb3cb647bb13c2200d265e56f 1 parent 8e4c19f
@espadrine espadrine authored
Showing with 47 additions and 14 deletions.
  1. +39 −13 phantomjs-svg2png.js
  2. +7 −0 svg-to-img.js
  3. +1 −1  template.svg
View
52 phantomjs-svg2png.js
@@ -1,20 +1,35 @@
var page = require('webpage').create();
var system = require('system');
var svg = system.args[1];
-var svgUrl = 'data:image/svg+xml,' + window.encodeURI(svg);
var tmpFile = system.args[2];
-page.viewportSize = getSvgDimensions(svg);
-page.open(svgUrl, function(status) {
- if (status !== 'success') {
- console.error('Failed to load the following SVG data:');
- console.error(svgUrl);
- phantom.exit(1);
- } else {
- page.render(tmpFile);
- phantom.exit();
- }
-});
+// Optional local font loading.
+var fs = require('fs');
+var fontPath = './Verdana.ttf';
+if (fs.isFile(fontPath)) {
+ var fontData = fs.read(fontPath, 'b');
+ btoa(fontData, function(fontBase64) {
+ svg = svg.slice(0, svg.indexOf('</svg>')) + '<style><![CDATA['
+ + '@font-face{font-family:"Verdana";src:url(data:font/ttf;base64,'
+ + fontBase64 + ');}]]></style></svg>';
+ renderSvg(svg);
+ });
+} else { renderSvg(svg); }
+
+function renderSvg(svg) {
+ var svgUrl = 'data:image/svg+xml,' + window.encodeURI(svg);
+ page.viewportSize = getSvgDimensions(svg);
+ page.open(svgUrl, function(status) {
+ if (status !== 'success') {
+ console.error('Failed to load the following SVG data:');
+ console.error(svgUrl);
+ phantom.exit(1);
+ } else {
+ page.render(tmpFile);
+ phantom.exit();
+ }
+ });
+}
function getSvgDimensions(svg) {
var frag = window.document.createElement('div');
@@ -22,6 +37,17 @@ function getSvgDimensions(svg) {
var svgRoot = frag.querySelector('svg');
return {
width: parseFloat(svgRoot.getAttribute('width') || 80),
- height: parseFloat(svgRoot.getAttribute('height') || 19)
+ height: parseFloat(svgRoot.getAttribute('height') || 18)
};
}
+
+function btoa(data, cb) {
+ page.open('about:blank', function(status) {
+ if (status !== 'success') {
+ console.error('Failed to load blank page.');
+ phantom.exit(1);
+ } else {
+ cb(page.evaluate(function(data) { return window.btoa(data); }, data));
+ }
+ });
+}
View
7 svg-to-img.js
@@ -5,6 +5,13 @@ var phantom = require('phantomjs');
var childProcess = require('child_process');
var phantomScript = path.join(__dirname, 'phantomjs-svg2png.js');
+// If available, use the font here.
+var fontPath = './Verbana.ttf';
+try {
+ // This happens at startup. Needn't be async.
+ var fontBase64 = fs.readFileSync(fontPath, 'base64');
+} catch(e) {}
+
module.exports = function (svg, format, out, cb) {
var tmpFile = path.join(os.tmpdir(),
"svg2img-" + (Math.random()*2147483648|0) + "." + format);
View
2  template.svg
@@ -18,7 +18,7 @@
<rect rx="4" x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="18" fill="{{=it.colorB||"#4c1"}}"/>
<rect x="{{=it.widths[0]}}" width="4" height="18" fill="{{=it.colorB||"#4c1"}}"/>
<rect rx="4" width="{{=it.widths[0]+it.widths[1]}}" height="18" fill="url(#smooth)"/>
- <g fill="#fff" text-anchor="middle" font-family="Verdana,sans-serif" font-size="10">
+ <g fill="#fff" text-anchor="middle" font-family="Verdana,serif" font-size="10">
<text x="{{=it.widths[0]/2+1}}" y="12" filter="url(#shadow)">{{=it.text[0]}}</text>
<text x="{{=it.widths[0]+it.widths[1]/2-1}}" y="12" filter="url(#shadow)">{{=it.text[1]}}</text>
</g>
Please sign in to comment.
Something went wrong with that request. Please try again.