adam/SotM_Playfield
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use PhantomJS to render PNGs from uploaded files

Browse Source 
Not in a useful place yet, but hey: progress
This commit is contained in:
Adam Goldsmith 2017-10-02 03:24:13 -04:00
parent 4133ba8e7c
commit 6619e20f4a
3 changed files with 60 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
js/editor.js
View File

@ -9,13 +9,18 @@ window.addEventListener("load", () => {
let reader = new FileReader(); let reader = new FileReader();
reader.onload = e => { reader.onload = e => {
deckJSON = JSON.parse(e.target.result); 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) => { deckJSON.deck.forEach((card, index) => {
let cardSVG = respSVG.cloneNode(true); let cardSVG = respSVG.cloneNode(true);
let width = cardSVG.getAttribute("svg:width"); deck.appendChild(cardSVG);
cardSVG.setAttribute("svg:x", index * width + "pt");
newSvg.appendChild(cardSVG);
for (let prop in card) { for (let prop in card) {
if (prop !== "count") { if (prop !== "count") {
wrapSVGText(cardSVG.querySelector('#' + prop), 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]); reader.readAsText(files[0]);
}); });
@ -75,4 +86,3 @@ function wrapSVGText(e, string) {
} }
} }
} }

5
package.json
View File

@ -8,5 +8,8 @@
"start": "node server.js" "start": "node server.js"
}, },
"author": "", "author": "",
"license": "ISC" "license": "ISC",
"dependencies": {
"phantom": "^4.0.5"
}
} }

40
server.js
View File

@ -4,7 +4,9 @@
const http = require('http'), const http = require('http'),
fs = require('fs'), fs = require('fs'),
path = require('path'),
url = require('url'), url = require('url'),
phantom = require('phantom'),
port = 8080; port = 8080;
const server = http.createServer((req, res) => { const server = http.createServer((req, res) => {
@ -75,6 +77,8 @@ const server = http.createServer((req, res) => {
break; break;
case 'deck.json': case 'deck.json':
sendFile(res, deckName + '.json', 'application/json'); sendFile(res, deckName + '.json', 'application/json');
case 'upload':
handleUpload(res, req, deckName);
break; break;
default: default:
send404(res, uri); send404(res, uri);
@ -135,6 +139,7 @@ function sendEditor(res, deckName) {
</head> </head>
<body> <body>
<input id="jsonUpload" type="file"><br> <input id="jsonUpload" type="file"><br>
<div id="deck"></div>
</body> </body>
</html> </html>
`; `;
@ -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) { function send404(res, uri) {
res.writeHead(404, {'Content-type': "text/html; charset=utf-8"}); res.writeHead(404, {'Content-type': "text/html; charset=utf-8"});
const html = ` const html = `