Browse Source
- Remove pug in favour of simple html file - Stop sending code over the wire to eval on the server - Remove jpeg view since it doesn't make sense to have it heremaster
Linus Unnebäck
8 years ago
11 changed files with 1968 additions and 2096 deletions
|
Before Width: | Height: | Size: 151 KiB After Width: | Height: | Size: 151 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 566 B After Width: | Height: | Size: 566 B |
@ -0,0 +1,19 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<title>node-canvas</title> |
|||
<link href="/style.css" rel="stylesheet"> |
|||
</head> |
|||
<body> |
|||
|
|||
<h1>node-canvas</h1> |
|||
|
|||
<p class="msg"> |
|||
The tests below assert visual and api integrity by running the <em>exact</em> same code utilizing the client canvas api, as well as node-canvas. |
|||
</p> |
|||
|
|||
<script src="/tests.js"></script> |
|||
<script src="/app.js"></script> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -1,145 +1,55 @@ |
|||
window.addEventListener('load', runTests) |
|||
|
|||
function log() { |
|||
if (window.console) console.log.apply(this, arguments); |
|||
} |
|||
|
|||
window.onload = function(){ |
|||
runTests(); |
|||
get('run').addEventListener('click', runTests, false); |
|||
}; |
|||
|
|||
document.addEventListener('keypress', function(event){ |
|||
if (114 == event.charCode) runTests(); |
|||
}, false); |
|||
function create (type, attrs, children) { |
|||
const element = Object.assign(document.createElement(type), attrs) |
|||
|
|||
function get(id) { |
|||
return document.getElementById(id); |
|||
} |
|||
if (children) { |
|||
children.forEach(function (child) { element.appendChild(child) }) |
|||
} |
|||
|
|||
function create(type, str) { |
|||
var el = document.createElement(type); |
|||
if (str) el.appendChild(text(str)); |
|||
return el; |
|||
return element |
|||
} |
|||
|
|||
function text(str) { |
|||
return document.createTextNode(str); |
|||
function pdfLink (name) { |
|||
return create('a', { |
|||
href: '/pdf?name=' + encodeURIComponent(name), |
|||
target: '_blank', |
|||
textContent: 'PDF' |
|||
}) |
|||
} |
|||
|
|||
function pdfForm(fn, canvas) { |
|||
var form = create('form') |
|||
, input = create('input') |
|||
, submit = create('input'); |
|||
function localRendering (name) { |
|||
var canvas = create('canvas', { width: 200, height: 200, title: name }) |
|||
|
|||
form.setAttribute('action', '/pdf'); |
|||
form.setAttribute('method', 'post'); |
|||
form.setAttribute('target', '_blank'); |
|||
window.tests[name](canvas.getContext('2d'), function () {}) |
|||
|
|||
input.setAttribute('type', 'hidden'); |
|||
input.setAttribute('name', 'json'); |
|||
input.setAttribute('value', JSON.stringify({ |
|||
fn: fn.toString() |
|||
, width: canvas.width |
|||
, height: canvas.height |
|||
})); |
|||
|
|||
submit.setAttribute('type', 'submit'); |
|||
submit.setAttribute('value', 'PDF'); |
|||
|
|||
form.appendChild(input); |
|||
form.appendChild(submit); |
|||
|
|||
return form; |
|||
return canvas |
|||
} |
|||
|
|||
function clearTests() { |
|||
var table = get('tests'); |
|||
table.removeChild(table.children[1]); |
|||
function clearTests () { |
|||
var table = document.getElementById('tests') |
|||
if (table) document.body.removeChild(table) |
|||
} |
|||
|
|||
function runTests() { |
|||
clearTests(); |
|||
var table = get('tests') |
|||
, tbody = create('tbody'); |
|||
for (var name in tests) { |
|||
var fn = tests[name] |
|||
, canvas = create('canvas') |
|||
, tr = create('tr') |
|||
, tds = [create('td'), create('td'), create('td'), create('td')]; |
|||
function runTests () { |
|||
clearTests() |
|||
|
|||
canvas.width = 200; |
|||
canvas.height = 200; |
|||
canvas.title = name; |
|||
var testNames = Object.keys(window.tests) |
|||
|
|||
tds[2].appendChild(canvas); |
|||
tds[3].appendChild(create('h3', name)); |
|||
tds[3].appendChild(pdfForm(fn, canvas)); |
|||
var table = create('table', { id: 'tests' }, [ |
|||
create('thead', {}, [ |
|||
create('th', { textContent: 'node-canvas' }), |
|||
create('th', { textContent: 'browser canvas' }), |
|||
create('th', { textContent: '' }) |
|||
]), |
|||
create('tbody', {}, testNames.map(function (name) { |
|||
return create('tr', {}, [ |
|||
create('td', {}, [create('img', { src: '/render?name=' + encodeURIComponent(name) })]), |
|||
create('td', {}, [localRendering(name)]), |
|||
create('td', {}, [create('h3', { textContent: name }), pdfLink(name)]) |
|||
]) |
|||
})) |
|||
]) |
|||
|
|||
tr.appendChild(tds[0]); |
|||
tr.appendChild(tds[1]); |
|||
tr.appendChild(tds[2]); |
|||
tr.appendChild(tds[3]); |
|||
|
|||
tbody.appendChild(tr); |
|||
table.appendChild(tbody); |
|||
runTest(name, canvas, tds[0], tds[1], tds[3]); |
|||
} |
|||
} |
|||
|
|||
function runTest(name, canvas, dest, jpegDest, stats) { |
|||
var fn = tests[name] |
|||
, start = new Date; |
|||
try { |
|||
fn(canvas.getContext('2d'), function(){}); |
|||
} catch (err) { |
|||
log(err); |
|||
} |
|||
var duration = new Date - start; |
|||
stats.appendChild(create('p', 'browser: ' + duration + 'ms')); |
|||
stats.appendChild(create('p', 'fps: ' + (1000 / duration).toFixed(0))); |
|||
renderOnServer('/render', name, canvas, function(res){ |
|||
if (res.error) { |
|||
var p = create('p'); |
|||
p.innerText = res.error; |
|||
dest.appendChild(p); |
|||
} else if (res.data) { |
|||
var img = create('img'); |
|||
img.src = res.data; |
|||
stats.appendChild(create('p', 'node: ' + res.duration + 'ms')); |
|||
stats.appendChild(create('p', 'fps: ' + (1000 / res.duration).toFixed(0))); |
|||
dest.appendChild(img); |
|||
} |
|||
}); |
|||
renderOnServer('/jpeg', name, canvas, function(res){ |
|||
if (res.error) { |
|||
var p = create('p'); |
|||
p.innerText = res.error; |
|||
jpegDest.appendChild(p); |
|||
} else if (res.data) { |
|||
var img = create('img'); |
|||
img.src = res.data; |
|||
jpegDest.appendChild(img); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function renderOnServer(url, name, canvas, fn) { |
|||
var req = new XMLHttpRequest |
|||
, json = JSON.stringify({ |
|||
fn: tests[name].toString() |
|||
, width: canvas.width |
|||
, height: canvas.height |
|||
}); |
|||
req.open('POST', url); |
|||
req.setRequestHeader('Content-Type', 'application/json'); |
|||
req.onreadystatechange = function(){ |
|||
if (4 == req.readyState) { |
|||
try { |
|||
fn(JSON.parse(req.responseText)); |
|||
} catch (err) { |
|||
fn({ error: err }); |
|||
} |
|||
} |
|||
}; |
|||
req.send(json); |
|||
document.body.appendChild(table) |
|||
} |
|||
File diff suppressed because it is too large
@ -1,106 +1,54 @@ |
|||
|
|||
/** |
|||
* Module dependencies. |
|||
*/ |
|||
|
|||
var path = require('path') |
|||
var express = require('express') |
|||
, Canvas = require('../lib/canvas') |
|||
, Image = Canvas.Image |
|||
, bodyParser = require('body-parser') |
|||
, app = express(); |
|||
|
|||
// Config
|
|||
|
|||
app.set('views', __dirname + '/views'); |
|||
app.set('view engine', 'pug'); |
|||
|
|||
// Middleware
|
|||
var Canvas = require('../') |
|||
var tests = require('./public/tests') |
|||
|
|||
app.use(bodyParser.json()); |
|||
app.use(express.static(__dirname + '/public')); |
|||
var app = express() |
|||
var port = parseInt(process.argv[2] || '4000', 10) |
|||
|
|||
// Routes
|
|||
|
|||
app.get('/', function(req, res){ |
|||
res.render('tests'); |
|||
}); |
|||
|
|||
function testFn(req){ |
|||
// Normalize state.png as ./public/state.png
|
|||
// no good way around this at the moment
|
|||
req.body.fn = req.body.fn |
|||
.replace("'state.png'", "'" + __dirname + "/public/state.png'") |
|||
.replace("'face.jpeg'", "'" + __dirname + "/public/face.jpeg'") |
|||
.replace("'star.png'", "'" + __dirname + "/public/star.png'"); |
|||
|
|||
// Do not try this at home :)
|
|||
return eval('(' + req.body.fn + ')'); |
|||
} |
|||
function renderTest (canvas, name, cb) { |
|||
if (!tests[name]) { |
|||
throw new Error('Unknown test: ' + name) |
|||
} |
|||
|
|||
function executeTestFn(ctx, fn, done) { |
|||
if(2 === fn.length) { |
|||
fn(ctx, done); |
|||
if (tests[name].length === 2) { |
|||
tests[name](canvas.getContext('2d'), cb) |
|||
} else { |
|||
fn(ctx); |
|||
done(); |
|||
tests[name](canvas.getContext('2d')) |
|||
cb(null) |
|||
} |
|||
} |
|||
|
|||
function createCanvas(req, type){ |
|||
var width = req.body.width |
|||
, height = req.body.height; |
|||
return new Canvas(width, height, type); |
|||
} |
|||
app.use(express.static(path.join(__dirname, 'fixtures'))) |
|||
app.use(express.static(path.join(__dirname, 'public'))) |
|||
|
|||
app.post('/render', function(req, res, next){ |
|||
var fn = testFn(req) |
|||
, canvas = createCanvas(req) |
|||
, ctx = canvas.getContext('2d') |
|||
, start = new Date; |
|||
app.get('/', function (req, res) { |
|||
res.sendFile(path.join(__dirname, 'public', 'app.html')) |
|||
}) |
|||
|
|||
function done(){ |
|||
var duration = new Date - start; |
|||
canvas.toDataURL(function(err, str){ |
|||
if (err) throw err; |
|||
res.send({ data: str, duration: duration }); |
|||
}); |
|||
} |
|||
app.get('/render', function (req, res, next) { |
|||
var canvas = new Canvas(200, 200) |
|||
|
|||
executeTestFn(ctx, fn, done); |
|||
}); |
|||
renderTest(canvas, req.query.name, function (err) { |
|||
if (err) return next(err) |
|||
|
|||
app.post('/pdf', function(req, res, next){ |
|||
req.body = JSON.parse(req.body.json); |
|||
var fn = testFn(req) |
|||
, canvas = createCanvas(req, 'pdf') |
|||
, ctx = canvas.getContext('2d'); |
|||
res.writeHead(200, { 'Content-Type': 'image/png' }) |
|||
canvas.pngStream().pipe(res) |
|||
}) |
|||
}) |
|||
|
|||
function done(){ |
|||
res.writeHead(200, {'Content-Type' : 'application/pdf'}); |
|||
res.write(canvas.toBuffer()); |
|||
res.end(); |
|||
} |
|||
app.get('/pdf', function (req, res, next) { |
|||
var canvas = new Canvas(200, 200, 'pdf') |
|||
|
|||
executeTestFn(ctx, fn, done); |
|||
}); |
|||
|
|||
app.post('/jpeg', function(req, res, next){ |
|||
// Send nothing if jpeg isn't available.
|
|||
if (!Canvas.jpegVersion) { return res.send({}).end(); } |
|||
var fn = testFn(req) |
|||
, canvas = createCanvas(req) |
|||
, ctx = canvas.getContext('2d'); |
|||
|
|||
function done(){ |
|||
canvas.toDataURL('image/jpeg', function (err, str){ |
|||
if (err) throw err; |
|||
res.send({data: str}); |
|||
}); |
|||
} |
|||
renderTest(canvas, req.query.name, function (err) { |
|||
if (err) return next(err) |
|||
|
|||
executeTestFn(ctx, fn, done); |
|||
}); |
|||
res.writeHead(200, { 'Content-Type': 'application/pdf' }) |
|||
canvas.pdfStream().pipe(res) |
|||
}) |
|||
}) |
|||
|
|||
var port = parseInt(process.argv[2] || '4000', 10); |
|||
app.listen(port); |
|||
console.log('Test server listening on port %d', port); |
|||
app.listen(port, function () { |
|||
console.log('👉 http://localhost:%d/', port) |
|||
}) |
|||
|
|||
@ -1,9 +0,0 @@ |
|||
doctype |
|||
html |
|||
head |
|||
title node-canvas |
|||
link(href='/style.css', rel='stylesheet') |
|||
script(src='/tests.js') |
|||
script(src='/app.js') |
|||
body |
|||
block content |
|||
@ -1,24 +0,0 @@ |
|||
|
|||
extend layout |
|||
|
|||
block content |
|||
h1 node-canvas |
|||
|
|||
p.msg |
|||
| The tests below assert visual and api integrity by running the |
|||
em exact |
|||
| same code utilizing the client canvas api, as well as node-canvas. |
|||
|
|||
p |
|||
| Click to |
|||
a#run(href='#') re-run |
|||
| the test suite or "r". |
|||
|
|||
table#tests |
|||
thead |
|||
tr |
|||
th node-canvas |
|||
th node-canvas (JPEG) |
|||
th target |
|||
th |
|||
tbody |
|||
Loading…
Reference in new issue