Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
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.