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();
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) {
}
}
}

5
package.json
View File

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

40
server.js
View File

@ -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) {
</head>
<body>
<input id="jsonUpload" type="file"><br>
<div id="deck"></div>
</body>
</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) {
res.writeHead(404, {'Content-type': "text/html; charset=utf-8"});
const html = `