From 6619e20f4a1cf97b2ff6a2f7d9727ca082244742 Mon Sep 17 00:00:00 2001 From: Adam Goldsmith Date: Mon, 2 Oct 2017 03:24:13 -0400 Subject: [PATCH] Use PhantomJS to render PNGs from uploaded files Not in a useful place yet, but hey: progress --- js/editor.js | 22 ++++++++++++++++------ package.json | 5 ++++- server.js | 40 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 60 insertions(+), 7 deletions(-) diff --git a/js/editor.js b/js/editor.js index 858f185..0359569 100644 --- a/js/editor.js +++ b/js/editor.js @@ -9,13 +9,18 @@ window.addEventListener("load", () => { let reader = new FileReader(); reader.onload = e => { deckJSON = JSON.parse(e.target.result); - let newSvg = document.createElement('svg'); - document.body.appendChild(newSvg); + + let deck = document.querySelector('#deck'); + deck.style.width = Math.ceil(Math.sqrt(deckJSON.deck.length)) * + parseInt(respSVG.getAttribute("width")) + "pt"; + deck.style.height = Math.ceil(Math.sqrt(deckJSON.deck.length)) * + parseInt(respSVG.getAttribute("height")) + "pt"; + + deck.innerHTML = ""; + deckJSON.deck.forEach((card, index) => { let cardSVG = respSVG.cloneNode(true); - let width = cardSVG.getAttribute("svg:width"); - cardSVG.setAttribute("svg:x", index * width + "pt"); - newSvg.appendChild(cardSVG); + deck.appendChild(cardSVG); for (let prop in card) { if (prop !== "count") { wrapSVGText(cardSVG.querySelector('#' + prop), @@ -23,6 +28,12 @@ window.addEventListener("load", () => { } } }); + + let data = (new XMLSerializer()).serializeToString(deck); + let xhr = new XMLHttpRequest(); + xhr.open('POST', "upload"); + xhr.setRequestHeader("Content-Type", "application/json"); + xhr.send(JSON.stringify({body: data, json: deckJSON})); }; reader.readAsText(files[0]); }); @@ -75,4 +86,3 @@ function wrapSVGText(e, string) { } } } - diff --git a/package.json b/package.json index ce8d14d..3062dfb 100644 --- a/package.json +++ b/package.json @@ -8,5 +8,8 @@ "start": "node server.js" }, "author": "", - "license": "ISC" + "license": "ISC", + "dependencies": { + "phantom": "^4.0.5" + } } diff --git a/server.js b/server.js index a818b0d..f24bc30 100644 --- a/server.js +++ b/server.js @@ -4,7 +4,9 @@ const http = require('http'), fs = require('fs'), + path = require('path'), url = require('url'), + phantom = require('phantom'), port = 8080; const server = http.createServer((req, res) => { @@ -75,6 +77,8 @@ const server = http.createServer((req, res) => { break; case 'deck.json': sendFile(res, deckName + '.json', 'application/json'); + case 'upload': + handleUpload(res, req, deckName); break; default: send404(res, uri); @@ -135,6 +139,7 @@ function sendEditor(res, deckName) {
+
`; @@ -164,6 +169,41 @@ function sendPlayfield(res, deckName) { } +function handleUpload(res, req) { + let body = ''; + + req.on('data', data => { + body += data; + // check for file > 100MB + if (body.length > 1e8) { + req.connection.destroy(); + console.log('upload too big'); + } + }); + + req.on('end', () => { + let json = JSON.parse(body); + + console.log("making page"); + phantom.create().then( + ph => ph.createPage().then( + page => { + page.on('onLoadFinished', status => { + if (status !== 'success') { + console.log('Failed to load page'); + ph.exit(1); + } + else { + page.render("dest.png"); + page.close().then(() => ph.exit()); + } + }); + page.property('zoomFactor', 2); // pretty arbitrary + page.property('content', json.body); + })); + }); +} + function send404(res, uri) { res.writeHead(404, {'Content-type': "text/html; charset=utf-8"}); const html = `