mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
0.5.0 rewrite
This commit is contained in:
Niklas von Hertzen
parent
6201e09118
commit
8b8c080841
@ -12,5 +12,6 @@
|
|||||||
"browser": true,
|
"browser": true,
|
||||||
"globals": {
|
"globals": {
|
||||||
"jQuery": true
|
"jQuery": true
|
||||||
}
|
},
|
||||||
|
"predef": ["NodeContainer", "StackingContext", "TextContainer", "CanvasRenderer", "Renderer", "Support"]
|
||||||
}
|
}
|
||||||
11
Gruntfile.js
11
Gruntfile.js
@ -39,6 +39,15 @@ module.exports = function(grunt) {
|
|||||||
footer: meta.post
|
footer: meta.post
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
connect: {
|
||||||
|
server: {
|
||||||
|
options: {
|
||||||
|
port: 8080,
|
||||||
|
base: './',
|
||||||
|
keepalive: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
uglify: {
|
uglify: {
|
||||||
dist: {
|
dist: {
|
||||||
src: ['<%= concat.dist.dest %>'],
|
src: ['<%= concat.dist.dest %>'],
|
||||||
@ -75,8 +84,10 @@ module.exports = function(grunt) {
|
|||||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||||
grunt.loadNpmTasks('grunt-contrib-qunit');
|
grunt.loadNpmTasks('grunt-contrib-qunit');
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-connect');
|
||||||
|
|
||||||
// Default task.
|
// Default task.
|
||||||
|
grunt.registerTask('server', ['connect']);
|
||||||
grunt.registerTask('build', ['concat', 'uglify']);
|
grunt.registerTask('build', ['concat', 'uglify']);
|
||||||
grunt.registerTask('default', ['concat', 'jshint', 'qunit', 'uglify']);
|
grunt.registerTask('default', ['concat', 'jshint', 'qunit', 'uglify']);
|
||||||
grunt.registerTask('travis', ['concat', 'jshint', 'qunit', 'uglify', 'webdriver']);
|
grunt.registerTask('travis', ['concat', 'jshint', 'qunit', 'uglify', 'webdriver']);
|
||||||
|
|||||||
3290
build/html2canvas.js
3290
build/html2canvas.js
File diff suppressed because it is too large
Load Diff
7
build/html2canvas.min.js
vendored
7
build/html2canvas.min.js
vendored
File diff suppressed because one or more lines are too long
@ -2,7 +2,7 @@
|
|||||||
"title": "html2canvas",
|
"title": "html2canvas",
|
||||||
"name": "html2canvas",
|
"name": "html2canvas",
|
||||||
"description": "Screenshots with JavaScript",
|
"description": "Screenshots with JavaScript",
|
||||||
"version": "0.4.1",
|
"version": "0.5.0-rc1",
|
||||||
"author": {
|
"author": {
|
||||||
"name": "Niklas von Hertzen",
|
"name": "Niklas von Hertzen",
|
||||||
"email": "niklasvh@gmail.com",
|
"email": "niklasvh@gmail.com",
|
||||||
@ -32,7 +32,9 @@
|
|||||||
"png-js": ">= 0.1.1",
|
"png-js": ">= 0.1.1",
|
||||||
"sync-webdriver": ">=0.1.1",
|
"sync-webdriver": ">=0.1.1",
|
||||||
"express": "~3.2.3",
|
"express": "~3.2.3",
|
||||||
"baconjs": "~0.3.15"
|
"baconjs": "~0.3.15",
|
||||||
|
"wd": "~0.2.7",
|
||||||
|
"grunt-contrib-connect": "~0.6.0"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "grunt travis --verbose"
|
"test": "grunt travis --verbose"
|
||||||
|
|||||||
411
src/Core.js
411
src/Core.js
@ -1,411 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
|
|
||||||
var _html2canvas = {},
|
|
||||||
previousElement,
|
|
||||||
computedCSS,
|
|
||||||
html2canvas;
|
|
||||||
|
|
||||||
_html2canvas.Util = {};
|
|
||||||
|
|
||||||
_html2canvas.Util.log = function(a) {
|
|
||||||
if (_html2canvas.logging && window.console && window.console.log) {
|
|
||||||
window.console.log(a);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
_html2canvas.Util.trimText = (function(isNative){
|
|
||||||
return function(input) {
|
|
||||||
return isNative ? isNative.apply(input) : ((input || '') + '').replace( /^\s+|\s+$/g , '' );
|
|
||||||
};
|
|
||||||
})(String.prototype.trim);
|
|
||||||
|
|
||||||
_html2canvas.Util.asFloat = function(v) {
|
|
||||||
return parseFloat(v);
|
|
||||||
};
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
// TODO: support all possible length values
|
|
||||||
var TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
|
|
||||||
var TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;
|
|
||||||
_html2canvas.Util.parseTextShadows = function (value) {
|
|
||||||
if (!value || value === 'none') {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// find multiple shadow declarations
|
|
||||||
var shadows = value.match(TEXT_SHADOW_PROPERTY),
|
|
||||||
results = [];
|
|
||||||
for (var i = 0; shadows && (i < shadows.length); i++) {
|
|
||||||
var s = shadows[i].match(TEXT_SHADOW_VALUES);
|
|
||||||
results.push({
|
|
||||||
color: s[0],
|
|
||||||
offsetX: s[1] ? s[1].replace('px', '') : 0,
|
|
||||||
offsetY: s[2] ? s[2].replace('px', '') : 0,
|
|
||||||
blur: s[3] ? s[3].replace('px', '') : 0
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return results;
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
|
|
||||||
_html2canvas.Util.parseBackgroundImage = function (value) {
|
|
||||||
var whitespace = ' \r\n\t',
|
|
||||||
method, definition, prefix, prefix_i, block, results = [],
|
|
||||||
c, mode = 0, numParen = 0, quote, args;
|
|
||||||
|
|
||||||
var appendResult = function(){
|
|
||||||
if(method) {
|
|
||||||
if(definition.substr( 0, 1 ) === '"') {
|
|
||||||
definition = definition.substr( 1, definition.length - 2 );
|
|
||||||
}
|
|
||||||
if(definition) {
|
|
||||||
args.push(definition);
|
|
||||||
}
|
|
||||||
if(method.substr( 0, 1 ) === '-' &&
|
|
||||||
(prefix_i = method.indexOf( '-', 1 ) + 1) > 0) {
|
|
||||||
prefix = method.substr( 0, prefix_i);
|
|
||||||
method = method.substr( prefix_i );
|
|
||||||
}
|
|
||||||
results.push({
|
|
||||||
prefix: prefix,
|
|
||||||
method: method.toLowerCase(),
|
|
||||||
value: block,
|
|
||||||
args: args
|
|
||||||
});
|
|
||||||
}
|
|
||||||
args = []; //for some odd reason, setting .length = 0 didn't work in safari
|
|
||||||
method =
|
|
||||||
prefix =
|
|
||||||
definition =
|
|
||||||
block = '';
|
|
||||||
};
|
|
||||||
|
|
||||||
appendResult();
|
|
||||||
for(var i = 0, ii = value.length; i<ii; i++) {
|
|
||||||
c = value[i];
|
|
||||||
if(mode === 0 && whitespace.indexOf( c ) > -1){
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
switch(c) {
|
|
||||||
case '"':
|
|
||||||
if(!quote) {
|
|
||||||
quote = c;
|
|
||||||
}
|
|
||||||
else if(quote === c) {
|
|
||||||
quote = null;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case '(':
|
|
||||||
if(quote) { break; }
|
|
||||||
else if(mode === 0) {
|
|
||||||
mode = 1;
|
|
||||||
block += c;
|
|
||||||
continue;
|
|
||||||
} else {
|
|
||||||
numParen++;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case ')':
|
|
||||||
if(quote) { break; }
|
|
||||||
else if(mode === 1) {
|
|
||||||
if(numParen === 0) {
|
|
||||||
mode = 0;
|
|
||||||
block += c;
|
|
||||||
appendResult();
|
|
||||||
continue;
|
|
||||||
} else {
|
|
||||||
numParen--;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case ',':
|
|
||||||
if(quote) { break; }
|
|
||||||
else if(mode === 0) {
|
|
||||||
appendResult();
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
else if (mode === 1) {
|
|
||||||
if(numParen === 0 && !method.match(/^url$/i)) {
|
|
||||||
args.push(definition);
|
|
||||||
definition = '';
|
|
||||||
block += c;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
block += c;
|
|
||||||
if(mode === 0) { method += c; }
|
|
||||||
else { definition += c; }
|
|
||||||
}
|
|
||||||
appendResult();
|
|
||||||
|
|
||||||
return results;
|
|
||||||
};
|
|
||||||
|
|
||||||
_html2canvas.Util.Bounds = function (element) {
|
|
||||||
var clientRect, bounds = {};
|
|
||||||
|
|
||||||
if (element.getBoundingClientRect){
|
|
||||||
clientRect = element.getBoundingClientRect();
|
|
||||||
|
|
||||||
// TODO add scroll position to bounds, so no scrolling of window necessary
|
|
||||||
bounds.top = clientRect.top;
|
|
||||||
bounds.bottom = clientRect.bottom || (clientRect.top + clientRect.height);
|
|
||||||
bounds.left = clientRect.left;
|
|
||||||
|
|
||||||
bounds.width = element.offsetWidth;
|
|
||||||
bounds.height = element.offsetHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
return bounds;
|
|
||||||
};
|
|
||||||
|
|
||||||
// TODO ideally, we'd want everything to go through this function instead of Util.Bounds,
|
|
||||||
// but would require further work to calculate the correct positions for elements with offsetParents
|
|
||||||
_html2canvas.Util.OffsetBounds = function (element) {
|
|
||||||
var parent = element.offsetParent ? _html2canvas.Util.OffsetBounds(element.offsetParent) : {top: 0, left: 0};
|
|
||||||
|
|
||||||
return {
|
|
||||||
top: element.offsetTop + parent.top,
|
|
||||||
bottom: element.offsetTop + element.offsetHeight + parent.top,
|
|
||||||
left: element.offsetLeft + parent.left,
|
|
||||||
width: element.offsetWidth,
|
|
||||||
height: element.offsetHeight
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
function toPX(element, attribute, value ) {
|
|
||||||
var rsLeft = element.runtimeStyle && element.runtimeStyle[attribute],
|
|
||||||
left,
|
|
||||||
style = element.style;
|
|
||||||
|
|
||||||
// Check if we are not dealing with pixels, (Opera has issues with this)
|
|
||||||
// Ported from jQuery css.js
|
|
||||||
// From the awesome hack by Dean Edwards
|
|
||||||
// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
|
|
||||||
|
|
||||||
// If we're not dealing with a regular pixel number
|
|
||||||
// but a number that has a weird ending, we need to convert it to pixels
|
|
||||||
|
|
||||||
if ( !/^-?[0-9]+\.?[0-9]*(?:px)?$/i.test( value ) && /^-?\d/.test(value) ) {
|
|
||||||
// Remember the original values
|
|
||||||
left = style.left;
|
|
||||||
|
|
||||||
// Put in the new values to get a computed value out
|
|
||||||
if (rsLeft) {
|
|
||||||
element.runtimeStyle.left = element.currentStyle.left;
|
|
||||||
}
|
|
||||||
style.left = attribute === "fontSize" ? "1em" : (value || 0);
|
|
||||||
value = style.pixelLeft + "px";
|
|
||||||
|
|
||||||
// Revert the changed values
|
|
||||||
style.left = left;
|
|
||||||
if (rsLeft) {
|
|
||||||
element.runtimeStyle.left = rsLeft;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!/^(thin|medium|thick)$/i.test(value)) {
|
|
||||||
return Math.round(parseFloat(value)) + "px";
|
|
||||||
}
|
|
||||||
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
|
|
||||||
function asInt(val) {
|
|
||||||
return parseInt(val, 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
function isPercentage(value) {
|
|
||||||
return value.toString().indexOf("%") !== -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
function parseBackgroundSizePosition(value, element, attribute, index) {
|
|
||||||
value = (value || '').split(',');
|
|
||||||
value = value[index || 0] || value[0] || 'auto';
|
|
||||||
value = _html2canvas.Util.trimText(value).split(' ');
|
|
||||||
if(attribute === 'backgroundSize' && (value[0] && value[0].match(/^(cover|contain|auto)$/))) {
|
|
||||||
return value;
|
|
||||||
} else {
|
|
||||||
value[0] = (value[0].indexOf( "%" ) === -1) ? toPX(element, attribute + "X", value[0]) : value[0];
|
|
||||||
if(value[1] === undefined) {
|
|
||||||
if(attribute === 'backgroundSize') {
|
|
||||||
value[1] = 'auto';
|
|
||||||
return value;
|
|
||||||
} else {
|
|
||||||
// IE 9 doesn't return double digit always
|
|
||||||
value[1] = value[0];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
value[1] = (value[1].indexOf("%") === -1) ? toPX(element, attribute + "Y", value[1]) : value[1];
|
|
||||||
}
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
|
|
||||||
_html2canvas.Util.getCSS = function (element, attribute, index) {
|
|
||||||
if (previousElement !== element) {
|
|
||||||
computedCSS = document.defaultView.getComputedStyle(element, null);
|
|
||||||
}
|
|
||||||
|
|
||||||
var value = computedCSS[attribute];
|
|
||||||
|
|
||||||
if (/^background(Size|Position)$/.test(attribute)) {
|
|
||||||
return parseBackgroundSizePosition(value, element, attribute, index);
|
|
||||||
} else if (/border(Top|Bottom)(Left|Right)Radius/.test(attribute)) {
|
|
||||||
var arr = value.split(" ");
|
|
||||||
if (arr.length <= 1) {
|
|
||||||
arr[1] = arr[0];
|
|
||||||
}
|
|
||||||
return arr.map(asInt);
|
|
||||||
}
|
|
||||||
|
|
||||||
return value;
|
|
||||||
};
|
|
||||||
|
|
||||||
_html2canvas.Util.resizeBounds = function( current_width, current_height, target_width, target_height, stretch_mode ){
|
|
||||||
var target_ratio = target_width / target_height,
|
|
||||||
current_ratio = current_width / current_height,
|
|
||||||
output_width, output_height;
|
|
||||||
|
|
||||||
if(!stretch_mode || stretch_mode === 'auto') {
|
|
||||||
output_width = target_width;
|
|
||||||
output_height = target_height;
|
|
||||||
} else if(target_ratio < current_ratio ^ stretch_mode === 'contain') {
|
|
||||||
output_height = target_height;
|
|
||||||
output_width = target_height * current_ratio;
|
|
||||||
} else {
|
|
||||||
output_width = target_width;
|
|
||||||
output_height = target_width / current_ratio;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
width: output_width,
|
|
||||||
height: output_height
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
_html2canvas.Util.BackgroundPosition = function(element, bounds, image, imageIndex, backgroundSize ) {
|
|
||||||
var backgroundPosition = _html2canvas.Util.getCSS(element, 'backgroundPosition', imageIndex),
|
|
||||||
leftPosition,
|
|
||||||
topPosition;
|
|
||||||
if (backgroundPosition.length === 1){
|
|
||||||
backgroundPosition = [backgroundPosition[0], backgroundPosition[0]];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isPercentage(backgroundPosition[0])){
|
|
||||||
leftPosition = (bounds.width - (backgroundSize || image).width) * (parseFloat(backgroundPosition[0]) / 100);
|
|
||||||
} else {
|
|
||||||
leftPosition = parseInt(backgroundPosition[0], 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (backgroundPosition[1] === 'auto') {
|
|
||||||
topPosition = leftPosition / image.width * image.height;
|
|
||||||
} else if (isPercentage(backgroundPosition[1])){
|
|
||||||
topPosition = (bounds.height - (backgroundSize || image).height) * parseFloat(backgroundPosition[1]) / 100;
|
|
||||||
} else {
|
|
||||||
topPosition = parseInt(backgroundPosition[1], 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (backgroundPosition[0] === 'auto') {
|
|
||||||
leftPosition = topPosition / image.height * image.width;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {left: leftPosition, top: topPosition};
|
|
||||||
};
|
|
||||||
|
|
||||||
_html2canvas.Util.BackgroundSize = function(element, bounds, image, imageIndex) {
|
|
||||||
var backgroundSize = _html2canvas.Util.getCSS(element, 'backgroundSize', imageIndex), width, height;
|
|
||||||
|
|
||||||
if (backgroundSize.length === 1) {
|
|
||||||
backgroundSize = [backgroundSize[0], backgroundSize[0]];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isPercentage(backgroundSize[0])) {
|
|
||||||
width = bounds.width * parseFloat(backgroundSize[0]) / 100;
|
|
||||||
} else if (/contain|cover/.test(backgroundSize[0])) {
|
|
||||||
return _html2canvas.Util.resizeBounds(image.width, image.height, bounds.width, bounds.height, backgroundSize[0]);
|
|
||||||
} else {
|
|
||||||
width = parseInt(backgroundSize[0], 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (backgroundSize[0] === 'auto' && backgroundSize[1] === 'auto') {
|
|
||||||
height = image.height;
|
|
||||||
} else if (backgroundSize[1] === 'auto') {
|
|
||||||
height = width / image.width * image.height;
|
|
||||||
} else if (isPercentage(backgroundSize[1])) {
|
|
||||||
height = bounds.height * parseFloat(backgroundSize[1]) / 100;
|
|
||||||
} else {
|
|
||||||
height = parseInt(backgroundSize[1], 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (backgroundSize[0] === 'auto') {
|
|
||||||
width = height / image.height * image.width;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {width: width, height: height};
|
|
||||||
};
|
|
||||||
|
|
||||||
_html2canvas.Util.BackgroundRepeat = function(element, imageIndex) {
|
|
||||||
var backgroundRepeat = _html2canvas.Util.getCSS(element, "backgroundRepeat").split(",").map(_html2canvas.Util.trimText);
|
|
||||||
return backgroundRepeat[imageIndex] || backgroundRepeat[0];
|
|
||||||
};
|
|
||||||
|
|
||||||
_html2canvas.Util.Extend = function (options, defaults) {
|
|
||||||
for (var key in options) {
|
|
||||||
if (options.hasOwnProperty(key)) {
|
|
||||||
defaults[key] = options[key];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return defaults;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Derived from jQuery.contents()
|
|
||||||
* Copyright 2010, John Resig
|
|
||||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
|
||||||
* http://jquery.org/license
|
|
||||||
*/
|
|
||||||
_html2canvas.Util.Children = function( elem ) {
|
|
||||||
var children;
|
|
||||||
try {
|
|
||||||
children = (elem.nodeName && elem.nodeName.toUpperCase() === "IFRAME") ? elem.contentDocument || elem.contentWindow.document : (function(array) {
|
|
||||||
var ret = [];
|
|
||||||
if (array !== null) {
|
|
||||||
(function(first, second ) {
|
|
||||||
var i = first.length,
|
|
||||||
j = 0;
|
|
||||||
|
|
||||||
if (typeof second.length === "number") {
|
|
||||||
for (var l = second.length; j < l; j++) {
|
|
||||||
first[i++] = second[j];
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
while (second[j] !== undefined) {
|
|
||||||
first[i++] = second[j++];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
first.length = i;
|
|
||||||
|
|
||||||
return first;
|
|
||||||
})(ret, array);
|
|
||||||
}
|
|
||||||
return ret;
|
|
||||||
})(elem.childNodes);
|
|
||||||
|
|
||||||
} catch (ex) {
|
|
||||||
_html2canvas.Util.log("html2canvas.Util.Children failed with exception: " + ex.message);
|
|
||||||
children = [];
|
|
||||||
}
|
|
||||||
return children;
|
|
||||||
};
|
|
||||||
|
|
||||||
_html2canvas.Util.isTransparent = function(backgroundColor) {
|
|
||||||
return (!backgroundColor || backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
|
|
||||||
};
|
|
||||||
64
src/Font.js
64
src/Font.js
@ -1,64 +0,0 @@
|
|||||||
_html2canvas.Util.Font = (function () {
|
|
||||||
|
|
||||||
var fontData = {};
|
|
||||||
|
|
||||||
return function(font, fontSize, doc) {
|
|
||||||
if (fontData[font + "-" + fontSize] !== undefined) {
|
|
||||||
return fontData[font + "-" + fontSize];
|
|
||||||
}
|
|
||||||
|
|
||||||
var container = doc.createElement('div'),
|
|
||||||
img = doc.createElement('img'),
|
|
||||||
span = doc.createElement('span'),
|
|
||||||
sampleText = 'Hidden Text',
|
|
||||||
baseline,
|
|
||||||
middle,
|
|
||||||
metricsObj;
|
|
||||||
|
|
||||||
container.style.visibility = "hidden";
|
|
||||||
container.style.fontFamily = font;
|
|
||||||
container.style.fontSize = fontSize;
|
|
||||||
container.style.margin = 0;
|
|
||||||
container.style.padding = 0;
|
|
||||||
|
|
||||||
doc.body.appendChild(container);
|
|
||||||
|
|
||||||
// http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever (handtinywhite.gif)
|
|
||||||
img.src = "data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=";
|
|
||||||
img.width = 1;
|
|
||||||
img.height = 1;
|
|
||||||
|
|
||||||
img.style.margin = 0;
|
|
||||||
img.style.padding = 0;
|
|
||||||
img.style.verticalAlign = "baseline";
|
|
||||||
|
|
||||||
span.style.fontFamily = font;
|
|
||||||
span.style.fontSize = fontSize;
|
|
||||||
span.style.margin = 0;
|
|
||||||
span.style.padding = 0;
|
|
||||||
|
|
||||||
span.appendChild(doc.createTextNode(sampleText));
|
|
||||||
container.appendChild(span);
|
|
||||||
container.appendChild(img);
|
|
||||||
baseline = (img.offsetTop - span.offsetTop) + 1;
|
|
||||||
|
|
||||||
container.removeChild(span);
|
|
||||||
container.appendChild(doc.createTextNode(sampleText));
|
|
||||||
|
|
||||||
container.style.lineHeight = "normal";
|
|
||||||
img.style.verticalAlign = "super";
|
|
||||||
|
|
||||||
middle = (img.offsetTop-container.offsetTop) + 1;
|
|
||||||
metricsObj = {
|
|
||||||
baseline: baseline,
|
|
||||||
lineWidth: 1,
|
|
||||||
middle: middle
|
|
||||||
};
|
|
||||||
|
|
||||||
fontData[font + "-" + fontSize] = metricsObj;
|
|
||||||
|
|
||||||
doc.body.removeChild(container);
|
|
||||||
|
|
||||||
return metricsObj;
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
424
src/Generate.js
424
src/Generate.js
@ -1,424 +0,0 @@
|
|||||||
(function(){
|
|
||||||
var Util = _html2canvas.Util,
|
|
||||||
Generate = {};
|
|
||||||
|
|
||||||
_html2canvas.Generate = Generate;
|
|
||||||
|
|
||||||
var reGradients = [
|
|
||||||
/^(-webkit-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,
|
|
||||||
/^(-o-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,
|
|
||||||
/^(-webkit-gradient)\((linear|radial),\s((?:\d{1,3}%?)\s(?:\d{1,3}%?),\s(?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)\-]+)\)$/,
|
|
||||||
/^(-moz-linear-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)]+)\)$/,
|
|
||||||
/^(-webkit-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z\-]+)([\w\d\.\s,%\(\)]+)\)$/,
|
|
||||||
/^(-moz-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s?([a-z\-]*)([\w\d\.\s,%\(\)]+)\)$/,
|
|
||||||
/^(-o-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z\-]+)([\w\d\.\s,%\(\)]+)\)$/
|
|
||||||
];
|
|
||||||
|
|
||||||
/*
|
|
||||||
* TODO: Add IE10 vendor prefix (-ms) support
|
|
||||||
* TODO: Add W3C gradient (linear-gradient) support
|
|
||||||
* TODO: Add old Webkit -webkit-gradient(radial, ...) support
|
|
||||||
* TODO: Maybe some RegExp optimizations are possible ;o)
|
|
||||||
*/
|
|
||||||
Generate.parseGradient = function(css, bounds) {
|
|
||||||
var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3, tl,tr,br,bl;
|
|
||||||
|
|
||||||
for(i = 0; i < len; i+=1){
|
|
||||||
m1 = css.match(reGradients[i]);
|
|
||||||
if(m1) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if(m1) {
|
|
||||||
switch(m1[1]) {
|
|
||||||
case '-webkit-linear-gradient':
|
|
||||||
case '-o-linear-gradient':
|
|
||||||
|
|
||||||
gradient = {
|
|
||||||
type: 'linear',
|
|
||||||
x0: null,
|
|
||||||
y0: null,
|
|
||||||
x1: null,
|
|
||||||
y1: null,
|
|
||||||
colorStops: []
|
|
||||||
};
|
|
||||||
|
|
||||||
// get coordinates
|
|
||||||
m2 = m1[2].match(/\w+/g);
|
|
||||||
if(m2){
|
|
||||||
m2Len = m2.length;
|
|
||||||
for(i = 0; i < m2Len; i+=1){
|
|
||||||
switch(m2[i]) {
|
|
||||||
case 'top':
|
|
||||||
gradient.y0 = 0;
|
|
||||||
gradient.y1 = bounds.height;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'right':
|
|
||||||
gradient.x0 = bounds.width;
|
|
||||||
gradient.x1 = 0;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'bottom':
|
|
||||||
gradient.y0 = bounds.height;
|
|
||||||
gradient.y1 = 0;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'left':
|
|
||||||
gradient.x0 = 0;
|
|
||||||
gradient.x1 = bounds.width;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(gradient.x0 === null && gradient.x1 === null){ // center
|
|
||||||
gradient.x0 = gradient.x1 = bounds.width / 2;
|
|
||||||
}
|
|
||||||
if(gradient.y0 === null && gradient.y1 === null){ // center
|
|
||||||
gradient.y0 = gradient.y1 = bounds.height / 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
// get colors and stops
|
|
||||||
m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/g);
|
|
||||||
if(m2){
|
|
||||||
m2Len = m2.length;
|
|
||||||
step = 1 / Math.max(m2Len - 1, 1);
|
|
||||||
for(i = 0; i < m2Len; i+=1){
|
|
||||||
m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/);
|
|
||||||
if(m3[2]){
|
|
||||||
stop = parseFloat(m3[2]);
|
|
||||||
if(m3[3] === '%'){
|
|
||||||
stop /= 100;
|
|
||||||
} else { // px - stupid opera
|
|
||||||
stop /= bounds.width;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
stop = i * step;
|
|
||||||
}
|
|
||||||
gradient.colorStops.push({
|
|
||||||
color: m3[1],
|
|
||||||
stop: stop
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case '-webkit-gradient':
|
|
||||||
|
|
||||||
gradient = {
|
|
||||||
type: m1[2] === 'radial' ? 'circle' : m1[2], // TODO: Add radial gradient support for older mozilla definitions
|
|
||||||
x0: 0,
|
|
||||||
y0: 0,
|
|
||||||
x1: 0,
|
|
||||||
y1: 0,
|
|
||||||
colorStops: []
|
|
||||||
};
|
|
||||||
|
|
||||||
// get coordinates
|
|
||||||
m2 = m1[3].match(/(\d{1,3})%?\s(\d{1,3})%?,\s(\d{1,3})%?\s(\d{1,3})%?/);
|
|
||||||
if(m2){
|
|
||||||
gradient.x0 = (m2[1] * bounds.width) / 100;
|
|
||||||
gradient.y0 = (m2[2] * bounds.height) / 100;
|
|
||||||
gradient.x1 = (m2[3] * bounds.width) / 100;
|
|
||||||
gradient.y1 = (m2[4] * bounds.height) / 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
// get colors and stops
|
|
||||||
m2 = m1[4].match(/((?:from|to|color-stop)\((?:[0-9\.]+,\s)?(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)\))+/g);
|
|
||||||
if(m2){
|
|
||||||
m2Len = m2.length;
|
|
||||||
for(i = 0; i < m2Len; i+=1){
|
|
||||||
m3 = m2[i].match(/(from|to|color-stop)\(([0-9\.]+)?(?:,\s)?((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\)/);
|
|
||||||
stop = parseFloat(m3[2]);
|
|
||||||
if(m3[1] === 'from') {
|
|
||||||
stop = 0.0;
|
|
||||||
}
|
|
||||||
if(m3[1] === 'to') {
|
|
||||||
stop = 1.0;
|
|
||||||
}
|
|
||||||
gradient.colorStops.push({
|
|
||||||
color: m3[3],
|
|
||||||
stop: stop
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case '-moz-linear-gradient':
|
|
||||||
|
|
||||||
gradient = {
|
|
||||||
type: 'linear',
|
|
||||||
x0: 0,
|
|
||||||
y0: 0,
|
|
||||||
x1: 0,
|
|
||||||
y1: 0,
|
|
||||||
colorStops: []
|
|
||||||
};
|
|
||||||
|
|
||||||
// get coordinates
|
|
||||||
m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/);
|
|
||||||
|
|
||||||
// m2[1] == 0% -> left
|
|
||||||
// m2[1] == 50% -> center
|
|
||||||
// m2[1] == 100% -> right
|
|
||||||
|
|
||||||
// m2[2] == 0% -> top
|
|
||||||
// m2[2] == 50% -> center
|
|
||||||
// m2[2] == 100% -> bottom
|
|
||||||
|
|
||||||
if(m2){
|
|
||||||
gradient.x0 = (m2[1] * bounds.width) / 100;
|
|
||||||
gradient.y0 = (m2[2] * bounds.height) / 100;
|
|
||||||
gradient.x1 = bounds.width - gradient.x0;
|
|
||||||
gradient.y1 = bounds.height - gradient.y0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// get colors and stops
|
|
||||||
m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+/g);
|
|
||||||
if(m2){
|
|
||||||
m2Len = m2.length;
|
|
||||||
step = 1 / Math.max(m2Len - 1, 1);
|
|
||||||
for(i = 0; i < m2Len; i+=1){
|
|
||||||
m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%)?/);
|
|
||||||
if(m3[2]){
|
|
||||||
stop = parseFloat(m3[2]);
|
|
||||||
if(m3[3]){ // percentage
|
|
||||||
stop /= 100;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
stop = i * step;
|
|
||||||
}
|
|
||||||
gradient.colorStops.push({
|
|
||||||
color: m3[1],
|
|
||||||
stop: stop
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case '-webkit-radial-gradient':
|
|
||||||
case '-moz-radial-gradient':
|
|
||||||
case '-o-radial-gradient':
|
|
||||||
|
|
||||||
gradient = {
|
|
||||||
type: 'circle',
|
|
||||||
x0: 0,
|
|
||||||
y0: 0,
|
|
||||||
x1: bounds.width,
|
|
||||||
y1: bounds.height,
|
|
||||||
cx: 0,
|
|
||||||
cy: 0,
|
|
||||||
rx: 0,
|
|
||||||
ry: 0,
|
|
||||||
colorStops: []
|
|
||||||
};
|
|
||||||
|
|
||||||
// center
|
|
||||||
m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/);
|
|
||||||
if(m2){
|
|
||||||
gradient.cx = (m2[1] * bounds.width) / 100;
|
|
||||||
gradient.cy = (m2[2] * bounds.height) / 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
// size
|
|
||||||
m2 = m1[3].match(/\w+/);
|
|
||||||
m3 = m1[4].match(/[a-z\-]*/);
|
|
||||||
if(m2 && m3){
|
|
||||||
switch(m3[0]){
|
|
||||||
case 'farthest-corner':
|
|
||||||
case 'cover': // is equivalent to farthest-corner
|
|
||||||
case '': // mozilla removes "cover" from definition :(
|
|
||||||
tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2));
|
|
||||||
tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
|
|
||||||
br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
|
|
||||||
bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2));
|
|
||||||
gradient.rx = gradient.ry = Math.max(tl, tr, br, bl);
|
|
||||||
break;
|
|
||||||
case 'closest-corner':
|
|
||||||
tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2));
|
|
||||||
tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
|
|
||||||
br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
|
|
||||||
bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2));
|
|
||||||
gradient.rx = gradient.ry = Math.min(tl, tr, br, bl);
|
|
||||||
break;
|
|
||||||
case 'farthest-side':
|
|
||||||
if(m2[0] === 'circle'){
|
|
||||||
gradient.rx = gradient.ry = Math.max(
|
|
||||||
gradient.cx,
|
|
||||||
gradient.cy,
|
|
||||||
gradient.x1 - gradient.cx,
|
|
||||||
gradient.y1 - gradient.cy
|
|
||||||
);
|
|
||||||
} else { // ellipse
|
|
||||||
|
|
||||||
gradient.type = m2[0];
|
|
||||||
|
|
||||||
gradient.rx = Math.max(
|
|
||||||
gradient.cx,
|
|
||||||
gradient.x1 - gradient.cx
|
|
||||||
);
|
|
||||||
gradient.ry = Math.max(
|
|
||||||
gradient.cy,
|
|
||||||
gradient.y1 - gradient.cy
|
|
||||||
);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'closest-side':
|
|
||||||
case 'contain': // is equivalent to closest-side
|
|
||||||
if(m2[0] === 'circle'){
|
|
||||||
gradient.rx = gradient.ry = Math.min(
|
|
||||||
gradient.cx,
|
|
||||||
gradient.cy,
|
|
||||||
gradient.x1 - gradient.cx,
|
|
||||||
gradient.y1 - gradient.cy
|
|
||||||
);
|
|
||||||
} else { // ellipse
|
|
||||||
|
|
||||||
gradient.type = m2[0];
|
|
||||||
|
|
||||||
gradient.rx = Math.min(
|
|
||||||
gradient.cx,
|
|
||||||
gradient.x1 - gradient.cx
|
|
||||||
);
|
|
||||||
gradient.ry = Math.min(
|
|
||||||
gradient.cy,
|
|
||||||
gradient.y1 - gradient.cy
|
|
||||||
);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
// TODO: add support for "30px 40px" sizes (webkit only)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// color stops
|
|
||||||
m2 = m1[5].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/g);
|
|
||||||
if(m2){
|
|
||||||
m2Len = m2.length;
|
|
||||||
step = 1 / Math.max(m2Len - 1, 1);
|
|
||||||
for(i = 0; i < m2Len; i+=1){
|
|
||||||
m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/);
|
|
||||||
if(m3[2]){
|
|
||||||
stop = parseFloat(m3[2]);
|
|
||||||
if(m3[3] === '%'){
|
|
||||||
stop /= 100;
|
|
||||||
} else { // px - stupid opera
|
|
||||||
stop /= bounds.width;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
stop = i * step;
|
|
||||||
}
|
|
||||||
gradient.colorStops.push({
|
|
||||||
color: m3[1],
|
|
||||||
stop: stop
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return gradient;
|
|
||||||
};
|
|
||||||
|
|
||||||
function addScrollStops(grad) {
|
|
||||||
return function(colorStop) {
|
|
||||||
try {
|
|
||||||
grad.addColorStop(colorStop.stop, colorStop.color);
|
|
||||||
}
|
|
||||||
catch(e) {
|
|
||||||
Util.log(['failed to add color stop: ', e, '; tried to add: ', colorStop]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
Generate.Gradient = function(src, bounds) {
|
|
||||||
if(bounds.width === 0 || bounds.height === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var canvas = document.createElement('canvas'),
|
|
||||||
ctx = canvas.getContext('2d'),
|
|
||||||
gradient, grad;
|
|
||||||
|
|
||||||
canvas.width = bounds.width;
|
|
||||||
canvas.height = bounds.height;
|
|
||||||
|
|
||||||
// TODO: add support for multi defined background gradients
|
|
||||||
gradient = _html2canvas.Generate.parseGradient(src, bounds);
|
|
||||||
|
|
||||||
if(gradient) {
|
|
||||||
switch(gradient.type) {
|
|
||||||
case 'linear':
|
|
||||||
grad = ctx.createLinearGradient(gradient.x0, gradient.y0, gradient.x1, gradient.y1);
|
|
||||||
gradient.colorStops.forEach(addScrollStops(grad));
|
|
||||||
ctx.fillStyle = grad;
|
|
||||||
ctx.fillRect(0, 0, bounds.width, bounds.height);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'circle':
|
|
||||||
grad = ctx.createRadialGradient(gradient.cx, gradient.cy, 0, gradient.cx, gradient.cy, gradient.rx);
|
|
||||||
gradient.colorStops.forEach(addScrollStops(grad));
|
|
||||||
ctx.fillStyle = grad;
|
|
||||||
ctx.fillRect(0, 0, bounds.width, bounds.height);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'ellipse':
|
|
||||||
var canvasRadial = document.createElement('canvas'),
|
|
||||||
ctxRadial = canvasRadial.getContext('2d'),
|
|
||||||
ri = Math.max(gradient.rx, gradient.ry),
|
|
||||||
di = ri * 2;
|
|
||||||
|
|
||||||
canvasRadial.width = canvasRadial.height = di;
|
|
||||||
|
|
||||||
grad = ctxRadial.createRadialGradient(gradient.rx, gradient.ry, 0, gradient.rx, gradient.ry, ri);
|
|
||||||
gradient.colorStops.forEach(addScrollStops(grad));
|
|
||||||
|
|
||||||
ctxRadial.fillStyle = grad;
|
|
||||||
ctxRadial.fillRect(0, 0, di, di);
|
|
||||||
|
|
||||||
ctx.fillStyle = gradient.colorStops[gradient.colorStops.length - 1].color;
|
|
||||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
||||||
ctx.drawImage(canvasRadial, gradient.cx - gradient.rx, gradient.cy - gradient.ry, 2 * gradient.rx, 2 * gradient.ry);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return canvas;
|
|
||||||
};
|
|
||||||
|
|
||||||
Generate.ListAlpha = function(number) {
|
|
||||||
var tmp = "",
|
|
||||||
modulus;
|
|
||||||
|
|
||||||
do {
|
|
||||||
modulus = number % 26;
|
|
||||||
tmp = String.fromCharCode((modulus) + 64) + tmp;
|
|
||||||
number = number / 26;
|
|
||||||
}while((number*26) > 26);
|
|
||||||
|
|
||||||
return tmp;
|
|
||||||
};
|
|
||||||
|
|
||||||
Generate.ListRoman = function(number) {
|
|
||||||
var romanArray = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"],
|
|
||||||
decimal = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1],
|
|
||||||
roman = "",
|
|
||||||
v,
|
|
||||||
len = romanArray.length;
|
|
||||||
|
|
||||||
if (number <= 0 || number >= 4000) {
|
|
||||||
return number;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (v=0; v < len; v+=1) {
|
|
||||||
while (number >= decimal[v]) {
|
|
||||||
number -= decimal[v];
|
|
||||||
roman += romanArray[v];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return roman;
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
1276
src/Parse.js
1276
src/Parse.js
File diff suppressed because it is too large
Load Diff
317
src/Preload.js
317
src/Preload.js
@ -1,317 +0,0 @@
|
|||||||
_html2canvas.Preload = function( options ) {
|
|
||||||
|
|
||||||
var images = {
|
|
||||||
numLoaded: 0, // also failed are counted here
|
|
||||||
numFailed: 0,
|
|
||||||
numTotal: 0,
|
|
||||||
cleanupDone: false
|
|
||||||
},
|
|
||||||
pageOrigin,
|
|
||||||
Util = _html2canvas.Util,
|
|
||||||
methods,
|
|
||||||
i,
|
|
||||||
count = 0,
|
|
||||||
element = options.elements[0] || document.body,
|
|
||||||
doc = element.ownerDocument,
|
|
||||||
domImages = element.getElementsByTagName('img'), // Fetch images of the present element only
|
|
||||||
imgLen = domImages.length,
|
|
||||||
link = doc.createElement("a"),
|
|
||||||
supportCORS = (function( img ){
|
|
||||||
return (img.crossOrigin !== undefined);
|
|
||||||
})(new Image()),
|
|
||||||
timeoutTimer;
|
|
||||||
|
|
||||||
link.href = window.location.href;
|
|
||||||
pageOrigin = link.protocol + link.host;
|
|
||||||
|
|
||||||
function isSameOrigin(url){
|
|
||||||
link.href = url;
|
|
||||||
link.href = link.href; // YES, BELIEVE IT OR NOT, that is required for IE9 - http://jsfiddle.net/niklasvh/2e48b/
|
|
||||||
var origin = link.protocol + link.host;
|
|
||||||
return (origin === pageOrigin);
|
|
||||||
}
|
|
||||||
|
|
||||||
function start(){
|
|
||||||
Util.log("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")");
|
|
||||||
if (!images.firstRun && images.numLoaded >= images.numTotal){
|
|
||||||
Util.log("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")");
|
|
||||||
|
|
||||||
if (typeof options.complete === "function"){
|
|
||||||
options.complete(images);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO modify proxy to serve images with CORS enabled, where available
|
|
||||||
function proxyGetImage(url, img, imageObj){
|
|
||||||
var callback_name,
|
|
||||||
scriptUrl = options.proxy,
|
|
||||||
script;
|
|
||||||
|
|
||||||
link.href = url;
|
|
||||||
url = link.href; // work around for pages with base href="" set - WARNING: this may change the url
|
|
||||||
|
|
||||||
callback_name = 'html2canvas_' + (count++);
|
|
||||||
imageObj.callbackname = callback_name;
|
|
||||||
|
|
||||||
if (scriptUrl.indexOf("?") > -1) {
|
|
||||||
scriptUrl += "&";
|
|
||||||
} else {
|
|
||||||
scriptUrl += "?";
|
|
||||||
}
|
|
||||||
scriptUrl += 'url=' + encodeURIComponent(url) + '&callback=' + callback_name;
|
|
||||||
script = doc.createElement("script");
|
|
||||||
|
|
||||||
window[callback_name] = function(a){
|
|
||||||
if (a.substring(0,6) === "error:"){
|
|
||||||
imageObj.succeeded = false;
|
|
||||||
images.numLoaded++;
|
|
||||||
images.numFailed++;
|
|
||||||
start();
|
|
||||||
} else {
|
|
||||||
setImageLoadHandlers(img, imageObj);
|
|
||||||
img.src = a;
|
|
||||||
}
|
|
||||||
window[callback_name] = undefined; // to work with IE<9 // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
|
|
||||||
try {
|
|
||||||
delete window[callback_name]; // for all browser that support this
|
|
||||||
} catch(ex) {}
|
|
||||||
script.parentNode.removeChild(script);
|
|
||||||
script = null;
|
|
||||||
delete imageObj.script;
|
|
||||||
delete imageObj.callbackname;
|
|
||||||
};
|
|
||||||
|
|
||||||
script.setAttribute("type", "text/javascript");
|
|
||||||
script.setAttribute("src", scriptUrl);
|
|
||||||
imageObj.script = script;
|
|
||||||
window.document.body.appendChild(script);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadPseudoElement(element, type) {
|
|
||||||
var style = window.getComputedStyle(element, type),
|
|
||||||
content = style.content;
|
|
||||||
if (content.substr(0, 3) === 'url') {
|
|
||||||
methods.loadImage(_html2canvas.Util.parseBackgroundImage(content)[0].args[0]);
|
|
||||||
}
|
|
||||||
loadBackgroundImages(style.backgroundImage, element);
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadPseudoElementImages(element) {
|
|
||||||
loadPseudoElement(element, ":before");
|
|
||||||
loadPseudoElement(element, ":after");
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadGradientImage(backgroundImage, bounds) {
|
|
||||||
var img = _html2canvas.Generate.Gradient(backgroundImage, bounds);
|
|
||||||
|
|
||||||
if (img !== undefined){
|
|
||||||
images[backgroundImage] = {
|
|
||||||
img: img,
|
|
||||||
succeeded: true
|
|
||||||
};
|
|
||||||
images.numTotal++;
|
|
||||||
images.numLoaded++;
|
|
||||||
start();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function invalidBackgrounds(background_image) {
|
|
||||||
return (background_image && background_image.method && background_image.args && background_image.args.length > 0 );
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadBackgroundImages(background_image, el) {
|
|
||||||
var bounds;
|
|
||||||
|
|
||||||
_html2canvas.Util.parseBackgroundImage(background_image).filter(invalidBackgrounds).forEach(function(background_image) {
|
|
||||||
if (background_image.method === 'url') {
|
|
||||||
methods.loadImage(background_image.args[0]);
|
|
||||||
} else if(background_image.method.match(/\-?gradient$/)) {
|
|
||||||
if(bounds === undefined) {
|
|
||||||
bounds = _html2canvas.Util.Bounds(el);
|
|
||||||
}
|
|
||||||
loadGradientImage(background_image.value, bounds);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function getImages (el) {
|
|
||||||
var elNodeType = false;
|
|
||||||
|
|
||||||
// Firefox fails with permission denied on pages with iframes
|
|
||||||
try {
|
|
||||||
Util.Children(el).forEach(getImages);
|
|
||||||
}
|
|
||||||
catch( e ) {}
|
|
||||||
|
|
||||||
try {
|
|
||||||
elNodeType = el.nodeType;
|
|
||||||
} catch (ex) {
|
|
||||||
elNodeType = false;
|
|
||||||
Util.log("html2canvas: failed to access some element's nodeType - Exception: " + ex.message);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (elNodeType === 1 || elNodeType === undefined) {
|
|
||||||
loadPseudoElementImages(el);
|
|
||||||
try {
|
|
||||||
loadBackgroundImages(Util.getCSS(el, 'backgroundImage'), el);
|
|
||||||
} catch(e) {
|
|
||||||
Util.log("html2canvas: failed to get background-image - Exception: " + e.message);
|
|
||||||
}
|
|
||||||
loadBackgroundImages(el);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setImageLoadHandlers(img, imageObj) {
|
|
||||||
img.onload = function() {
|
|
||||||
if ( imageObj.timer !== undefined ) {
|
|
||||||
// CORS succeeded
|
|
||||||
window.clearTimeout( imageObj.timer );
|
|
||||||
}
|
|
||||||
|
|
||||||
images.numLoaded++;
|
|
||||||
imageObj.succeeded = true;
|
|
||||||
img.onerror = img.onload = null;
|
|
||||||
start();
|
|
||||||
};
|
|
||||||
img.onerror = function() {
|
|
||||||
if (img.crossOrigin === "anonymous") {
|
|
||||||
// CORS failed
|
|
||||||
window.clearTimeout( imageObj.timer );
|
|
||||||
|
|
||||||
// let's try with proxy instead
|
|
||||||
if ( options.proxy ) {
|
|
||||||
var src = img.src;
|
|
||||||
img = new Image();
|
|
||||||
imageObj.img = img;
|
|
||||||
img.src = src;
|
|
||||||
|
|
||||||
proxyGetImage( img.src, img, imageObj );
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
images.numLoaded++;
|
|
||||||
images.numFailed++;
|
|
||||||
imageObj.succeeded = false;
|
|
||||||
img.onerror = img.onload = null;
|
|
||||||
start();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
methods = {
|
|
||||||
loadImage: function( src ) {
|
|
||||||
var img, imageObj;
|
|
||||||
if ( src && images[src] === undefined ) {
|
|
||||||
img = new Image();
|
|
||||||
if ( src.match(/data:image\/.*;base64,/i) ) {
|
|
||||||
img.src = src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, '');
|
|
||||||
imageObj = images[src] = {
|
|
||||||
img: img
|
|
||||||
};
|
|
||||||
images.numTotal++;
|
|
||||||
setImageLoadHandlers(img, imageObj);
|
|
||||||
} else if ( isSameOrigin( src ) || options.allowTaint === true ) {
|
|
||||||
imageObj = images[src] = {
|
|
||||||
img: img
|
|
||||||
};
|
|
||||||
images.numTotal++;
|
|
||||||
setImageLoadHandlers(img, imageObj);
|
|
||||||
img.src = src;
|
|
||||||
} else if ( supportCORS && !options.allowTaint && options.useCORS ) {
|
|
||||||
// attempt to load with CORS
|
|
||||||
|
|
||||||
img.crossOrigin = "anonymous";
|
|
||||||
imageObj = images[src] = {
|
|
||||||
img: img
|
|
||||||
};
|
|
||||||
images.numTotal++;
|
|
||||||
setImageLoadHandlers(img, imageObj);
|
|
||||||
img.src = src;
|
|
||||||
} else if ( options.proxy ) {
|
|
||||||
imageObj = images[src] = {
|
|
||||||
img: img
|
|
||||||
};
|
|
||||||
images.numTotal++;
|
|
||||||
proxyGetImage( src, img, imageObj );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
cleanupDOM: function(cause) {
|
|
||||||
var img, src;
|
|
||||||
if (!images.cleanupDone) {
|
|
||||||
if (cause && typeof cause === "string") {
|
|
||||||
Util.log("html2canvas: Cleanup because: " + cause);
|
|
||||||
} else {
|
|
||||||
Util.log("html2canvas: Cleanup after timeout: " + options.timeout + " ms.");
|
|
||||||
}
|
|
||||||
|
|
||||||
for (src in images) {
|
|
||||||
if (images.hasOwnProperty(src)) {
|
|
||||||
img = images[src];
|
|
||||||
if (typeof img === "object" && img.callbackname && img.succeeded === undefined) {
|
|
||||||
// cancel proxy image request
|
|
||||||
window[img.callbackname] = undefined; // to work with IE<9 // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
|
|
||||||
try {
|
|
||||||
delete window[img.callbackname]; // for all browser that support this
|
|
||||||
} catch(ex) {}
|
|
||||||
if (img.script && img.script.parentNode) {
|
|
||||||
img.script.setAttribute("src", "about:blank"); // try to cancel running request
|
|
||||||
img.script.parentNode.removeChild(img.script);
|
|
||||||
}
|
|
||||||
images.numLoaded++;
|
|
||||||
images.numFailed++;
|
|
||||||
Util.log("html2canvas: Cleaned up failed img: '" + src + "' Steps: " + images.numLoaded + " / " + images.numTotal);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// cancel any pending requests
|
|
||||||
if(window.stop !== undefined) {
|
|
||||||
window.stop();
|
|
||||||
} else if(document.execCommand !== undefined) {
|
|
||||||
document.execCommand("Stop", false);
|
|
||||||
}
|
|
||||||
if (document.close !== undefined) {
|
|
||||||
document.close();
|
|
||||||
}
|
|
||||||
images.cleanupDone = true;
|
|
||||||
if (!(cause && typeof cause === "string")) {
|
|
||||||
start();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
renderingDone: function() {
|
|
||||||
if (timeoutTimer) {
|
|
||||||
window.clearTimeout(timeoutTimer);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (options.timeout > 0) {
|
|
||||||
timeoutTimer = window.setTimeout(methods.cleanupDOM, options.timeout);
|
|
||||||
}
|
|
||||||
|
|
||||||
Util.log('html2canvas: Preload starts: finding background-images');
|
|
||||||
images.firstRun = true;
|
|
||||||
|
|
||||||
getImages(element);
|
|
||||||
|
|
||||||
Util.log('html2canvas: Preload: Finding images');
|
|
||||||
// load <img> images
|
|
||||||
for (i = 0; i < imgLen; i+=1){
|
|
||||||
methods.loadImage( domImages[i].getAttribute( "src" ) );
|
|
||||||
}
|
|
||||||
|
|
||||||
images.firstRun = false;
|
|
||||||
Util.log('html2canvas: Preload: Done.');
|
|
||||||
if (images.numTotal === images.numLoaded) {
|
|
||||||
start();
|
|
||||||
}
|
|
||||||
|
|
||||||
return methods;
|
|
||||||
};
|
|
||||||
123
src/Queue.js
123
src/Queue.js
@ -1,123 +0,0 @@
|
|||||||
function h2cRenderContext(width, height) {
|
|
||||||
var storage = [];
|
|
||||||
return {
|
|
||||||
storage: storage,
|
|
||||||
width: width,
|
|
||||||
height: height,
|
|
||||||
clip: function() {
|
|
||||||
storage.push({
|
|
||||||
type: "function",
|
|
||||||
name: "clip",
|
|
||||||
'arguments': arguments
|
|
||||||
});
|
|
||||||
},
|
|
||||||
translate: function() {
|
|
||||||
storage.push({
|
|
||||||
type: "function",
|
|
||||||
name: "translate",
|
|
||||||
'arguments': arguments
|
|
||||||
});
|
|
||||||
},
|
|
||||||
fill: function() {
|
|
||||||
storage.push({
|
|
||||||
type: "function",
|
|
||||||
name: "fill",
|
|
||||||
'arguments': arguments
|
|
||||||
});
|
|
||||||
},
|
|
||||||
save: function() {
|
|
||||||
storage.push({
|
|
||||||
type: "function",
|
|
||||||
name: "save",
|
|
||||||
'arguments': arguments
|
|
||||||
});
|
|
||||||
},
|
|
||||||
restore: function() {
|
|
||||||
storage.push({
|
|
||||||
type: "function",
|
|
||||||
name: "restore",
|
|
||||||
'arguments': arguments
|
|
||||||
});
|
|
||||||
},
|
|
||||||
fillRect: function () {
|
|
||||||
storage.push({
|
|
||||||
type: "function",
|
|
||||||
name: "fillRect",
|
|
||||||
'arguments': arguments
|
|
||||||
});
|
|
||||||
},
|
|
||||||
createPattern: function() {
|
|
||||||
storage.push({
|
|
||||||
type: "function",
|
|
||||||
name: "createPattern",
|
|
||||||
'arguments': arguments
|
|
||||||
});
|
|
||||||
},
|
|
||||||
drawShape: function() {
|
|
||||||
|
|
||||||
var shape = [];
|
|
||||||
|
|
||||||
storage.push({
|
|
||||||
type: "function",
|
|
||||||
name: "drawShape",
|
|
||||||
'arguments': shape
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
moveTo: function() {
|
|
||||||
shape.push({
|
|
||||||
name: "moveTo",
|
|
||||||
'arguments': arguments
|
|
||||||
});
|
|
||||||
},
|
|
||||||
lineTo: function() {
|
|
||||||
shape.push({
|
|
||||||
name: "lineTo",
|
|
||||||
'arguments': arguments
|
|
||||||
});
|
|
||||||
},
|
|
||||||
arcTo: function() {
|
|
||||||
shape.push({
|
|
||||||
name: "arcTo",
|
|
||||||
'arguments': arguments
|
|
||||||
});
|
|
||||||
},
|
|
||||||
bezierCurveTo: function() {
|
|
||||||
shape.push({
|
|
||||||
name: "bezierCurveTo",
|
|
||||||
'arguments': arguments
|
|
||||||
});
|
|
||||||
},
|
|
||||||
quadraticCurveTo: function() {
|
|
||||||
shape.push({
|
|
||||||
name: "quadraticCurveTo",
|
|
||||||
'arguments': arguments
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
},
|
|
||||||
drawImage: function () {
|
|
||||||
storage.push({
|
|
||||||
type: "function",
|
|
||||||
name: "drawImage",
|
|
||||||
'arguments': arguments
|
|
||||||
});
|
|
||||||
},
|
|
||||||
fillText: function () {
|
|
||||||
storage.push({
|
|
||||||
type: "function",
|
|
||||||
name: "fillText",
|
|
||||||
'arguments': arguments
|
|
||||||
});
|
|
||||||
},
|
|
||||||
setVariable: function (variable, value) {
|
|
||||||
storage.push({
|
|
||||||
type: "variable",
|
|
||||||
name: variable,
|
|
||||||
'arguments': value
|
|
||||||
});
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
111
src/Renderer.js
111
src/Renderer.js
@ -1,111 +0,0 @@
|
|||||||
_html2canvas.Renderer = function(parseQueue, options){
|
|
||||||
function sortZindex(a, b) {
|
|
||||||
if (a === 'children') {
|
|
||||||
return -1;
|
|
||||||
} else if (b === 'children') {
|
|
||||||
return 1;
|
|
||||||
} else {
|
|
||||||
return a - b;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// http://www.w3.org/TR/CSS21/zindex.html
|
|
||||||
function createRenderQueue(parseQueue) {
|
|
||||||
var queue = [],
|
|
||||||
rootContext;
|
|
||||||
|
|
||||||
rootContext = (function buildStackingContext(rootNode) {
|
|
||||||
var rootContext = {};
|
|
||||||
function insert(context, node, specialParent) {
|
|
||||||
var zi = (node.zIndex.zindex === 'auto') ? 0 : Number(node.zIndex.zindex),
|
|
||||||
contextForChildren = context, // the stacking context for children
|
|
||||||
isPositioned = node.zIndex.isPositioned,
|
|
||||||
isFloated = node.zIndex.isFloated,
|
|
||||||
stub = {node: node},
|
|
||||||
childrenDest = specialParent; // where children without z-index should be pushed into
|
|
||||||
|
|
||||||
if (node.zIndex.ownStacking) {
|
|
||||||
contextForChildren = stub.context = {
|
|
||||||
children: [{node:node, children: []}]
|
|
||||||
};
|
|
||||||
childrenDest = undefined;
|
|
||||||
} else if (isPositioned || isFloated) {
|
|
||||||
childrenDest = stub.children = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (zi === 0 && specialParent) {
|
|
||||||
specialParent.push(stub);
|
|
||||||
} else {
|
|
||||||
if (!context[zi]) { context[zi] = []; }
|
|
||||||
context[zi].push(stub);
|
|
||||||
}
|
|
||||||
|
|
||||||
node.zIndex.children.forEach(function(childNode) {
|
|
||||||
insert(contextForChildren, childNode, childrenDest);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
insert(rootContext, rootNode);
|
|
||||||
return rootContext;
|
|
||||||
})(parseQueue);
|
|
||||||
|
|
||||||
function sortZ(context) {
|
|
||||||
Object.keys(context).sort(sortZindex).forEach(function(zi) {
|
|
||||||
var nonPositioned = [],
|
|
||||||
floated = [],
|
|
||||||
positioned = [],
|
|
||||||
list = [];
|
|
||||||
|
|
||||||
// positioned after static
|
|
||||||
context[zi].forEach(function(v) {
|
|
||||||
if (v.node.zIndex.isPositioned || v.node.zIndex.opacity < 1) {
|
|
||||||
// http://www.w3.org/TR/css3-color/#transparency
|
|
||||||
// non-positioned element with opactiy < 1 should be stacked as if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’.
|
|
||||||
positioned.push(v);
|
|
||||||
} else if (v.node.zIndex.isFloated) {
|
|
||||||
floated.push(v);
|
|
||||||
} else {
|
|
||||||
nonPositioned.push(v);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
(function walk(arr) {
|
|
||||||
arr.forEach(function(v) {
|
|
||||||
list.push(v);
|
|
||||||
if (v.children) { walk(v.children); }
|
|
||||||
});
|
|
||||||
})(nonPositioned.concat(floated, positioned));
|
|
||||||
|
|
||||||
list.forEach(function(v) {
|
|
||||||
if (v.context) {
|
|
||||||
sortZ(v.context);
|
|
||||||
} else {
|
|
||||||
queue.push(v.node);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
sortZ(rootContext);
|
|
||||||
|
|
||||||
return queue;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getRenderer(rendererName) {
|
|
||||||
var renderer;
|
|
||||||
|
|
||||||
if (typeof options.renderer === "string" && _html2canvas.Renderer[rendererName] !== undefined) {
|
|
||||||
renderer = _html2canvas.Renderer[rendererName](options);
|
|
||||||
} else if (typeof rendererName === "function") {
|
|
||||||
renderer = rendererName(options);
|
|
||||||
} else {
|
|
||||||
throw new Error("Unknown renderer");
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( typeof renderer !== "function" ) {
|
|
||||||
throw new Error("Invalid renderer defined");
|
|
||||||
}
|
|
||||||
return renderer;
|
|
||||||
}
|
|
||||||
|
|
||||||
return getRenderer(options.renderer)(parseQueue, options, document, createRenderQueue(parseQueue.stack), _html2canvas);
|
|
||||||
};
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
_html2canvas.Util.Support = function (options, doc) {
|
|
||||||
|
|
||||||
function supportSVGRendering() {
|
|
||||||
var img = new Image(),
|
|
||||||
canvas = doc.createElement("canvas"),
|
|
||||||
ctx = (canvas.getContext === undefined) ? false : canvas.getContext("2d");
|
|
||||||
if (ctx === false) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
canvas.width = canvas.height = 10;
|
|
||||||
img.src = [
|
|
||||||
"data:image/svg+xml,",
|
|
||||||
"<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>",
|
|
||||||
"<foreignObject width='10' height='10'>",
|
|
||||||
"<div xmlns='http://www.w3.org/1999/xhtml' style='width:10;height:10;'>",
|
|
||||||
"sup",
|
|
||||||
"</div>",
|
|
||||||
"</foreignObject>",
|
|
||||||
"</svg>"
|
|
||||||
].join("");
|
|
||||||
try {
|
|
||||||
ctx.drawImage(img, 0, 0);
|
|
||||||
canvas.toDataURL();
|
|
||||||
} catch(e) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
_html2canvas.Util.log('html2canvas: Parse: SVG powered rendering available');
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Test whether we can use ranges to measure bounding boxes
|
|
||||||
// Opera doesn't provide valid bounds.height/bottom even though it supports the method.
|
|
||||||
|
|
||||||
function supportRangeBounds() {
|
|
||||||
var r, testElement, rangeBounds, rangeHeight, support = false;
|
|
||||||
|
|
||||||
if (doc.createRange) {
|
|
||||||
r = doc.createRange();
|
|
||||||
if (r.getBoundingClientRect) {
|
|
||||||
testElement = doc.createElement('boundtest');
|
|
||||||
testElement.style.height = "123px";
|
|
||||||
testElement.style.display = "block";
|
|
||||||
doc.body.appendChild(testElement);
|
|
||||||
|
|
||||||
r.selectNode(testElement);
|
|
||||||
rangeBounds = r.getBoundingClientRect();
|
|
||||||
rangeHeight = rangeBounds.height;
|
|
||||||
|
|
||||||
if (rangeHeight === 123) {
|
|
||||||
support = true;
|
|
||||||
}
|
|
||||||
doc.body.removeChild(testElement);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return support;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
rangeBounds: supportRangeBounds(),
|
|
||||||
svgRendering: options.svgRendering && supportSVGRendering()
|
|
||||||
};
|
|
||||||
};
|
|
||||||
79
src/Util.js
79
src/Util.js
@ -1,79 +0,0 @@
|
|||||||
window.html2canvas = function(elements, opts) {
|
|
||||||
elements = (elements.length) ? elements : [elements];
|
|
||||||
var queue,
|
|
||||||
canvas,
|
|
||||||
options = {
|
|
||||||
// general
|
|
||||||
logging: false,
|
|
||||||
elements: elements,
|
|
||||||
background: "#fff",
|
|
||||||
|
|
||||||
// preload options
|
|
||||||
proxy: null,
|
|
||||||
timeout: 0, // no timeout
|
|
||||||
useCORS: false, // try to load images as CORS (where available), before falling back to proxy
|
|
||||||
allowTaint: false, // whether to allow images to taint the canvas, won't need proxy if set to true
|
|
||||||
|
|
||||||
// parse options
|
|
||||||
svgRendering: false, // use svg powered rendering where available (FF11+)
|
|
||||||
ignoreElements: "IFRAME|OBJECT|PARAM",
|
|
||||||
useOverflow: true,
|
|
||||||
letterRendering: false,
|
|
||||||
chinese: false,
|
|
||||||
async: false, // If true, parsing will not block, but if the user scrolls during parse the image can get weird
|
|
||||||
|
|
||||||
// render options
|
|
||||||
width: null,
|
|
||||||
height: null,
|
|
||||||
taintTest: true, // do a taint test with all images before applying to canvas
|
|
||||||
renderer: "Canvas"
|
|
||||||
};
|
|
||||||
|
|
||||||
options = _html2canvas.Util.Extend(opts, options);
|
|
||||||
|
|
||||||
_html2canvas.logging = options.logging;
|
|
||||||
options.complete = function( images ) {
|
|
||||||
|
|
||||||
if (typeof options.onpreloaded === "function") {
|
|
||||||
if ( options.onpreloaded( images ) === false ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
_html2canvas.Parse( images, options, function(queue) {
|
|
||||||
if (typeof options.onparsed === "function") {
|
|
||||||
if ( options.onparsed( queue ) === false ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas = _html2canvas.Renderer( queue, options );
|
|
||||||
|
|
||||||
if (typeof options.onrendered === "function") {
|
|
||||||
options.onrendered( canvas );
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// for pages without images, we still want this to be async, i.e. return methods before executing
|
|
||||||
window.setTimeout( function(){
|
|
||||||
_html2canvas.Preload( options );
|
|
||||||
}, 0 );
|
|
||||||
|
|
||||||
return {
|
|
||||||
render: function( queue, opts ) {
|
|
||||||
return _html2canvas.Renderer( queue, _html2canvas.Util.Extend(opts, options) );
|
|
||||||
},
|
|
||||||
parse: function( images, opts ) {
|
|
||||||
return _html2canvas.Parse( images, _html2canvas.Util.Extend(opts, options) );
|
|
||||||
},
|
|
||||||
preload: function( opts ) {
|
|
||||||
return _html2canvas.Preload( _html2canvas.Util.Extend(opts, options) );
|
|
||||||
},
|
|
||||||
log: _html2canvas.Util.log
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
window.html2canvas.log = _html2canvas.Util.log; // for renderers
|
|
||||||
window.html2canvas.Renderer = {
|
|
||||||
Canvas: undefined // We are assuming this will be used
|
|
||||||
};
|
|
||||||
520
src/core.js
Normal file
520
src/core.js
Normal file
@ -0,0 +1,520 @@
|
|||||||
|
window.html2canvas = function(nodeList, options) {
|
||||||
|
var container = createWindowClone(document, window.innerWidth, window.innerHeight);
|
||||||
|
var clonedWindow = container.contentWindow;
|
||||||
|
var element = (nodeList === undefined) ? document.body : nodeList[0];
|
||||||
|
|
||||||
|
var canvas = new CanvasRenderer();
|
||||||
|
var parser = new NodeParser(clonedWindow.document.documentElement, canvas, options || {});
|
||||||
|
|
||||||
|
window.console.log(parser);
|
||||||
|
options.onrendered(canvas.canvas);
|
||||||
|
};
|
||||||
|
|
||||||
|
function createWindowClone(ownerDocument, width, height) {
|
||||||
|
var documentElement = ownerDocument.documentElement.cloneNode(true),
|
||||||
|
container = ownerDocument.createElement("iframe");
|
||||||
|
|
||||||
|
container.style.display = "hidden";
|
||||||
|
container.style.position = "absolute";
|
||||||
|
container.style.width = width + "px";
|
||||||
|
container.style.height = height + "px";
|
||||||
|
|
||||||
|
ownerDocument.body.appendChild(container);
|
||||||
|
|
||||||
|
var documentClone = container.contentWindow.document;
|
||||||
|
documentClone.replaceChild(documentClone.adoptNode(documentElement), documentClone.documentElement);
|
||||||
|
|
||||||
|
return container;
|
||||||
|
}
|
||||||
|
|
||||||
|
function NodeParser(element, renderer, options) {
|
||||||
|
this.renderer = renderer;
|
||||||
|
this.options = options;
|
||||||
|
this.support = new Support();
|
||||||
|
this.range = null;
|
||||||
|
this.stack = new StackingContext(true, 1, element.ownerDocument, null);
|
||||||
|
var parent = new NodeContainer(element, null);
|
||||||
|
parent.blockFormattingContext = parent;
|
||||||
|
this.nodes = [parent].concat(this.getChildren(parent)).filter(function(container) {
|
||||||
|
return container.visible = container.isElementVisible();
|
||||||
|
});
|
||||||
|
this.createStackingContexts();
|
||||||
|
this.sortStackingContexts(this.stack);
|
||||||
|
this.parse(this.stack);
|
||||||
|
}
|
||||||
|
|
||||||
|
NodeParser.prototype.getChildren = function(parentContainer) {
|
||||||
|
return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
|
||||||
|
var container = [node.nodeType === Node.TEXT_NODE ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
|
||||||
|
return node.nodeType === Node.ELEMENT_NODE && container.length ? container.concat(this.getChildren(container[0])) : container;
|
||||||
|
}, this));
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeParser.prototype.newStackingContext = function(container, hasOwnStacking) {
|
||||||
|
var stack = new StackingContext(hasOwnStacking, container.cssFloat('opacity'), container.node, container.parent);
|
||||||
|
var parentStack = stack.getParentStack(this);
|
||||||
|
parentStack.contexts.push(stack);
|
||||||
|
container.stack = stack;
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeParser.prototype.createStackingContexts = function() {
|
||||||
|
this.nodes.forEach(function(container) {
|
||||||
|
if (isElement(container) && (this.isRootElement(container) || hasOpacity(container) || isPositionedForStacking(container) || this.isBodyWithTransparentRoot(container))) {
|
||||||
|
this.newStackingContext(container, true);
|
||||||
|
} else if (isElement(container) && (isPositioned(container))) {
|
||||||
|
this.newStackingContext(container, false);
|
||||||
|
} else {
|
||||||
|
container.assignStack(container.parent.stack);
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeParser.prototype.isBodyWithTransparentRoot = function(container) {
|
||||||
|
return container.node.nodeName === "BODY" && this.renderer.isTransparent(container.parent.css('backgroundColor'));
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeParser.prototype.isRootElement = function(container) {
|
||||||
|
return container.node.nodeName === "HTML";
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeParser.prototype.sortStackingContexts = function(stack) {
|
||||||
|
stack.contexts.sort(zIndexSort);
|
||||||
|
stack.contexts.forEach(this.sortStackingContexts, this);
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeParser.prototype.parseBounds = function(nodeContainer) {
|
||||||
|
return nodeContainer.bounds = this.getBounds(nodeContainer.node);
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeParser.prototype.getBounds = function(node) {
|
||||||
|
if (node.getBoundingClientRect) {
|
||||||
|
var clientRect = node.getBoundingClientRect();
|
||||||
|
return {
|
||||||
|
top: clientRect.top,
|
||||||
|
bottom: clientRect.bottom || (clientRect.top + clientRect.height),
|
||||||
|
left: clientRect.left,
|
||||||
|
width: node.offsetWidth,
|
||||||
|
height: node.offsetHeight
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {};
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeParser.prototype.parseTextBounds = function(container) {
|
||||||
|
return function(text, index, textList) {
|
||||||
|
if (container.parent.css("textDecoration") !== "none" || text.trim().length !== 0) {
|
||||||
|
var offset = textList.slice(0, index).join("").length;
|
||||||
|
if (this.support.rangeBounds) {
|
||||||
|
return this.getRangeBounds(container.node, offset, text.length);
|
||||||
|
} else if (container.node && typeof(container.node.data) === "string") {
|
||||||
|
var replacementNode = container.node.splitText(text.length);
|
||||||
|
var bounds = this.getWrapperBounds(container.node);
|
||||||
|
container.node = replacementNode;
|
||||||
|
return bounds;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeParser.prototype.getWrapperBounds = function(node) {
|
||||||
|
var wrapper = node.ownerDocument.createElement('wrapper');
|
||||||
|
var parent = node.parentNode,
|
||||||
|
backupText = node.cloneNode(true);
|
||||||
|
|
||||||
|
wrapper.appendChild(node.cloneNode(true));
|
||||||
|
parent.replaceChild(wrapper, node);
|
||||||
|
|
||||||
|
var bounds = this.getBounds(wrapper);
|
||||||
|
parent.replaceChild(backupText, wrapper);
|
||||||
|
return bounds;
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeParser.prototype.getRangeBounds = function(node, offset, length) {
|
||||||
|
var range = this.range || (this.range = node.ownerDocument.createRange());
|
||||||
|
range.setStart(node, offset);
|
||||||
|
range.setEnd(node, offset + length);
|
||||||
|
return range.getBoundingClientRect();
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
function negativeZIndex(container) {
|
||||||
|
return container.cssInt("zIndex") < 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function positiveZIndex(container) {
|
||||||
|
return container.cssInt("zIndex") > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function zIndex0(container) {
|
||||||
|
return container.cssInt("zIndex") === 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function inlineLevel(container) {
|
||||||
|
return ["inline", "inline-block", "inline-table"].indexOf(container.css("display")) !== -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isStackingContext(container) {
|
||||||
|
return (container instanceof StackingContext);
|
||||||
|
}
|
||||||
|
|
||||||
|
function hasText(container) {
|
||||||
|
return container.node.data.trim().length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function noLetterSpacing(container) {
|
||||||
|
return (/^(normal|none|0px)$/.test(container.parent.css("letterSpacing")));
|
||||||
|
}
|
||||||
|
|
||||||
|
NodeParser.prototype.parse = function(stack) {
|
||||||
|
// http://www.w3.org/TR/CSS21/visuren.html#z-index
|
||||||
|
var negativeZindex = stack.contexts.filter(negativeZIndex); // 2. the child stacking contexts with negative stack levels (most negative first).
|
||||||
|
var descendantElements = stack.children.filter(isElement).filter(not(isFloating));
|
||||||
|
var nonInlineNonPositionedDescendants = descendantElements.filter(not(isPositioned)).filter(not(inlineLevel)); // 3 the in-flow, non-inline-level, non-positioned descendants.
|
||||||
|
var nonPositionedFloats = descendantElements.filter(not(isPositioned)).filter(isFloating); // 4. the non-positioned floats.
|
||||||
|
var inFlow = descendantElements.filter(not(isPositioned)).filter(inlineLevel); // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
|
||||||
|
var stackLevel0 = stack.contexts.concat(descendantElements.filter(isPositioned)).filter(zIndex0); // 6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
|
||||||
|
var text = stack.children.filter(isTextNode).filter(hasText);
|
||||||
|
var positiveZindex = stack.contexts.filter(positiveZIndex); // 7. the child stacking contexts with positive stack levels (least positive first).
|
||||||
|
var rendered = [];
|
||||||
|
negativeZindex.concat(nonInlineNonPositionedDescendants).concat(nonPositionedFloats)
|
||||||
|
.concat(inFlow).concat(stackLevel0).concat(text).concat(positiveZindex).forEach(function(container) {
|
||||||
|
this.paint(container);
|
||||||
|
if (rendered.indexOf(container.node) !== -1) {
|
||||||
|
window.console.log(container, container.node);
|
||||||
|
throw new Error("rendering twice");
|
||||||
|
}
|
||||||
|
rendered.push(container.node);
|
||||||
|
|
||||||
|
if (isStackingContext(container)) {
|
||||||
|
this.parse(container);
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeParser.prototype.paint = function(container) {
|
||||||
|
if (isTextNode(container)) {
|
||||||
|
this.paintText(container);
|
||||||
|
} else {
|
||||||
|
this.paintNode(container);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeParser.prototype.paintNode = function(container) {
|
||||||
|
if (isStackingContext(container)) {
|
||||||
|
this.renderer.setOpacity(container.opacity);
|
||||||
|
}
|
||||||
|
|
||||||
|
var bounds = this.parseBounds(container);
|
||||||
|
var borderData = this.parseBorders(container);
|
||||||
|
this.renderer.clip(borderData.clip, function() {
|
||||||
|
this.renderer.renderBackground(container, bounds);
|
||||||
|
}, this);
|
||||||
|
this.renderer.renderBorders(borderData.borders);
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeParser.prototype.paintText = function(container) {
|
||||||
|
container.applyTextTransform();
|
||||||
|
var textList = container.node.data.split(!this.options.letterRendering || noLetterSpacing(container) ? /(\b| )/ : "");
|
||||||
|
var weight = container.parent.fontWeight();
|
||||||
|
var size = container.parent.css('fontSize');
|
||||||
|
var family = container.parent.css('fontFamily');
|
||||||
|
this.renderer.font(container.parent.css('color'), container.parent.css('fontStyle'), container.parent.css('fontVariant'), weight, size, family);
|
||||||
|
|
||||||
|
textList.map(this.parseTextBounds(container), this).forEach(function(bounds, index) {
|
||||||
|
if (bounds) {
|
||||||
|
this.renderer.text(textList[index], bounds.left, bounds.bottom);
|
||||||
|
// renderTextDecoration(ctx, textDecoration, bounds, metrics, color);
|
||||||
|
}
|
||||||
|
/* var bounds = getTextBounds(state, text, textDecoration, (index < textList.length - 1), stack.transform.matrix);
|
||||||
|
if (bounds) {
|
||||||
|
drawText(text, bounds.left, bounds.bottom, ctx);
|
||||||
|
renderTextDecoration(ctx, textDecoration, bounds, metrics, color);
|
||||||
|
} */
|
||||||
|
}, this);
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeParser.prototype.parseBorders = function(container) {
|
||||||
|
var nodeBounds = container.bounds;
|
||||||
|
var radius = getBorderRadiusData(container);
|
||||||
|
var borders = ["Top", "Right", "Bottom", "Left"].map(function(side) {
|
||||||
|
return {
|
||||||
|
width: container.cssInt('border' + side + 'Width'),
|
||||||
|
color: container.css('border' + side + 'Color'),
|
||||||
|
args: null
|
||||||
|
};
|
||||||
|
});
|
||||||
|
var borderPoints = calculateCurvePoints(nodeBounds, radius, borders);
|
||||||
|
|
||||||
|
return {
|
||||||
|
clip: this.parseBackgroundClip(container, borderPoints, borders, radius, nodeBounds),
|
||||||
|
borders: borders.map(function(border, borderSide) {
|
||||||
|
if (border.width > 0) {
|
||||||
|
var bx = nodeBounds.left;
|
||||||
|
var by = nodeBounds.top;
|
||||||
|
var bw = nodeBounds.width;
|
||||||
|
var bh = nodeBounds.height - (borders[2].width);
|
||||||
|
|
||||||
|
switch(borderSide) {
|
||||||
|
case 0:
|
||||||
|
// top border
|
||||||
|
bh = borders[0].width;
|
||||||
|
border.args = drawSide({
|
||||||
|
c1: [bx, by],
|
||||||
|
c2: [bx + bw, by],
|
||||||
|
c3: [bx + bw - borders[1].width, by + bh],
|
||||||
|
c4: [bx + borders[3].width, by + bh]
|
||||||
|
}, radius[0], radius[1],
|
||||||
|
borderPoints.topLeftOuter, borderPoints.topLeftInner, borderPoints.topRightOuter, borderPoints.topRightInner);
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
// right border
|
||||||
|
bx = nodeBounds.left + nodeBounds.width - (borders[1].width);
|
||||||
|
bw = borders[1].width;
|
||||||
|
|
||||||
|
border.args = drawSide({
|
||||||
|
c1: [bx + bw, by],
|
||||||
|
c2: [bx + bw, by + bh + borders[2].width],
|
||||||
|
c3: [bx, by + bh],
|
||||||
|
c4: [bx, by + borders[0].width]
|
||||||
|
}, radius[1], radius[2],
|
||||||
|
borderPoints.topRightOuter, borderPoints.topRightInner, borderPoints.bottomRightOuter, borderPoints.bottomRightInner);
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
// bottom border
|
||||||
|
by = (by + nodeBounds.height) - (borders[2].width);
|
||||||
|
bh = borders[2].width;
|
||||||
|
border.args = drawSide({
|
||||||
|
c1: [bx + bw, by + bh],
|
||||||
|
c2: [bx, by + bh],
|
||||||
|
c3: [bx + borders[3].width, by],
|
||||||
|
c4: [bx + bw - borders[3].width, by]
|
||||||
|
}, radius[2], radius[3],
|
||||||
|
borderPoints.bottomRightOuter, borderPoints.bottomRightInner, borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner);
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
// left border
|
||||||
|
bw = borders[3].width;
|
||||||
|
border.args = drawSide({
|
||||||
|
c1: [bx, by + bh + borders[2].width],
|
||||||
|
c2: [bx, by],
|
||||||
|
c3: [bx + bw, by + borders[0].width],
|
||||||
|
c4: [bx + bw, by + bh]
|
||||||
|
}, radius[3], radius[0],
|
||||||
|
borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner, borderPoints.topLeftOuter, borderPoints.topLeftInner);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return border;
|
||||||
|
})
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeParser.prototype.parseBackgroundClip = function(container, borderPoints, borders, radius, bounds) {
|
||||||
|
var backgroundClip = container.css('backgroundClip'),
|
||||||
|
borderArgs = [];
|
||||||
|
|
||||||
|
switch(backgroundClip) {
|
||||||
|
case "content-box":
|
||||||
|
case "padding-box":
|
||||||
|
parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftInner, borderPoints.topRightInner, bounds.left + borders[3].width, bounds.top + borders[0].width);
|
||||||
|
parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightInner, borderPoints.bottomRightInner, bounds.left + bounds.width - borders[1].width, bounds.top + borders[0].width);
|
||||||
|
parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightInner, borderPoints.bottomLeftInner, bounds.left + bounds.width - borders[1].width, bounds.top + bounds.height - borders[2].width);
|
||||||
|
parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftInner, borderPoints.topLeftInner, bounds.left + borders[3].width, bounds.top + bounds.height - borders[2].width);
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftOuter, borderPoints.topRightOuter, bounds.left, bounds.top);
|
||||||
|
parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightOuter, borderPoints.bottomRightOuter, bounds.left + bounds.width, bounds.top);
|
||||||
|
parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightOuter, borderPoints.bottomLeftOuter, bounds.left + bounds.width, bounds.top + bounds.height);
|
||||||
|
parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftOuter, borderPoints.topLeftOuter, bounds.left, bounds.top + bounds.height);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return borderArgs;
|
||||||
|
};
|
||||||
|
|
||||||
|
function parseCorner(borderArgs, radius1, radius2, corner1, corner2, x, y) {
|
||||||
|
if (radius1[0] > 0 || radius1[1] > 0) {
|
||||||
|
borderArgs.push(["line", corner1[0].start.x, corner1[0].start.y]);
|
||||||
|
corner1[0].curveTo(borderArgs);
|
||||||
|
corner1[1].curveTo(borderArgs);
|
||||||
|
} else {
|
||||||
|
borderArgs.push(["line", x, y]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (radius2[0] > 0 || radius2[1] > 0) {
|
||||||
|
borderArgs.push(["line", corner2[0].start.x, corner2[0].start.y]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getBorderRadiusData(container) {
|
||||||
|
return ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].map(function(side) {
|
||||||
|
var value = container.css('border' + side + 'Radius');
|
||||||
|
var arr = value.split(" ");
|
||||||
|
if (arr.length <= 1) {
|
||||||
|
arr[1] = arr[0];
|
||||||
|
}
|
||||||
|
return arr.map(asInt);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function asInt(value) {
|
||||||
|
return parseInt(value, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCurvePoints(x, y, r1, r2) {
|
||||||
|
var kappa = 4 * ((Math.sqrt(2) - 1) / 3);
|
||||||
|
var ox = (r1) * kappa, // control point offset horizontal
|
||||||
|
oy = (r2) * kappa, // control point offset vertical
|
||||||
|
xm = x + r1, // x-middle
|
||||||
|
ym = y + r2; // y-middle
|
||||||
|
return {
|
||||||
|
topLeft: bezierCurve({x: x, y: ym}, {x: x, y: ym - oy}, {x: xm - ox, y: y}, {x: xm, y: y}),
|
||||||
|
topRight: bezierCurve({x: x, y: y}, {x: x + ox,y: y}, {x: xm, y: ym - oy}, {x: xm, y: ym}),
|
||||||
|
bottomRight: bezierCurve({x: xm, y: y}, {x: xm, y: y + oy}, {x: x + ox, y: ym}, {x: x, y: ym}),
|
||||||
|
bottomLeft: bezierCurve({x: xm, y: ym}, {x: xm - ox, y: ym}, {x: x, y: y + oy}, {x: x, y:y})
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculateCurvePoints(bounds, borderRadius, borders) {
|
||||||
|
var x = bounds.left,
|
||||||
|
y = bounds.top,
|
||||||
|
width = bounds.width,
|
||||||
|
height = bounds.height,
|
||||||
|
|
||||||
|
tlh = borderRadius[0][0],
|
||||||
|
tlv = borderRadius[0][1],
|
||||||
|
trh = borderRadius[1][0],
|
||||||
|
trv = borderRadius[1][1],
|
||||||
|
brh = borderRadius[2][0],
|
||||||
|
brv = borderRadius[2][1],
|
||||||
|
blh = borderRadius[3][0],
|
||||||
|
blv = borderRadius[3][1];
|
||||||
|
|
||||||
|
var topWidth = width - trh,
|
||||||
|
rightHeight = height - brv,
|
||||||
|
bottomWidth = width - brh,
|
||||||
|
leftHeight = height - blv;
|
||||||
|
|
||||||
|
return {
|
||||||
|
topLeftOuter: getCurvePoints(x, y, tlh, tlv).topLeft.subdivide(0.5),
|
||||||
|
topLeftInner: getCurvePoints(x + borders[3].width, y + borders[0].width, Math.max(0, tlh - borders[3].width), Math.max(0, tlv - borders[0].width)).topLeft.subdivide(0.5),
|
||||||
|
topRightOuter: getCurvePoints(x + topWidth, y, trh, trv).topRight.subdivide(0.5),
|
||||||
|
topRightInner: getCurvePoints(x + Math.min(topWidth, width + borders[3].width), y + borders[0].width, (topWidth > width + borders[3].width) ? 0 :trh - borders[3].width, trv - borders[0].width).topRight.subdivide(0.5),
|
||||||
|
bottomRightOuter: getCurvePoints(x + bottomWidth, y + rightHeight, brh, brv).bottomRight.subdivide(0.5),
|
||||||
|
bottomRightInner: getCurvePoints(x + Math.min(bottomWidth, width + borders[3].width), y + Math.min(rightHeight, height + borders[0].width), Math.max(0, brh - borders[1].width), Math.max(0, brv - borders[2].width)).bottomRight.subdivide(0.5),
|
||||||
|
bottomLeftOuter: getCurvePoints(x, y + leftHeight, blh, blv).bottomLeft.subdivide(0.5),
|
||||||
|
bottomLeftInner: getCurvePoints(x + borders[3].width, y + leftHeight, Math.max(0, blh - borders[3].width), Math.max(0, blv - borders[2].width)).bottomLeft.subdivide(0.5)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function bezierCurve(start, startControl, endControl, end) {
|
||||||
|
var lerp = function (a, b, t) {
|
||||||
|
return {
|
||||||
|
x: a.x + (b.x - a.x) * t,
|
||||||
|
y: a.y + (b.y - a.y) * t
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
start: start,
|
||||||
|
startControl: startControl,
|
||||||
|
endControl: endControl,
|
||||||
|
end: end,
|
||||||
|
subdivide: function(t) {
|
||||||
|
var ab = lerp(start, startControl, t),
|
||||||
|
bc = lerp(startControl, endControl, t),
|
||||||
|
cd = lerp(endControl, end, t),
|
||||||
|
abbc = lerp(ab, bc, t),
|
||||||
|
bccd = lerp(bc, cd, t),
|
||||||
|
dest = lerp(abbc, bccd, t);
|
||||||
|
return [bezierCurve(start, ab, abbc, dest), bezierCurve(dest, bccd, cd, end)];
|
||||||
|
},
|
||||||
|
curveTo: function(borderArgs) {
|
||||||
|
borderArgs.push(["bezierCurve", startControl.x, startControl.y, endControl.x, endControl.y, end.x, end.y]);
|
||||||
|
},
|
||||||
|
curveToReversed: function(borderArgs) {
|
||||||
|
borderArgs.push(["bezierCurve", endControl.x, endControl.y, startControl.x, startControl.y, start.x, start.y]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawSide(borderData, radius1, radius2, outer1, inner1, outer2, inner2) {
|
||||||
|
var borderArgs = [];
|
||||||
|
|
||||||
|
if (radius1[0] > 0 || radius1[1] > 0) {
|
||||||
|
borderArgs.push(["line", outer1[1].start.x, outer1[1].start.y]);
|
||||||
|
outer1[1].curveTo(borderArgs);
|
||||||
|
} else {
|
||||||
|
borderArgs.push([ "line", borderData.c1[0], borderData.c1[1]]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (radius2[0] > 0 || radius2[1] > 0) {
|
||||||
|
borderArgs.push(["line", outer2[0].start.x, outer2[0].start.y]);
|
||||||
|
outer2[0].curveTo(borderArgs);
|
||||||
|
borderArgs.push(["line", inner2[0].end.x, inner2[0].end.y]);
|
||||||
|
inner2[0].curveToReversed(borderArgs);
|
||||||
|
} else {
|
||||||
|
borderArgs.push(["line", borderData.c2[0], borderData.c2[1]]);
|
||||||
|
borderArgs.push(["line", borderData.c3[0], borderData.c3[1]]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (radius1[0] > 0 || radius1[1] > 0) {
|
||||||
|
borderArgs.push(["line", inner1[1].end.x, inner1[1].end.y]);
|
||||||
|
inner1[1].curveToReversed(borderArgs);
|
||||||
|
} else {
|
||||||
|
borderArgs.push(["line", borderData.c4[0], borderData.c4[1]]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return borderArgs;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function nonIgnoredElement(nodeContainer) {
|
||||||
|
return (nodeContainer.node.nodeType !== Node.ELEMENT_NODE || ["SCRIPT", "HEAD", "TITLE", "OBJECT", "BR"].indexOf(nodeContainer.node.nodeName) === -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function flatten(arrays) {
|
||||||
|
return [].concat.apply([], arrays);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderableNode(node) {
|
||||||
|
return (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isPositionedForStacking(container) {
|
||||||
|
var position = container.css("position");
|
||||||
|
var zIndex = (position === "absolute" || position === "relative") ? container.css("zIndex") : "auto";
|
||||||
|
return zIndex !== "auto";
|
||||||
|
}
|
||||||
|
|
||||||
|
function isPositioned(container) {
|
||||||
|
return container.css("position") !== "static";
|
||||||
|
}
|
||||||
|
|
||||||
|
function isFloating(container) {
|
||||||
|
return container.css("float") !== "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
function not(callback) {
|
||||||
|
var context = this;
|
||||||
|
return function() {
|
||||||
|
return !callback.apply(context, arguments);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function isElement(container) {
|
||||||
|
return container.node.nodeType === Node.ELEMENT_NODE;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isTextNode(container) {
|
||||||
|
return container.node.nodeType === Node.TEXT_NODE;
|
||||||
|
}
|
||||||
|
|
||||||
|
function zIndexSort(a, b) {
|
||||||
|
return a.cssInt("zIndex") - b.cssInt("zIndex");
|
||||||
|
}
|
||||||
|
|
||||||
|
function hasOpacity(container) {
|
||||||
|
return container.css("opacity") < 1;
|
||||||
|
}
|
||||||
49
src/nodecontainer.js
Normal file
49
src/nodecontainer.js
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
function NodeContainer(node, parent) {
|
||||||
|
this.node = node;
|
||||||
|
this.parent = parent;
|
||||||
|
this.stack = null;
|
||||||
|
this.bounds = null;
|
||||||
|
this.visible = null;
|
||||||
|
this.computedStyles = null;
|
||||||
|
this.styles = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
NodeContainer.prototype.assignStack = function(stack) {
|
||||||
|
this.stack = stack;
|
||||||
|
stack.children.push(this);
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeContainer.prototype.isElementVisible = function() {
|
||||||
|
return this.node.nodeType === Node.TEXT_NODE ? this.parent.visible : (this.css('display') !== "none" && this.css('visibility') !== "hidden" && !this.node.hasAttribute("data-html2canvas-ignore"));
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeContainer.prototype.css = function(attribute) {
|
||||||
|
if (!this.computedStyles) {
|
||||||
|
this.computedStyles = this.node.ownerDocument.defaultView.getComputedStyle(this.node, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.styles[attribute] || (this.styles[attribute] = this.computedStyles[attribute]);
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeContainer.prototype.cssInt = function(attribute) {
|
||||||
|
var value = parseInt(this.css(attribute), 10);
|
||||||
|
return (Number.isNaN(value)) ? 0 : value; // borders in old IE are throwing 'medium' for demo.html
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeContainer.prototype.cssFloat = function(attribute) {
|
||||||
|
var value = parseFloat(this.css(attribute));
|
||||||
|
return (Number.isNaN(value)) ? 0 : value;
|
||||||
|
};
|
||||||
|
|
||||||
|
NodeContainer.prototype.fontWeight = function() {
|
||||||
|
var weight = this.css("fontWeight");
|
||||||
|
switch(parseInt(weight, 10)){
|
||||||
|
case 401:
|
||||||
|
weight = "bold";
|
||||||
|
break;
|
||||||
|
case 400:
|
||||||
|
weight = "normal";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return weight;
|
||||||
|
};
|
||||||
48
src/renderer.js
Normal file
48
src/renderer.js
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
function Renderer() {}
|
||||||
|
function NYI() {
|
||||||
|
return function() {
|
||||||
|
throw new Error("Render function not implemented");
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
Renderer.prototype.renderBackground = function(container, bounds) {
|
||||||
|
if (bounds.height > 0 && bounds.width > 0) {
|
||||||
|
this.renderBackgroundColor(container, bounds);
|
||||||
|
this.renderBackgroundImage(container, bounds);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Renderer.prototype.renderBackgroundColor = function(container, bounds) {
|
||||||
|
var color = container.css("backgroundColor");
|
||||||
|
if (!this.isTransparent(color)) {
|
||||||
|
this.rectangle(
|
||||||
|
bounds.left,
|
||||||
|
bounds.top,
|
||||||
|
bounds.width,
|
||||||
|
bounds.height,
|
||||||
|
container.css("backgroundColor")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Renderer.prototype.renderBorders = function(borders) {
|
||||||
|
borders.forEach(this.renderBorder, this);
|
||||||
|
};
|
||||||
|
|
||||||
|
Renderer.prototype.renderBorder = function(data) {
|
||||||
|
if (!this.isTransparent(data.color) && data.args !== null) {
|
||||||
|
this.drawShape(data.args, data.color);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Renderer.prototype.renderBackgroundImage = function(container, bounds) {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
Renderer.prototype.isTransparent = function(color) {
|
||||||
|
return (!color || color === "transparent" || color === "rgba(0, 0, 0, 0)");
|
||||||
|
};
|
||||||
|
|
||||||
|
Renderer.prototype.clip = NYI();
|
||||||
|
Renderer.prototype.rectangle = NYI();
|
||||||
|
Renderer.prototype.shape = NYI();
|
||||||
@ -1,126 +0,0 @@
|
|||||||
_html2canvas.Renderer.Canvas = function(options) {
|
|
||||||
options = options || {};
|
|
||||||
|
|
||||||
var doc = document,
|
|
||||||
safeImages = [],
|
|
||||||
testCanvas = document.createElement("canvas"),
|
|
||||||
testctx = testCanvas.getContext("2d"),
|
|
||||||
Util = _html2canvas.Util,
|
|
||||||
canvas = options.canvas || doc.createElement('canvas');
|
|
||||||
|
|
||||||
function createShape(ctx, args) {
|
|
||||||
ctx.beginPath();
|
|
||||||
args.forEach(function(arg) {
|
|
||||||
ctx[arg.name].apply(ctx, arg['arguments']);
|
|
||||||
});
|
|
||||||
ctx.closePath();
|
|
||||||
}
|
|
||||||
|
|
||||||
function safeImage(item) {
|
|
||||||
if (safeImages.indexOf(item['arguments'][0].src) === -1) {
|
|
||||||
testctx.drawImage(item['arguments'][0], 0, 0);
|
|
||||||
try {
|
|
||||||
testctx.getImageData(0, 0, 1, 1);
|
|
||||||
} catch(e) {
|
|
||||||
testCanvas = doc.createElement("canvas");
|
|
||||||
testctx = testCanvas.getContext("2d");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
safeImages.push(item['arguments'][0].src);
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderItem(ctx, item) {
|
|
||||||
switch(item.type){
|
|
||||||
case "variable":
|
|
||||||
ctx[item.name] = item['arguments'];
|
|
||||||
break;
|
|
||||||
case "function":
|
|
||||||
switch(item.name) {
|
|
||||||
case "createPattern":
|
|
||||||
if (item['arguments'][0].width > 0 && item['arguments'][0].height > 0) {
|
|
||||||
try {
|
|
||||||
ctx.fillStyle = ctx.createPattern(item['arguments'][0], "repeat");
|
|
||||||
} catch(e) {
|
|
||||||
Util.log("html2canvas: Renderer: Error creating pattern", e.message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case "drawShape":
|
|
||||||
createShape(ctx, item['arguments']);
|
|
||||||
break;
|
|
||||||
case "drawImage":
|
|
||||||
if (item['arguments'][8] > 0 && item['arguments'][7] > 0) {
|
|
||||||
if (!options.taintTest || (options.taintTest && safeImage(item))) {
|
|
||||||
ctx.drawImage.apply( ctx, item['arguments'] );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
ctx[item.name].apply(ctx, item['arguments']);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return function(parsedData, options, document, queue, _html2canvas) {
|
|
||||||
var ctx = canvas.getContext("2d"),
|
|
||||||
newCanvas,
|
|
||||||
bounds,
|
|
||||||
fstyle,
|
|
||||||
zStack = parsedData.stack;
|
|
||||||
|
|
||||||
canvas.width = canvas.style.width = options.width || zStack.ctx.width;
|
|
||||||
canvas.height = canvas.style.height = options.height || zStack.ctx.height;
|
|
||||||
|
|
||||||
fstyle = ctx.fillStyle;
|
|
||||||
ctx.fillStyle = (Util.isTransparent(parsedData.backgroundColor) && options.background !== undefined) ? options.background : parsedData.backgroundColor;
|
|
||||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
||||||
ctx.fillStyle = fstyle;
|
|
||||||
queue.forEach(function(storageContext) {
|
|
||||||
// set common settings for canvas
|
|
||||||
ctx.textBaseline = "bottom";
|
|
||||||
ctx.save();
|
|
||||||
|
|
||||||
if (storageContext.transform.matrix) {
|
|
||||||
ctx.translate(storageContext.transform.origin[0], storageContext.transform.origin[1]);
|
|
||||||
ctx.transform.apply(ctx, storageContext.transform.matrix);
|
|
||||||
ctx.translate(-storageContext.transform.origin[0], -storageContext.transform.origin[1]);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (storageContext.clip){
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height);
|
|
||||||
ctx.clip();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (storageContext.ctx.storage) {
|
|
||||||
storageContext.ctx.storage.forEach(function(item) {
|
|
||||||
renderItem(ctx, item);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.restore();
|
|
||||||
});
|
|
||||||
|
|
||||||
Util.log("html2canvas: Renderer: Canvas renderer done - returning canvas obj");
|
|
||||||
|
|
||||||
if (options.elements.length === 1) {
|
|
||||||
if (typeof options.elements[0] === "object" && options.elements[0].nodeName !== "BODY") {
|
|
||||||
// crop image to the bounds of selected (single) element
|
|
||||||
bounds = _html2canvas.Util.Bounds(options.elements[0]);
|
|
||||||
newCanvas = document.createElement('canvas');
|
|
||||||
newCanvas.width = Math.ceil(bounds.width);
|
|
||||||
newCanvas.height = Math.ceil(bounds.height);
|
|
||||||
ctx = newCanvas.getContext("2d");
|
|
||||||
|
|
||||||
ctx.drawImage(canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height);
|
|
||||||
canvas = null;
|
|
||||||
return newCanvas;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return canvas;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@ -1,206 +0,0 @@
|
|||||||
/*
|
|
||||||
html2canvas @VERSION@ <http://html2canvas.hertzen.com>
|
|
||||||
Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
|
|
||||||
http://www.twitter.com/niklasvh
|
|
||||||
|
|
||||||
Released under MIT License
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
// WARNING THIS file is outdated, and hasn't been tested in quite a while
|
|
||||||
|
|
||||||
_html2canvas.Renderer.SVG = function( options ) {
|
|
||||||
|
|
||||||
options = options || {};
|
|
||||||
|
|
||||||
var doc = document,
|
|
||||||
svgNS = "http://www.w3.org/2000/svg",
|
|
||||||
svg = doc.createElementNS(svgNS, "svg"),
|
|
||||||
xlinkNS = "http://www.w3.org/1999/xlink",
|
|
||||||
defs = doc.createElementNS(svgNS, "defs"),
|
|
||||||
i,
|
|
||||||
a,
|
|
||||||
queueLen,
|
|
||||||
storageLen,
|
|
||||||
storageContext,
|
|
||||||
renderItem,
|
|
||||||
el,
|
|
||||||
settings = {},
|
|
||||||
text,
|
|
||||||
fontStyle,
|
|
||||||
clipId = 0,
|
|
||||||
methods;
|
|
||||||
|
|
||||||
|
|
||||||
methods = {
|
|
||||||
_create: function( zStack, options, doc, queue, _html2canvas ) {
|
|
||||||
svg.setAttribute("version", "1.1");
|
|
||||||
svg.setAttribute("baseProfile", "full");
|
|
||||||
|
|
||||||
svg.setAttribute("viewBox", "0 0 " + Math.max(zStack.ctx.width, options.width) + " " + Math.max(zStack.ctx.height, options.height));
|
|
||||||
svg.setAttribute("width", Math.max(zStack.ctx.width, options.width) + "px");
|
|
||||||
svg.setAttribute("height", Math.max(zStack.ctx.height, options.height) + "px");
|
|
||||||
svg.setAttribute("preserveAspectRatio", "none");
|
|
||||||
svg.appendChild(defs);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
for (i = 0, queueLen = queue.length; i < queueLen; i+=1){
|
|
||||||
|
|
||||||
storageContext = queue.splice(0, 1)[0];
|
|
||||||
storageContext.canvasPosition = storageContext.canvasPosition || {};
|
|
||||||
|
|
||||||
//this.canvasRenderContext(storageContext,parentctx);
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
if (storageContext.clip){
|
|
||||||
ctx.save();
|
|
||||||
ctx.beginPath();
|
|
||||||
// console.log(storageContext);
|
|
||||||
ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height);
|
|
||||||
ctx.clip();
|
|
||||||
|
|
||||||
}*/
|
|
||||||
|
|
||||||
if (storageContext.ctx.storage){
|
|
||||||
|
|
||||||
for (a = 0, storageLen = storageContext.ctx.storage.length; a < storageLen; a+=1){
|
|
||||||
|
|
||||||
renderItem = storageContext.ctx.storage[a];
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
switch(renderItem.type){
|
|
||||||
case "variable":
|
|
||||||
settings[renderItem.name] = renderItem['arguments'];
|
|
||||||
break;
|
|
||||||
case "function":
|
|
||||||
if (renderItem.name === "fillRect") {
|
|
||||||
|
|
||||||
el = doc.createElementNS(svgNS, "rect");
|
|
||||||
el.setAttribute("x", renderItem['arguments'][0]);
|
|
||||||
el.setAttribute("y", renderItem['arguments'][1]);
|
|
||||||
el.setAttribute("width", renderItem['arguments'][2]);
|
|
||||||
el.setAttribute("height", renderItem['arguments'][3]);
|
|
||||||
el.setAttribute("fill", settings.fillStyle);
|
|
||||||
svg.appendChild(el);
|
|
||||||
|
|
||||||
} else if(renderItem.name === "fillText") {
|
|
||||||
el = doc.createElementNS(svgNS, "text");
|
|
||||||
|
|
||||||
fontStyle = settings.font.split(" ");
|
|
||||||
|
|
||||||
el.style.fontVariant = fontStyle.splice(0, 1)[0];
|
|
||||||
el.style.fontWeight = fontStyle.splice(0, 1)[0];
|
|
||||||
el.style.fontStyle = fontStyle.splice(0, 1)[0];
|
|
||||||
el.style.fontSize = fontStyle.splice(0, 1)[0];
|
|
||||||
|
|
||||||
el.setAttribute("x", renderItem['arguments'][1]);
|
|
||||||
el.setAttribute("y", renderItem['arguments'][2] - (parseInt(el.style.fontSize, 10) + 3));
|
|
||||||
|
|
||||||
el.setAttribute("fill", settings.fillStyle);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// TODO get proper baseline
|
|
||||||
el.style.dominantBaseline = "text-before-edge";
|
|
||||||
el.style.fontFamily = fontStyle.join(" ");
|
|
||||||
|
|
||||||
text = doc.createTextNode(renderItem['arguments'][0]);
|
|
||||||
el.appendChild(text);
|
|
||||||
|
|
||||||
|
|
||||||
svg.appendChild(el);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} else if(renderItem.name === "drawImage") {
|
|
||||||
|
|
||||||
if (renderItem['arguments'][8] > 0 && renderItem['arguments'][7]){
|
|
||||||
|
|
||||||
// TODO check whether even any clipping is necessary for this particular image
|
|
||||||
el = doc.createElementNS(svgNS, "clipPath");
|
|
||||||
el.setAttribute("id", "clipId" + clipId);
|
|
||||||
|
|
||||||
text = doc.createElementNS(svgNS, "rect");
|
|
||||||
text.setAttribute("x", renderItem['arguments'][5] );
|
|
||||||
text.setAttribute("y", renderItem['arguments'][6]);
|
|
||||||
|
|
||||||
text.setAttribute("width", renderItem['arguments'][3]);
|
|
||||||
text.setAttribute("height", renderItem['arguments'][4]);
|
|
||||||
el.appendChild(text);
|
|
||||||
defs.appendChild(el);
|
|
||||||
|
|
||||||
el = doc.createElementNS(svgNS, "image");
|
|
||||||
el.setAttributeNS(xlinkNS, "xlink:href", renderItem['arguments'][0].src);
|
|
||||||
el.setAttribute("width", renderItem['arguments'][7]);
|
|
||||||
el.setAttribute("height", renderItem['arguments'][8]);
|
|
||||||
el.setAttribute("x", renderItem['arguments'][5]);
|
|
||||||
el.setAttribute("y", renderItem['arguments'][6]);
|
|
||||||
el.setAttribute("clip-path", "url(#clipId" + clipId + ")");
|
|
||||||
// el.setAttribute("xlink:href", );
|
|
||||||
|
|
||||||
|
|
||||||
el.setAttribute("preserveAspectRatio", "none");
|
|
||||||
|
|
||||||
svg.appendChild(el);
|
|
||||||
|
|
||||||
|
|
||||||
clipId += 1;
|
|
||||||
/*
|
|
||||||
ctx.drawImage(
|
|
||||||
renderItem['arguments'][0],
|
|
||||||
renderItem['arguments'][1],
|
|
||||||
renderItem['arguments'][2],
|
|
||||||
renderItem['arguments'][3],
|
|
||||||
renderItem['arguments'][4],
|
|
||||||
renderItem['arguments'][5],
|
|
||||||
renderItem['arguments'][6],
|
|
||||||
renderItem['arguments'][7],
|
|
||||||
renderItem['arguments'][8]
|
|
||||||
);
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
if (storageContext.clip){
|
|
||||||
ctx.restore();
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
_html2canvas.Util.log("html2canvas: Renderer: SVG Renderer done - returning SVG DOM obj");
|
|
||||||
|
|
||||||
return svg;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return methods;
|
|
||||||
|
|
||||||
|
|
||||||
};
|
|
||||||
53
src/renderers/canvas.js
Normal file
53
src/renderers/canvas.js
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
function CanvasRenderer() {
|
||||||
|
Renderer.call(this);
|
||||||
|
this.canvas = document.createElement("canvas");
|
||||||
|
this.canvas.width = window.innerWidth;
|
||||||
|
this.canvas.height = window.innerHeight;
|
||||||
|
this.ctx = this.canvas.getContext("2d");
|
||||||
|
this.ctx.textBaseline = "bottom";
|
||||||
|
document.body.appendChild(this.canvas);
|
||||||
|
}
|
||||||
|
|
||||||
|
CanvasRenderer.prototype = Object.create(Renderer.prototype);
|
||||||
|
|
||||||
|
CanvasRenderer.prototype.setFillStyle = function(color) {
|
||||||
|
this.ctx.fillStyle = color;
|
||||||
|
return this.ctx;
|
||||||
|
};
|
||||||
|
|
||||||
|
CanvasRenderer.prototype.rectangle = function(left, top, width, height, color) {
|
||||||
|
this.setFillStyle(color).fillRect(left, top, width, height);
|
||||||
|
};
|
||||||
|
|
||||||
|
CanvasRenderer.prototype.drawShape = function(shape, color) {
|
||||||
|
this.shape(shape);
|
||||||
|
this.setFillStyle(color).fill();
|
||||||
|
};
|
||||||
|
|
||||||
|
CanvasRenderer.prototype.clip = function(shape, callback, context) {
|
||||||
|
this.ctx.save();
|
||||||
|
this.shape(shape).clip();
|
||||||
|
callback.call(context);
|
||||||
|
this.ctx.restore();
|
||||||
|
};
|
||||||
|
|
||||||
|
CanvasRenderer.prototype.shape = function(shape) {
|
||||||
|
this.ctx.beginPath();
|
||||||
|
shape.forEach(function(point, index) {
|
||||||
|
this.ctx[(index === 0) ? "moveTo" : point[0] + "To" ].apply(this.ctx, point.slice(1));
|
||||||
|
}, this);
|
||||||
|
this.ctx.closePath();
|
||||||
|
return this.ctx;
|
||||||
|
};
|
||||||
|
|
||||||
|
CanvasRenderer.prototype.font = function(color, style, variant, weight, size, family) {
|
||||||
|
this.setFillStyle(color).font = [style, variant, weight, size, family].join(" ");
|
||||||
|
};
|
||||||
|
|
||||||
|
CanvasRenderer.prototype.setOpacity = function(opacity) {
|
||||||
|
this.ctx.globalAlpha = opacity;
|
||||||
|
};
|
||||||
|
|
||||||
|
CanvasRenderer.prototype.text = function(text, left, bottom) {
|
||||||
|
this.ctx.fillText(text, left, bottom);
|
||||||
|
};
|
||||||
14
src/stackingcontext.js
Normal file
14
src/stackingcontext.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
function StackingContext(hasOwnStacking, opacity, element, parent) {
|
||||||
|
NodeContainer.call(this, element, parent);
|
||||||
|
this.ownStacking = hasOwnStacking;
|
||||||
|
this.contexts = [];
|
||||||
|
this.children = [];
|
||||||
|
this.opacity = (this.parent ? this.parent.stack.opacity : 1) * opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
StackingContext.prototype = Object.create(NodeContainer.prototype);
|
||||||
|
|
||||||
|
StackingContext.prototype.getParentStack = function(context) {
|
||||||
|
var parentStack = (this.parent) ? this.parent.stack : null;
|
||||||
|
return parentStack ? (parentStack.ownStacking ? parentStack : parentStack.getParentStack(context)) : context.stack;
|
||||||
|
};
|
||||||
28
src/support.js
Normal file
28
src/support.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
function Support() {
|
||||||
|
this.rangeBounds = this.testRangeBounds();
|
||||||
|
}
|
||||||
|
|
||||||
|
Support.prototype.testRangeBounds = function() {
|
||||||
|
var range, testElement, rangeBounds, rangeHeight, support = false;
|
||||||
|
|
||||||
|
if (document.createRange) {
|
||||||
|
range = document.createRange();
|
||||||
|
if (range.getBoundingClientRect) {
|
||||||
|
testElement = document.createElement('boundtest');
|
||||||
|
testElement.style.height = "123px";
|
||||||
|
testElement.style.display = "block";
|
||||||
|
document.body.appendChild(testElement);
|
||||||
|
|
||||||
|
range.selectNode(testElement);
|
||||||
|
rangeBounds = range.getBoundingClientRect();
|
||||||
|
rangeHeight = rangeBounds.height;
|
||||||
|
|
||||||
|
if (rangeHeight === 123) {
|
||||||
|
support = true;
|
||||||
|
}
|
||||||
|
document.body.removeChild(testElement);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return support;
|
||||||
|
};
|
||||||
29
src/textcontainer.js
Normal file
29
src/textcontainer.js
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
function TextContainer(node, parent) {
|
||||||
|
NodeContainer.call(this, node, parent);
|
||||||
|
}
|
||||||
|
|
||||||
|
TextContainer.prototype = Object.create(NodeContainer.prototype);
|
||||||
|
|
||||||
|
TextContainer.prototype.applyTextTransform = function() {
|
||||||
|
this.node.data = this.transform(this.parent.css("textTransform"));
|
||||||
|
};
|
||||||
|
|
||||||
|
TextContainer.prototype.transform = function(transform) {
|
||||||
|
var text = this.node.data;
|
||||||
|
switch(transform){
|
||||||
|
case "lowercase":
|
||||||
|
return text.toLowerCase();
|
||||||
|
case "capitalize":
|
||||||
|
return text.replace(/(^|\s|:|-|\(|\))([a-z])/g, capitalize);
|
||||||
|
case "uppercase":
|
||||||
|
return text.toUpperCase();
|
||||||
|
default:
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function capitalize(m, p1, p2) {
|
||||||
|
if (m.length > 0) {
|
||||||
|
return p1 + p2.toUpperCase();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -11,9 +11,9 @@ var h2cSelector, h2cOptions;
|
|||||||
|
|
||||||
document.write(srcStart + '/tests/assets/jquery-1.6.2.js' + scrEnd);
|
document.write(srcStart + '/tests/assets/jquery-1.6.2.js' + scrEnd);
|
||||||
document.write(srcStart + '/tests/assets/jquery.plugin.html2canvas.js' + scrEnd);
|
document.write(srcStart + '/tests/assets/jquery.plugin.html2canvas.js' + scrEnd);
|
||||||
var html2canvas = ['Core', 'Generate', 'Parse', 'Preload', 'Queue', 'Renderer', 'Util', 'Support', 'Font', 'renderers/Canvas'], i;
|
var html2canvas = ['nodecontainer', 'stackingcontext', 'textcontainer', 'support', 'core', 'renderer', 'renderers/canvas'], i;
|
||||||
for (i = 0; i < html2canvas.length; ++i) {
|
for (i = 0; i < html2canvas.length; ++i) {
|
||||||
document.write(srcStart + '/src/' + html2canvas[i] + '.js?' + Math.random() + scrEnd);
|
document.write(srcStart + '/new/' + html2canvas[i] + '.js?' + Math.random() + scrEnd);
|
||||||
}
|
}
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
h2cSelector = [document.body];
|
h2cSelector = [document.body];
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user