mirror
/
html2canvas
mirror of https://github.com/niklasvh/html2canvas.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add screenshot collecting server

This commit is contained in:
Niklas von Hertzen 2017-08-28 21:27:39 +08:00
parent 5dbb197a82
commit b75fd70042
9 changed files with 180 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -14,3 +14,4 @@ node_modules/
npm-debug.log
debug.log
tests/reftests.js
*.log

16
karma.conf.js
View File

@ -10,10 +10,11 @@ module.exports = function(config) {
platform: 'Windows 10',
version: 'beta'
},
sl_stable_firefox: {
sl_beta_firefox: {
base: 'SauceLabs',
browserName: 'firefox',
platform: 'Windows 10'
platform: 'Windows 8.1',
version: 'beta'
},
sl_ie9: {
base: 'SauceLabs',
@ -90,16 +91,6 @@ module.exports = function(config) {
}
});
/*
'sl_opera_12.15': {
base: 'SauceLabs',
browserName: 'opera',
platform: 'Linux',
version: '12.15'
},
*/
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
@ -173,6 +164,7 @@ module.exports = function(config) {
'/node_modules': `http://localhost:${port}/base/node_modules`,
'/tests': `http://localhost:${port}/base/tests`,
'/assets': `http://localhost:${port}/base/tests/assets`,
'/screenshot': `http://localhost:8081/screenshot`,
},
client: {

5
package.json
View File

@ -28,12 +28,14 @@
"babel-preset-es2015": "6.24.1",
"babel-preset-flow": "6.23.0",
"base64-arraybuffer": "0.1.5",
"body-parser": "1.17.2",
"chai": "4.1.1",
"chromeless": "^1.2.0",
"eslint": "4.2.0",
"eslint-plugin-flowtype": "2.35.0",
"eslint-plugin-prettier": "2.1.2",
"express": "4.15.4",
"filenamify-url": "1.0.0",
"flow-bin": "0.50.0",
"glob": "7.1.2",
"jquery": "3.2.1",
@ -45,6 +47,7 @@
"karma-mocha": "1.3.0",
"karma-sauce-launcher": "1.1.0",
"mocha": "3.5.0",
"platform": "1.3.4",
"prettier": "1.5.3",
"promise-polyfill": "6.0.2",
"rimraf": "2.6.1",
@ -59,7 +62,7 @@
"flow": "flow",
"lint": "eslint src/**",
"test": "npm run flow && npm run lint && npm run karma",
"karma": "karma start --single-run",
"karma": "karma start",
"watch": "webpack --progress --colors --watch"
},
"homepage": "https://html2canvas.hertzen.com",

69
scripts/screenshot-server.js Normal file
View File

@ -0,0 +1,69 @@
const path = require('path');
const fs = require('fs');
const express = require('express');
const bodyParser = require('body-parser');
const filenamifyUrl = require('filenamify-url');
const app = express();
app.use(
bodyParser.json({
limit: '15mb',
type: '*/*'
})
);
const prefix = 'data:image/png;base64,';
const writeScreenshot = (buffer, body) => {
const filename = `${filenamifyUrl(
body.test.replace(/^\/tests\/reftests\//, '').replace(/\.html$/, ''),
{replacement: '-'}
)}!${body.platform.name}-${body.platform.version}.png`;
fs.writeFileSync(path.resolve(__dirname, '../tests/results/', filename), buffer);
};
app.post('/screenshot', (req, res) => {
if (!req.body || !req.body.screenshot) {
return res.sendStatus(400);
}
const buffer = new Buffer(req.body.screenshot.substring(prefix.length), 'base64');
writeScreenshot(buffer, req.body);
return res.sendStatus(200);
});
const chunks = {};
app.post('/screenshot/chunk', (req, res) => {
if (!req.body || !req.body.screenshot) {
return res.sendStatus(400);
}
const key = `${req.body.platform.name}-${req.body.platform.version}-${req.body.test
.replace(/^\/tests\/reftests\//, '')
.replace(/\.html$/, '')}`;
if (!Array.isArray(chunks[key])) {
chunks[key] = Array.from(Array(req.body.totalCount));
}
chunks[key][req.body.part] = req.body.screenshot;
if (chunks[key].every(s => typeof s === 'string')) {
const str = chunks[key].reduce((acc, s) => acc + s, '');
const buffer = new Buffer(str.substring(prefix.length), 'base64');
delete chunks[key];
writeScreenshot(buffer, req.body);
}
return res.sendStatus(200);
});
app.use((error, req, res, next) => {
console.error(error);
next();
});
const listener = app.listen(8081, () => {
console.log(listener.address().port);
});

9
src/Feature.js
View File

@ -75,8 +75,15 @@ const testSVG = document => {
const testForeignObject = document => {
const img = new Image();
const canvas = document.createElement('canvas');
canvas.width = 1;
canvas.height = 1;
const ctx = canvas.getContext('2d');
img.src = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject><div></div></foreignObject></svg>`;
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 1, 1);
img.src = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject><img src="${encodeURIComponent(
canvas.toDataURL()
)}" /></foreignObject></svg>`;
return new Promise(resolve => {
const onload = () => {

13
src/index.js
View File

@ -18,6 +18,7 @@ import Color, {TRANSPARENT} from './Color';
export type Options = {
async: ?boolean,
allowTaint: ?boolean,
backgroundColor: string,
canvas: ?HTMLCanvasElement,
imageTimeout: number,
proxy: ?string,
@ -71,14 +72,18 @@ const html2canvas = (element: HTMLElement, config: Options): Promise<*> => {
const documentBackgroundColor = ownerDocument.documentElement
? new Color(getComputedStyle(ownerDocument.documentElement).backgroundColor)
: TRANSPARENT;
const bodyBackgroundColor = ownerDocument.body
? new Color(getComputedStyle(ownerDocument.body).backgroundColor)
: TRANSPARENT;
const backgroundColor =
element === ownerDocument.documentElement
? documentBackgroundColor.isTransparent()
? ownerDocument.body
? new Color(getComputedStyle(ownerDocument.body).backgroundColor)
: null
? bodyBackgroundColor.isTransparent()
? options.backgroundColor ? new Color(options.backgroundColor) : null
: bodyBackgroundColor
: documentBackgroundColor
: null;
: options.backgroundColor ? new Color(options.backgroundColor) : null;
// $FlowFixMe
const result = Feature.SUPPORT_FOREIGNOBJECT_DRAWING.then(

5
tests/reftests/ignore.txt
View File

@ -1,5 +0,0 @@
/tests/reftests/background/radial-gradient.html
/tests/reftests/text/chinese.html
[Edge]/tests/reftests/acid2.html
[Edge]/tests/reftests/pseudoelements.html
[Edge]/tests/reftests/text/multiple.html

7
tests/sauceconnect.js
View File

@ -4,7 +4,12 @@ sauceConnectLauncher(
{
username: process.env.SAUCE_USERNAME,
accessKey: process.env.SAUCE_ACCESS_KEY,
logger: console.log
logger: console.log,
// Log output from the `sc` process to stdout?
verbose: true,
// Enable verbose debugging (optional)
verboseDebugging: true
},
err => {
if (err) {

81
tests/testrunner.js
View File

@ -2,6 +2,8 @@ import {expect} from 'chai';
import parseRefTest from '../scripts/parse-reftest';
import reftests from './reftests';
import querystring from 'querystring';
import platform from 'platform';
import Promise from 'promise-polyfill';
const DOWNLOAD_REFTESTS = false;
const query = querystring.parse(location.search.replace(/^\?/, ''));
@ -78,7 +80,7 @@ const assertPath = (result, expected, desc) => {
})
.forEach(url => {
describe(url, function() {
this.timeout(30000);
this.timeout(60000);
const windowWidth = 800;
const windowHeight = 600;
const testContainer = document.createElement('iframe');
@ -113,7 +115,8 @@ const assertPath = (result, expected, desc) => {
it('Should render untainted canvas', () => {
return testContainer.contentWindow
.html2canvas(testContainer.contentWindow.document.documentElement, {
removeContainer: true
removeContainer: true,
backgroundColor: '#ffffff'
})
.then(canvas => {
try {
@ -330,6 +333,80 @@ const assertPath = (result, expected, desc) => {
result
);
}
// window.__karma__
if (false) {
const MAX_CHUNK_SIZE = 75000;
const sendScreenshot = (tries, body, url) => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = () => {
if (
typeof xhr.status !== 'number' ||
xhr.status === 200
) {
resolve();
} else {
reject(
`Failed to send screenshot with status ${xhr.status}`
);
}
};
// xhr.onerror = reject;
xhr.open('POST', url, true);
xhr.send(body);
}).catch(e => {
if (tries > 0) {
// Older edge browsers and some safari browsers have issues sending large xhr through saucetunnel
const data = canvas.toDataURL();
const totalCount = Math.ceil(
data.length / MAX_CHUNK_SIZE
);
return Promise.all(
Array.apply(
null,
Array(totalCount)
).map((x, part) =>
sendScreenshot(
0,
JSON.stringify({
screenshot: data.substr(
part * MAX_CHUNK_SIZE,
MAX_CHUNK_SIZE
),
part,
totalCount,
test: url,
platform: {
name: platform.name,
version: platform.version
}
}),
'/screenshot/chunk'
)
)
);
}
return Promise.reject(e);
});
};
return sendScreenshot(
1,
JSON.stringify({
screenshot: canvas.toDataURL(),
test: url,
platform: {
name: platform.name,
version: platform.version
}
}),
'/screenshot'
);
}
});
});
});