mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

Capture screenshots while running karma tests

Browse Source
This commit is contained in:
Niklas von Hertzen 2017-08-30 21:31:51 +08:00
parent a41ba8852f
commit 23b6f29ecf
8 changed files with 71 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
karma.conf.js
View File

@ -163,8 +163,7 @@ module.exports = function(config) {
'/dist': `http://localhost:${port}/base/dist`,
'/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`,
'/assets': `http://localhost:${port}/base/tests/assets`
},
client: {

23
scripts/screenshot-server.js → karma.js
View File

@ -1,10 +1,27 @@
const Server = require('karma').Server;
const cfg = require('karma').config;
const path = require('path');
const karmaConfig = cfg.parseConfig(path.resolve('./karma.conf.js'));
const server = new Server(karmaConfig, (exitCode) => {
console.log('Karma has exited with ' + exitCode);
process.exit(exitCode)
});
const fs = require('fs');
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const filenamifyUrl = require('filenamify-url');
const app = express();
app.use(cors());
app.use(function(req, res, next) {
// IE9 doesn't set headers for cross-domain ajax requests
if(typeof(req.headers['content-type']) === 'undefined'){
req.headers['content-type'] = "application/json";
}
next();
});
app.use(
bodyParser.json({
limit: '15mb',
@ -20,7 +37,7 @@ const writeScreenshot = (buffer, body) => {
{replacement: '-'}
)}!${body.platform.name}-${body.platform.version}.png`;
fs.writeFileSync(path.resolve(__dirname, '../tests/results/', filename), buffer);
fs.writeFileSync(path.resolve(__dirname, './tests/results/', filename), buffer);
};
app.post('/screenshot', (req, res) => {
@ -65,5 +82,7 @@ app.use((error, req, res, next) => {
});
const listener = app.listen(8081, () => {
console.log(listener.address().port);
server.start();
});

3
package.json
View File

@ -31,6 +31,7 @@
"body-parser": "1.17.2",
"chai": "4.1.1",
"chromeless": "^1.2.0",
"cors": "2.8.4",
"eslint": "4.2.0",
"eslint-plugin-flowtype": "2.35.0",
"eslint-plugin-prettier": "2.1.2",
@ -62,7 +63,7 @@
"flow": "flow",
"lint": "eslint src/**",
"test": "npm run flow && npm run lint && npm run karma",
"karma": "karma start",
"karma": "node karma",
"watch": "webpack --progress --colors --watch"
},
"homepage": "https://html2canvas.hertzen.com",

11
src/Clone.js
View File

@ -37,7 +37,7 @@ export class DocumentCloner {
if (backgroundImage.method === 'url') {
return this.imageLoader
.inlineImage(backgroundImage.args[0])
.then(src => (src ? `url("${src}")` : 'none'));
.then(img => (img ? `url("${img.src}")` : 'none'));
}
return Promise.resolve(
`${backgroundImage.prefix}${backgroundImage.method}(${backgroundImage.args.join(
@ -54,9 +54,12 @@ export class DocumentCloner {
});
if (node instanceof HTMLImageElement) {
this.imageLoader.inlineImage(node.src).then(src => {
if (src && node instanceof HTMLImageElement) {
node.src = src;
this.imageLoader.inlineImage(node.src).then(img => {
if (img && node instanceof HTMLImageElement && node.parentNode) {
node.parentNode.replaceChild(
copyCSSStyles(node.style, img.cloneNode(false)),
node
);
}
});
}

29
src/ImageLoader.js
View File

@ -50,9 +50,9 @@ export default class ImageLoader<T> {
}
}
inlineImage(src: string): Promise<string> {
inlineImage(src: string): Promise<Image> {
if (isInlineImage(src)) {
return Promise.resolve(src);
return loadImage(src, this.options.imageTimeout || 0);
}
if (this.hasImageInCache(src)) {
return this.cache[src];
@ -61,7 +61,7 @@ export default class ImageLoader<T> {
return this.xhrImage(src);
}
xhrImage(src: string): Promise<string> {
xhrImage(src: string): Promise<Image> {
this.cache[src] = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
@ -87,7 +87,7 @@ export default class ImageLoader<T> {
}
xhr.open('GET', src, true);
xhr.send();
});
}).then(src => loadImage(src, this.options.imageTimeout || 0));
return this.cache[src];
}
@ -196,3 +196,24 @@ const isInlineBase64Image = (src: string): boolean => INLINE_BASE64.test(src);
const isSVG = (src: string): boolean =>
src.substr(-3).toLowerCase() === 'svg' || INLINE_SVG.test(src);
const loadImage = (src: string, timeout: number) => {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = src;
if (img.complete === true) {
// Inline XML images may fail to parse, throwing an Error later on
setTimeout(() => {
resolve(img);
}, 500);
}
if (timeout) {
setTimeout(
() => reject(__DEV__ ? `Timed out (${timeout}ms) loading image` : ''),
timeout
);
}
});
};

3
src/Util.js
View File

@ -3,7 +3,7 @@
export const contains = (bit: number, value: number): boolean => (bit & value) !== 0;
export const copyCSSStyles = (style: CSSStyleDeclaration, target: HTMLElement): void => {
export const copyCSSStyles = (style: CSSStyleDeclaration, target: HTMLElement): HTMLElement => {
// Edge does not provide value for cssText
for (let i = style.length - 1; i >= 0; i--) {
const property = style.item(i);
@ -12,6 +12,7 @@ export const copyCSSStyles = (style: CSSStyleDeclaration, target: HTMLElement):
target.style.setProperty(property, style.getPropertyValue(property));
}
}
return target;
};
export const SMALL_IMAGE =

3
src/index.js
View File

@ -32,11 +32,12 @@ export type Options = {
offsetY: number
};
const html2canvas = (element: HTMLElement, config: Options = {}): Promise<*> => {
const html2canvas = (element: HTMLElement, conf: ?Options): Promise<*> => {
if (typeof console === 'object' && typeof console.log === 'function') {
console.log(`html2canvas ${__VERSION__}`);
}
const config = conf || {};
const logger = new Logger();
const ownerDocument = element.ownerDocument;

19
tests/testrunner.js
View File

@ -81,6 +81,7 @@ const assertPath = (result, expected, desc) => {
.forEach(url => {
describe(url, function() {
this.timeout(60000);
this.retries(2);
const windowWidth = 800;
const windowHeight = 600;
const testContainer = document.createElement('iframe');
@ -334,13 +335,15 @@ const assertPath = (result, expected, desc) => {
);
}
// window.__karma__
if (false) {
if (window.__karma__) {
const MAX_CHUNK_SIZE = 75000;
const sendScreenshot = (tries, body, url) => {
const sendScreenshot = (tries, body, server) => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
const xhr =
'withCredentials' in new XMLHttpRequest()
? new XMLHttpRequest()
: new XDomainRequest();
xhr.onload = () => {
if (
@ -354,9 +357,9 @@ const assertPath = (result, expected, desc) => {
);
}
};
// xhr.onerror = reject;
xhr.onerror = reject;
xhr.open('POST', url, true);
xhr.open('POST', server, true);
xhr.send(body);
}).catch(e => {
if (tries > 0) {
@ -385,7 +388,7 @@ const assertPath = (result, expected, desc) => {
version: platform.version
}
}),
'/screenshot/chunk'
'http://localhost:8081/screenshot/chunk'
)
)
);
@ -404,7 +407,7 @@ const assertPath = (result, expected, desc) => {
version: platform.version
}
}),
'/screenshot'
'http://localhost:8081/screenshot'
);
}
});