mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
Compare commits
1 Commits
v0.5.0-bet
...
0.3.0
| Author | SHA1 | Date | |
|---|---|---|---|
| 45ad98e73c |
18
.gitignore
vendored
18
.gitignore
vendored
@ -1,13 +1,9 @@
|
||||
/nbproject/
|
||||
/images/
|
||||
/tests/templates/
|
||||
/tests/cache/
|
||||
/dist/
|
||||
/build/tmp.js
|
||||
index.html
|
||||
image.jpg
|
||||
/.project
|
||||
dist/
|
||||
/.settings/
|
||||
node_modules/
|
||||
.envrc
|
||||
*.sublime-workspace
|
||||
*.baseline
|
||||
*.iml
|
||||
.idea/
|
||||
.DS_Store
|
||||
npm-debug.log
|
||||
screenshots_local.html
|
||||
3
.gitmodules
vendored
3
.gitmodules
vendored
@ -1,3 +0,0 @@
|
||||
[submodule "src/fabric"]
|
||||
path = src/fabric
|
||||
url = https://github.com/kangax/fabric.js.git
|
||||
19
.jshintrc
19
.jshintrc
@ -1,19 +0,0 @@
|
||||
{
|
||||
"curly": true,
|
||||
"eqeqeq": true,
|
||||
"immed": true,
|
||||
"latedef": false,
|
||||
"newcap": true,
|
||||
"noarg": true,
|
||||
"sub": true,
|
||||
"undef": true,
|
||||
"boss": true,
|
||||
"eqnull": true,
|
||||
"browser": true,
|
||||
"node": true,
|
||||
"indent": 4,
|
||||
"globals": {
|
||||
"jQuery": true
|
||||
},
|
||||
"predef": ["Promise", "define"]
|
||||
}
|
||||
10
.npmignore
10
.npmignore
@ -1,10 +0,0 @@
|
||||
tests/
|
||||
examples/
|
||||
Gruntfile.js
|
||||
bower.json
|
||||
src/
|
||||
*.iml
|
||||
.idea/
|
||||
.npmignore
|
||||
.jshintrc
|
||||
.travis.yml
|
||||
29
.travis.yml
29
.travis.yml
@ -1,29 +0,0 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- '0.10'
|
||||
env:
|
||||
global:
|
||||
- secure: eW41gIqOizwO4pTgWnAAbW75AP7F+CK9qfSed/fSh4sJ9HWMIY1YRIaY8gjr+6jV/f7XVHcXuym6ZxgINYSkVKbF1JKxBJNLOXtSgNbVHSic58pYFvUjwxIBI9aPig9uux1+DbnpWqXFDTcACJSevQZE0xwmjdrSkDLgB0G34v8=
|
||||
- secure: Y2Av+Gd3z9uQEB36GwdOOuGka0hx0/HeitASEo59z934O8RxnmN9eNTXS7dDT3XtKtwxIyLTOEpS7qlRdWahH28hr/dS4xJj6ao58C+1xMcDs6NAPGmDxUlcJWpcGEsnjmXjQCc3fBioSTdpIBrK/gdvgpNh77UKG74Sk7Z+YGk=
|
||||
- secure: YI+YbTOGf2x4fPMKW+KhJiZWswoXT6xOKGwLfsQsVwmFX1LerJouil5D5iYOQuL4FE3pNaoJSNakIsokJQuGKJMmnPc8rdhMZuBJBk6MRghurE2Xe9qBHfuUBPlfD61nARESm4WDcyMwM0QVYaOKeY6aIpZ91qbUbyc60EEx3C4=
|
||||
addons:
|
||||
sauce_connect: true
|
||||
before_script:
|
||||
- npm install -g grunt-cli
|
||||
- npm install -g uglify-js
|
||||
notifications:
|
||||
webhooks:
|
||||
urls:
|
||||
- https://webhooks.gitter.im/e/2b007d4f86de89588804
|
||||
on_success: always
|
||||
on_failure: always
|
||||
on_start: false
|
||||
deploy:
|
||||
- provider: npm
|
||||
email: niklasvh@gmail.com
|
||||
api_key:
|
||||
secure: G/Szpr8q4/D6hp+H/Z9yyluUXtHAwf7LLa1Y07X59/Enlj1h7V5fQ7AW4/iAVM3XbIsrCPWR3dJU9g/ZxpxFg4OovIHVpS2Jr/mahtPYWdHR3pWuSmMW8QD+Twnq2VAFwSgg5Oumq3QxhX3YbCOnZox6+6Uviqk8FO7Z5B0RwW4=
|
||||
on:
|
||||
tags: true
|
||||
branch: master
|
||||
repo: niklasvh/html2canvas
|
||||
57
CHANGELOG.md
57
CHANGELOG.md
@ -1,57 +0,0 @@
|
||||
### Changelog ###
|
||||
|
||||
v0.5.0-alpha2 - 3.2.2015
|
||||
* Switch to using browserify for building
|
||||
* Fix (#517) Chrome stretches background images with 'auto' or single attributes
|
||||
|
||||
v0.5.0-alpha - 19.1.2015
|
||||
* Complete rewrite of library
|
||||
* Switched interface to return Promise
|
||||
* Uses hidden iframe window to perform rendering, allowing async rendering and doesn't force the viewport to be scrolled to the top anymore.
|
||||
* Better support for unicode
|
||||
* Checkbox/radio button rendering
|
||||
* SVG rendering
|
||||
* iframe rendering
|
||||
* Changed format for proxy requests, permitting binary responses with CORS headers as well
|
||||
* Fixed many layering issues (see z-index tests)
|
||||
|
||||
v0.4.1 - 7.9.2013
|
||||
* Added support for bower
|
||||
* Improved z-index ordering
|
||||
* Basic implementation for CSS transformations
|
||||
* Fixed inline text in top element
|
||||
* Basic implementation for text-shadow
|
||||
|
||||
v0.4.0 - 30.1.2013
|
||||
* Added rendering tests with <a href="https://github.com/niklasvh/webdriver.js">webdriver</a>
|
||||
* Switched to using grunt for building
|
||||
* Removed support for IE<9, including any FlashCanvas bits
|
||||
* Support for border-radius
|
||||
* Support for multiple background images, size, and clipping
|
||||
* Support for :before and :after pseudo elements
|
||||
* Support for placeholder rendering
|
||||
* Reformatted all tests to small units to test specific features
|
||||
|
||||
v0.3.4 - 26.6.2012
|
||||
|
||||
* Removed (last?) jQuery dependencies (<a href="https://github.com/niklasvh/html2canvas/commit/343b86705fe163766fcf735eb0217130e4bd5b17">niklasvh</a>)
|
||||
* SVG-powered rendering (<a href="https://github.com/niklasvh/html2canvas/commit/67d3e0d0f59a5a654caf71a2e3be6494ff146c75">niklasvh</a>)
|
||||
* Radial gradients (<a href="https://github.com/niklasvh/html2canvas/commit/4f22c18043a73c0c3bbf3b5e4d62714c56acd3c7">SunboX</a>)
|
||||
* Split renderers to their own objects (<a href="https://github.com/niklasvh/html2canvas/commit/94f2f799a457cd29a21cc56ef8c06f1697866739">niklasvh</a>)
|
||||
* Simplified API, cleaned up code (<a href="https://github.com/niklasvh/html2canvas/commit/c7d526c9eaa6a4abf4754d205fe1dee360c7660e">niklasvh</a>)
|
||||
|
||||
v0.3.3 - 2.3.2012
|
||||
|
||||
* SVG taint fix, and additional taint testing options for rendering (<a href="https://github.com/niklasvh/html2canvas/commit/2dc8b9385e656696cb019d615bdfa1d98b17d5d4">niklasvh</a>)
|
||||
* Added support for CORS images and option to create canvas as tainted (<a href="https://github.com/niklasvh/html2canvas/commit/3ad49efa0032cde25c6ed32a39e35d1505d3b2ef">niklasvh</a>)
|
||||
* Improved minification saved ~1K! (<a href="https://github.com/cobexer/html2canvas/commit/b82be022b2b9240bd503e078ac980bde2b953e43">cobexer</a>)
|
||||
* Added integrated support for Flashcanvas (<a href="https://github.com/niklasvh/html2canvas/commit/e9257191519f67d74fd5e364d8dee3c0963ba5fc">niklasvh</a>)
|
||||
* Fixed a variety of legacy IE bugs (<a href="https://github.com/niklasvh/html2canvas/commit/b65357c55d0701017bafcd357bc654b54d458f8f">niklasvh</a>)
|
||||
|
||||
v0.3.2 - 20.2.2012
|
||||
|
||||
* Added changelog!
|
||||
* Added bookmarklet (<a href="https://github.com/niklasvh/html2canvas/commit/b320dd306e1a2d32a3bc5a71b6ebf6d8c060cde5">cobexer</a>)
|
||||
* Option to select single element to render (<a href="https://github.com/niklasvh/html2canvas/commit/0cb252ada91c84ef411288b317c03e97da1f12ad">niklasvh</a>)
|
||||
* Fixed closure compiler warnings (<a href="https://github.com/niklasvh/html2canvas/commit/36ff1ec7aadcbdf66851a0b77f0b9e87e4a8e4a1">cobexer</a>)
|
||||
* Enable profiling in FF (<a href="https://github.com/niklasvh/html2canvas/commit/bbd75286a8406cf9e5aea01fdb7950d547edefb9">cobexer</a>)
|
||||
220
Gruntfile.js
220
Gruntfile.js
@ -1,220 +0,0 @@
|
||||
/*global module:false*/
|
||||
var _ = require('lodash'), path = require('path');
|
||||
var proxy = require('html2canvas-proxy');
|
||||
|
||||
module.exports = function(grunt) {
|
||||
|
||||
var meta = {
|
||||
banner: '/*\n <%= pkg.title || pkg.name %> <%= pkg.version %>' +
|
||||
'<%= pkg.homepage ? " <" + pkg.homepage + ">" : "" %>' + '\n' +
|
||||
' Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>' +
|
||||
'\n\n Released under <%= _.pluck(pkg.licenses, "type").join(", ") %> License\n*/\n'
|
||||
};
|
||||
|
||||
var browsers = {
|
||||
chrome: {
|
||||
browserName: "chrome",
|
||||
platform: "Windows 7",
|
||||
version: "39"
|
||||
},
|
||||
firefox: {
|
||||
browserName: "firefox",
|
||||
version: "15",
|
||||
platform: "Windows 7"
|
||||
},
|
||||
ie9: {
|
||||
browserName: "internet explorer",
|
||||
version: "9",
|
||||
platform: "Windows 7"
|
||||
},
|
||||
ie10: {
|
||||
browserName: "internet explorer",
|
||||
version: "10",
|
||||
platform: "Windows 8"
|
||||
},
|
||||
ie11: {
|
||||
browserName: "internet explorer",
|
||||
version: "11",
|
||||
platform: "Windows 8.1"
|
||||
},
|
||||
safari6: {
|
||||
browserName: "safari",
|
||||
version: "6",
|
||||
platform: "OS X 10.8"
|
||||
},
|
||||
safari7:{
|
||||
browserName: "safari",
|
||||
platform: "OS X 10.9",
|
||||
version: "7"
|
||||
},
|
||||
chromeOSX:{
|
||||
browserName: "chrome",
|
||||
platform: "OS X 10.8",
|
||||
version: "39"
|
||||
}
|
||||
};
|
||||
grunt.initConfig({
|
||||
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
|
||||
browserify: {
|
||||
dist: {
|
||||
src: ['src/core.js'],
|
||||
dest: 'dist/<%= pkg.name %>.js',
|
||||
options: {
|
||||
browserifyOptions: {
|
||||
standalone: 'html2canvas'
|
||||
},
|
||||
banner: meta.banner
|
||||
}
|
||||
},
|
||||
svg: {
|
||||
src: [
|
||||
'src/fabric/dist/fabric.js'
|
||||
],
|
||||
dest: 'dist/<%= pkg.name %>.svg.js',
|
||||
options:{
|
||||
browserifyOptions: {
|
||||
standalone: 'html2canvas.svg'
|
||||
},
|
||||
banner: meta.banner
|
||||
}
|
||||
}
|
||||
},
|
||||
connect: {
|
||||
server: {
|
||||
options: {
|
||||
port: 8080,
|
||||
base: './',
|
||||
keepalive: true
|
||||
}
|
||||
},
|
||||
altServer: {
|
||||
options: {
|
||||
port: 8083,
|
||||
base: './'
|
||||
}
|
||||
},
|
||||
cors: {
|
||||
options: {
|
||||
port: 8081,
|
||||
base: './',
|
||||
middleware: function(connect, options) {
|
||||
return [
|
||||
function(req, res, next) {
|
||||
if (req.url !== '/tests/assets/image2.jpg') {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
res.setHeader("Access-Control-Allow-Origin", "*");
|
||||
res.end(require("fs").readFileSync('tests/assets/image2.jpg'));
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
},
|
||||
proxy: {
|
||||
options: {
|
||||
port: 8082,
|
||||
middleware: function(connect, options) {
|
||||
return [
|
||||
function(req, res, next) {
|
||||
res.jsonp = function(content) {
|
||||
res.end(req.query.callback + "(" + JSON.stringify(content) + ")");
|
||||
};
|
||||
next();
|
||||
},
|
||||
proxy()
|
||||
];
|
||||
}
|
||||
}
|
||||
},
|
||||
ci: {
|
||||
options: {
|
||||
port: 8080,
|
||||
base: './'
|
||||
}
|
||||
}
|
||||
},
|
||||
execute: {
|
||||
fabric: {
|
||||
options: {
|
||||
args: ['modules=' + ['text','serialization',
|
||||
'parser', 'gradient', 'pattern', 'shadow', 'freedrawing',
|
||||
'image_filters', 'serialization'].join(","), 'no-es5-compat', 'dest=' + path.resolve(__dirname, 'src/fabric/dist/') + '/']
|
||||
},
|
||||
src: ['src/fabric/build.js']
|
||||
}
|
||||
},
|
||||
uglify: {
|
||||
dist: {
|
||||
src: ['<%= browserify.dist.dest %>'],
|
||||
dest: 'dist/<%= pkg.name %>.min.js'
|
||||
},
|
||||
svg: {
|
||||
src: ['<%= browserify.svg.dest %>'],
|
||||
dest: 'dist/<%= pkg.name %>.svg.min.js'
|
||||
},
|
||||
options: {
|
||||
banner: meta.banner
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
files: ['src/**/*', '!src/fabric/**/*'],
|
||||
tasks: ['jshint', 'build']
|
||||
},
|
||||
jshint: {
|
||||
all: ['src/*.js', 'src/renderers/*.js'],
|
||||
options: grunt.file.readJSON('./.jshintrc')
|
||||
},
|
||||
mochacli: {
|
||||
options: {
|
||||
reporter: 'spec'
|
||||
},
|
||||
all: ['tests/node/*.js']
|
||||
},
|
||||
mocha_phantomjs: {
|
||||
all: ['tests/mocha/**/*.html']
|
||||
},
|
||||
mocha_webdriver: browsers,
|
||||
webdriver: browsers
|
||||
});
|
||||
|
||||
grunt.registerTask('webdriver', 'Browser render tests', function(browser, test) {
|
||||
var selenium = require("./tests/selenium.js");
|
||||
var done = this.async();
|
||||
var browsers = (browser) ? [grunt.config.get(this.name + "." + browser)] : _.values(grunt.config.get(this.name));
|
||||
selenium.tests(browsers, test).catch(function() {
|
||||
done(false);
|
||||
}).finally(function() {
|
||||
console.log("Done");
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
grunt.registerTask('mocha_webdriver', 'Browser mocha tests', function(browser, test) {
|
||||
var selenium = require("./tests/mocha/selenium.js");
|
||||
var done = this.async();
|
||||
var browsers = (browser) ? [grunt.config.get(this.name + "." + browser)] : _.values(grunt.config.get(this.name));
|
||||
selenium.tests(browsers, test).catch(function() {
|
||||
done(false);
|
||||
}).finally(function() {
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-browserify');
|
||||
grunt.loadNpmTasks('grunt-mocha-phantomjs');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-connect');
|
||||
grunt.loadNpmTasks('grunt-execute');
|
||||
grunt.loadNpmTasks('grunt-mocha-cli');
|
||||
|
||||
grunt.registerTask('server', ['connect:cors', 'connect:proxy', 'connect:altServer', 'connect:server']);
|
||||
grunt.registerTask('build', ['execute', 'browserify', 'uglify']);
|
||||
grunt.registerTask('default', ['jshint', 'build', 'mochacli', 'connect:altServer', 'mocha_phantomjs']);
|
||||
grunt.registerTask('travis', ['jshint', 'build', 'connect:altServer', 'connect:ci', 'connect:proxy', 'connect:cors', 'mocha_phantomjs', 'webdriver']);
|
||||
|
||||
};
|
||||
37
LICENSE
37
LICENSE
@ -1,22 +1,21 @@
|
||||
Copyright (c) 2012 Niklas von Hertzen
|
||||
/*
|
||||
* The MIT License
|
||||
|
||||
Permission is hereby granted, free of charge, to any person
|
||||
obtaining a copy of this software and associated documentation
|
||||
files (the "Software"), to deal in the Software without
|
||||
restriction, including without limitation the rights to use,
|
||||
copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the
|
||||
Software is furnished to do so, subject to the following
|
||||
conditions:
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"name": "html2canvas",
|
||||
"description": "Screenshots with JavaScript",
|
||||
"main": "dist/html2canvas.js",
|
||||
"ignore": [
|
||||
"tests",
|
||||
".travis.yml"
|
||||
]
|
||||
}
|
||||
83
build.xml
Normal file
83
build.xml
Normal file
@ -0,0 +1,83 @@
|
||||
<?xml version="1.0" encoding="ISO-8859-1"?>
|
||||
<project name="html2canvas" basedir=".">
|
||||
<property name="src.dir" location="src"/>
|
||||
<property name="lib.dir" location="lib"/>
|
||||
<property name="build.dir" location="build"/>
|
||||
<property name="dist" location="dist"/>
|
||||
|
||||
|
||||
<property name="jquery-externs" value="jquery-1.4.4.externs.js"/>
|
||||
|
||||
|
||||
<property name="JS_NAME" value="html2canvas.js"/>
|
||||
<property name="JS_NAME_MIN" value="html2canvas.min.js"/>
|
||||
<property name="JQUERY_PLUGIN_NAME" value="jquery.plugin.html2canvas.js"/>
|
||||
|
||||
|
||||
<path id="sourcefiles">
|
||||
<fileset dir="${src.dir}" includes="LICENSE"/>
|
||||
<fileset dir="." includes="LICENSE"/>
|
||||
<fileset dir="${src.dir}" includes="Core.js"/>
|
||||
<fileset dir="${src.dir}" includes="Background.js"/>
|
||||
<fileset dir="${src.dir}" includes="Border.js"/>
|
||||
<fileset dir="${src.dir}" includes="Draw.js"/>
|
||||
<fileset dir="${src.dir}" includes="Forms.js"/>
|
||||
<fileset dir="${src.dir}" includes="Images.js"/>
|
||||
<fileset dir="${src.dir}" includes="Parse.js"/>
|
||||
<fileset dir="${src.dir}" includes="Preload.js"/>
|
||||
<fileset dir="${src.dir}" includes="Queue.js"/>
|
||||
<fileset dir="${src.dir}" includes="Renderer.js"/>
|
||||
<fileset dir="${src.dir}" includes="Lists.js"/>
|
||||
<fileset dir="${src.dir}" includes="Text.js"/>
|
||||
<fileset dir="${src.dir}" includes="Traversing.js"/>
|
||||
<fileset dir="${src.dir}" includes="Util.js"/>
|
||||
</path>
|
||||
|
||||
<path id="jquery-plugin">
|
||||
<fileset dir="${src.dir}" includes="LICENSE"/>
|
||||
<fileset dir="." includes="LICENSE"/>
|
||||
<fileset dir="${src.dir}/plugins" includes="${JQUERY_PLUGIN_NAME}"/>
|
||||
</path>
|
||||
|
||||
<path id="minified">
|
||||
<fileset dir="${src.dir}" includes="LICENSE"/>
|
||||
<fileset dir="${build.dir}" includes="tmp.js"/>
|
||||
</path>
|
||||
|
||||
<target name="plugins">
|
||||
<concat fixlastline="yes" destfile="${build.dir}/${JQUERY_PLUGIN_NAME}">
|
||||
<path refid="jquery-plugin"/>
|
||||
</concat>
|
||||
</target>
|
||||
|
||||
|
||||
<target name="source">
|
||||
<concat fixlastline="yes" destfile="${build.dir}/${JS_NAME}">
|
||||
<path refid="sourcefiles"/>
|
||||
</concat>
|
||||
</target>
|
||||
|
||||
|
||||
<taskdef name="jscomp" classname="com.google.javascript.jscomp.ant.CompileTask"
|
||||
classpath="${lib.dir}/compiler.jar"/>
|
||||
|
||||
<target name="release">
|
||||
|
||||
<jscomp compilationLevel="simple" warning="verbose"
|
||||
debug="false"
|
||||
output="${build.dir}/tmp.js">
|
||||
<externs dir="${lib.dir}">
|
||||
<file name="${jquery-externs}"/>
|
||||
</externs>
|
||||
<sources dir="${build.dir}">
|
||||
<file name="${JS_NAME}" />
|
||||
</sources>
|
||||
</jscomp>
|
||||
|
||||
<concat fixlastline="yes" destfile="${build.dir}/${JS_NAME_MIN}">
|
||||
<path refid="minified"/>
|
||||
</concat>
|
||||
|
||||
</target>
|
||||
</project>
|
||||
|
||||
2159
build/html2canvas.js
Normal file
2159
build/html2canvas.js
Normal file
File diff suppressed because it is too large
Load Diff
55
build/html2canvas.min.js
vendored
Normal file
55
build/html2canvas.min.js
vendored
Normal file
@ -0,0 +1,55 @@
|
||||
/*
|
||||
* html2canvas v0.27 <http://html2canvas.hertzen.com>
|
||||
* Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
|
||||
* http://www.twitter.com/niklasvh
|
||||
*
|
||||
* Released under MIT License
|
||||
*/
|
||||
|
||||
function html2canvas(a,b){this.opts=this.extendObj(b||{},{logging:!1,ready:function(a){document.body.appendChild(a.canvas)},storageReady:function(a){a.Renderer(a.contextStacks)},iframeDefault:"default",flashCanvasPath:"http://html2canvas.hertzen.com/external/flashcanvas/flashcanvas.js",renderViewport:!1,reorderZ:!0,throttle:!0,letterRendering:!1,proxyUrl:null,logger:function(a){window.console&&window.console.log?window.console.log(a):alert(a)},canvasWidth:0,canvasHeight:0,useOverflow:!0,renderOrder:"canvas flash html"});
|
||||
this.element=a;this.imagesLoaded=0;this.images=[];this.fontData=[];this.numDraws=0;this.contextStacks=[];this.ignoreElements="IFRAME|OBJECT|PARAM";this.needReorder=!1;this.blockElements=/(BR|PARAM)/;this.pageOrigin=window.location.protocol+window.location.host;this.queue=[];this.ignoreRe=RegExp("("+this.ignoreElements+")");this.support={rangeBounds:!1};if(document.createRange){var c=document.createRange();if(c.getBoundingClientRect){var d=document.createElement("boundtest");d.style.height="123px";
|
||||
d.style.display="block";document.getElementsByTagName("body")[0].appendChild(d);c.selectNode(d);if(c.getBoundingClientRect().height==123)this.support.rangeBounds=!0;document.getElementsByTagName("body")[0].removeChild(d)}}this.init();return this}
|
||||
html2canvas.prototype.init=function(){var a=this;this.log("Finding background-images");this.images.push("start");this.getImages(this.element);this.log("Finding images");this.each(this.element.ownerDocument.images,function(b,c){a.preloadImage(a.getAttr(c,"src"))});this.images.splice(0,1);this.images.length==0&&this.start()};
|
||||
html2canvas.prototype.start=function(){if(this.images.length==0||this.imagesLoaded==this.images.length/2){this.log("Finished loading "+this.imagesLoaded+" images, Started parsing");this.bodyOverflow=document.getElementsByTagName("body")[0].style.overflow;document.getElementsByTagName("body")[0].style.overflow="hidden";var a=new this.storageContext($(document).width(),$(document).height());a.opacity=this.getCSS(this.element,"opacity");this.parseElement(this.element,this.newElement(this.element,a))}};
|
||||
html2canvas.prototype.stackingContext=function(a){this.canvas=document.createElement("canvas");this.canvas.width=a;this.canvas.height=a;if(this.canvas.getContext)this.ctx=this.canvas.getContext("2d");this.ctx.textBaseline="bottom";return this.ctx};
|
||||
html2canvas.prototype.storageContext=function(a,b){this.storage=[];this.width=a;this.height=b;this.fillRect=function(a,b,e,f){this.storage.push({type:"function",name:"fillRect",arguments:[a,b,e,f]})};this.drawImage=function(a,b,e,f,g,h,i,j,m){this.storage.push({type:"function",name:"drawImage",arguments:[a,b,e,f,g,h,i,j,m]})};this.fillText=function(a,b,e){this.storage.push({type:"function",name:"fillText",arguments:[a,b,e]})};return this};
|
||||
html2canvas.prototype.finish=function(){this.log("Finished rendering");document.getElementsByTagName("body")[0].style.overflow=this.bodyOverflow;this.opts.ready(this)};
|
||||
html2canvas.prototype.drawBackground=function(a,b,c){var d=this.getCSS(a,"background-image").split(",")[0],e=this.getCSS(a,"background-repeat").split(",")[0];if(typeof d!="undefined"&&/^(1|none)$/.test(d)==!1&&/^(-webkit|-moz|linear-gradient|-o-)/.test(d)==!1){var d=this.backgroundImageUrl(d),f=this.loadImage(d),a=this.getBackgroundPosition(a,b,f);if(f)switch(e){case "repeat-x":this.drawbackgroundRepeatX(c,f,a,b.left,b.top,b.width,b.height);break;case "repeat-y":this.drawbackgroundRepeatY(c,f,a,b.left,
|
||||
b.top,b.width,b.height);break;case "no-repeat":var d=b.width-a.left,e=b.height-a.top,g=a.left,h=a.top,i=a.left+b.left,j=a.top+b.top;g<0?(g=Math.abs(g),i+=g,d=Math.min(b.width,f.width-g)):(d=Math.min(d,f.width),g=0);h<0?(h=Math.abs(h),j+=h,e=Math.min(b.height,f.height-h)):(e=Math.min(e,f.height),h=0);if(e>0&&d>0){this.drawImage(c,f,g,h,d,e,i,j,d,e);break}default:a.top-=Math.ceil(a.top/f.height)*f.height;for(d=b.top+a.top;d<b.height+b.top;)e=Math.min(f.height,b.height+b.top-d),e=Math.floor(d+f.height)>
|
||||
e+d?e+d-d:f.height,d<b.top?(g=b.top-d,d=b.top):g=0,this.drawbackgroundRepeatX(c,f,a,b.left,d,b.width,e),g>0&&(a.top+=g),d=Math.floor(d+f.height)-g}else this.log("Error loading background:"+d)}};html2canvas.prototype.backgroundImageUrl=function(a){a.substr(0,5)=='url("'?(a=a.substr(5),a=a.substr(0,a.length-2)):(a=a.substr(4),a=a.substr(0,a.length-1));return a};
|
||||
html2canvas.prototype.getBackgroundPosition=function(a,b,c){var d=(this.getCSS(a,"backgroundPosition").split(",")[0]||"0 0").split(" "),e;d.length==1&&(a=d,d=[],d[0]=a,d[1]=a);d[0].toString().indexOf("%")!=-1?(e=parseFloat(d[0])/100,a=b.width*e-c.width*e):a=parseInt(d[0],10);d[1].toString().indexOf("%")!=-1?(e=parseFloat(d[1])/100,b=b.height*e-c.height*e):b=parseInt(d[1],10);c={};c.top=b;c.left=a;return c};
|
||||
html2canvas.prototype.drawbackgroundRepeatY=function(a,b,c,d,e,f,g){var h=Math.min(b.width,f),i;c.top-=Math.ceil(c.top/b.height)*b.height;for(i=e+c.top;i<g+e;)f=Math.floor(i+b.height)>g+e?g+e-i:b.height,this.drawBackgroundRepeat(a,b,d+c.left,i,h,f,d,e),i=Math.floor(i+b.height)};
|
||||
html2canvas.prototype.drawbackgroundRepeatX=function(a,b,c,d,e,f,g){var g=Math.min(b.height,g),h,i;c.left-=Math.ceil(c.left/b.width)*b.width;for(i=d+c.left;i<f+d;)h=Math.floor(i+b.width)>f+d?f+d-i:b.width,this.drawBackgroundRepeat(a,b,i,e+c.top,h,g,d,e),i=Math.floor(i+b.width)};html2canvas.prototype.drawBackgroundRepeat=function(a,b,c,d,e,f,g,h){var i=0,j=0;g-c>0&&(i=g-c);h-d>0&&(j=h-d);this.drawImage(a,b,i,j,e-i,f-j,c+i,d+j,e-i,f-j)};
|
||||
html2canvas.prototype.getBorderData=function(a){var b=[],c=this;this.each(["top","right","bottom","left"],function(d,e){b.push({width:parseInt(c.getCSS(a,"border-"+e+"-width"),10),color:c.getCSS(a,"border-"+e+"-color")})});return b};
|
||||
html2canvas.prototype.drawBorders=function(a,b,c,d){var e=c.left,f=c.top,g=c.width,h=c.height,i=this.getBorderData(a),j=this;this.each(i,function(a,c){if(c.width>0){var k=e,o=f,n=g,p=h-i[2].width;switch(a){case 0:p=i[0].width;break;case 1:k=e+g-i[1].width;n=i[1].width;break;case 2:o=o+h-i[2].width;p=i[2].width;break;case 3:n=i[3].width}n={left:k,top:o,width:n,height:p};d&&(n=j.clipBounds(n,d));n.width>0&&n.height>0&&j.newRect(b,k,o,n.width,n.height,c.color)}});return i};
|
||||
html2canvas.prototype.newElement=function(a,b){var c=this.getBounds(a),d=c.left,e=c.top,f=c.width,g=c.height,h;h=this.getCSS(a,"background-color");var i=this.getCSS(a,"position"),b=b||{},j=this.setZ(this.getCSS(a,"zIndex"),i,b.zIndex,a.parentNode),m=this.getCSS(a,"opacity"),l={ctx:new this.storageContext,zIndex:j,opacity:m*b.opacity,cssPosition:i};if(b.clip)l.clip=$.extend({},b.clip),l.clip.height-=b.borders[2].width;if(this.opts.useOverflow&&/(hidden|scroll|auto)/.test(this.getCSS(a,"overflow"))&&
|
||||
!/(BODY)/i.test(a.nodeName))l.clip=l.clip?this.clipBounds(l.clip,c):c;i=j.children.push(l);m=j.children[i-1].ctx;this.setContextVariable(m,"globalAlpha",l.opacity);var k=this.drawBorders(a,m,c);l.borders=k;this.ignoreRe.test(a.nodeName)&&this.opts.iframeDefault!="transparent"&&(h=this.opts.iframeDefault=="default"?"#efefef":this.opts.iframeDefault);f={left:d+k[3].width,top:e+k[0].width,width:f-(k[1].width+k[3].width),height:g-(k[0].width+k[2].width)};l.clip&&(f=this.clipBounds(f,l.clip));f.height>
|
||||
0&&f.width>0&&(this.newRect(m,f.left,f.top,f.width,f.height,h),this.drawBackground(a,f,m));switch(a.nodeName){case "IMG":(h=this.loadImage(this.getAttr(a,"src")))?this.drawImage(m,h,0,0,h.width,h.height,d+parseInt(this.getCSS(a,"padding-left"),10)+k[3].width,e+parseInt(this.getCSS(a,"padding-top"),10)+k[0].width,c.width-(k[1].width+k[3].width+parseInt(this.getCSS(a,"padding-left"),10)+parseInt(this.getCSS(a,"padding-right"),10)),c.height-(k[0].width+k[2].width+parseInt(this.getCSS(a,"padding-top"),
|
||||
10)+parseInt(this.getCSS(a,"padding-bottom"),10))):this.log("Error loading <img>:"+this.getAttr(a,"src"));break;case "INPUT":/^(text|url|email|submit|button|reset)$/.test(a.type)&&a.value.length>0&&this.renderFormValue(a,c,l);break;case "TEXTAREA":a.value.length>0&&this.renderFormValue(a,c,l);break;case "SELECT":a.options.length>0&&this.renderFormValue(a,c,l);break;case "LI":this.drawListItem(a,l,f)}return j.children[i-1]};
|
||||
html2canvas.prototype.printText=function(a,b,c,d){this.trim(a).length>0&&(d.fillText(a,b,c),this.numDraws++)};html2canvas.prototype.newRect=function(a,b,c,d,e,f){f!="transparent"&&(this.setContextVariable(a,"fillStyle",f),a.fillRect(b,c,d,e),this.numDraws++)};html2canvas.prototype.drawImage=function(a,b,c,d,e,f,g,h,i,j){a.drawImage(b,c,d,e,f,g,h,i,j);this.numDraws++};
|
||||
html2canvas.prototype.renderFormValue=function(a,b,c){var d=document.createElement("valuewrap"),e=this;this.each(["lineHeight","textAlign","fontFamily","color","fontSize","paddingLeft","paddingTop","width","height","border","borderLeftWidth","borderTopWidth"],function(b,c){d.style[c]=e.getCSS(a,c)});d.style.borderColor="black";d.style.borderStyle="solid";d.style.display="block";d.style.position="absolute";if(/^(submit|reset|button|text|password)$/.test(a.type)||a.nodeName=="SELECT")d.style.lineHeight=
|
||||
e.getCSS(a,"height");d.style.top=b.top+"px";d.style.left=b.left+"px";b=document.createTextNode(a.nodeName=="SELECT"?a.options[a.selectedIndex].text:a.value);d.appendChild(b);$("body").append(d);this.newText(a,b,c);$(d).remove()};
|
||||
html2canvas.prototype.getImages=function(a){var b=this;this.ignoreRe.test(a.nodeName)||this.each($(a).contents(),function(a,d){RegExp("("+this.ignoreElements+")").test(d.nodeName)||b.getImages(d)});if(a.nodeType==1||typeof a.nodeType=="undefined")(a=this.getCSS(a,"background-image"))&&a!="1"&&a!="none"&&a.substring(0,7)!="-webkit"&&a.substring(0,3)!="-o-"&&a.substring(0,4)!="-moz"&&this.preloadImage(this.backgroundImageUrl(a.split(",")[0]))};
|
||||
html2canvas.prototype.loadImage=function(a){a=this.getIndex(this.images,a);return a!=-1?this.images[a+1]:!1};html2canvas.prototype.preloadImage=function(a){if(this.getIndex(this.images,a)==-1)if(this.isSameOrigin(a)){this.images.push(a);var b=new Image,c=this;$(b).load(function(){c.imagesLoaded++;c.start()});b.onerror=function(){c.images.splice(c.images.indexOf(b.src),2);c.start()};b.src=a;this.images.push(b)}else this.opts.proxyUrl&&(this.images.push(a),b=new Image,this.proxyGetImage(a,b),this.images.push(b))};
|
||||
html2canvas.prototype.proxyGetImage=function(a,b){var c=this,d=document.createElement("a");d.href=a;a=d.href;$.ajax({data:{xhr2:!1,url:a},url:this.opts.proxyUrl,dataType:"jsonp",success:function(d){d.substring(0,6)=="error:"?(c.images.splice(c.images.indexOf(a),2),c.start(),c.log("Proxy was unable to load "+a+" "+d)):(b.onload=function(){c.imagesLoaded++;c.start()},b.src=d)},error:function(){c.images.splice(c.images.indexOf(a),2);c.start()}})};
|
||||
html2canvas.prototype.Renderer=function(a){var b=this;this.log("Renderer initiated");this.each(this.opts.renderOrder.split(" "),function(c,d){switch(d){case "canvas":b.canvas=document.createElement("canvas");if(b.canvas.getContext)return b.canvasRenderer(a),b.log("Using canvas renderer"),!1;break;case "html":return b.log("Using HTML renderer"),!1}});return this};html2canvas.prototype.throttler=function(){};
|
||||
html2canvas.prototype.canvasRenderContext=function(a,b){b.textBaseline="bottom";var c=this;a.clip&&(b.save(),b.beginPath(),b.rect(a.clip.left,a.clip.top,a.clip.width,a.clip.height),b.clip());a.ctx.storage&&c.each(a.ctx.storage,function(a,e){switch(e.type){case "variable":b[e.name]=e.arguments;break;case "function":e.name=="fillRect"?b.fillRect(e.arguments[0],e.arguments[1],e.arguments[2],e.arguments[3]):e.name=="fillText"?b.fillText(e.arguments[0],e.arguments[1],e.arguments[2]):e.name=="drawImage"?
|
||||
e.arguments[8]>0&&e.arguments[7]&&b.drawImage(e.arguments[0],e.arguments[1],e.arguments[2],e.arguments[3],e.arguments[4],e.arguments[5],e.arguments[6],e.arguments[7],e.arguments[8]):c.log(e)}});a.clip&&b.restore()};html2canvas.prototype.canvasRenderStorage=function(a,b){for(;0<a.length;){var c=a.splice(0,1)[0];c.canvasPosition=c.canvasPosition||{};this.canvasRenderContext(c,b)}};
|
||||
html2canvas.prototype.canvasRenderer=function(a){this.sortZ(this.zStack);a=this.queue;this.canvas.width=Math.max($(document).width(),this.opts.canvasWidth);this.canvas.height=Math.max($(document).height(),this.opts.canvasHeight);this.ctx=this.canvas.getContext("2d");this.canvasRenderStorage(a,this.ctx)};html2canvas.prototype.setContextVariable=function(a,b,c){a.storage?a.storage.push({type:"variable",name:b,arguments:c}):a[b]=c};
|
||||
html2canvas.prototype.drawListItem=function(a,b,c){var d=this.getCSS(a,"list-style-position",!1);this.getListItem(a);var e=this.getCSS(a,"list-style-type",!1);if(/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i.test(e)){var f=$(a).index()+1,g;e=="decimal"?g=f:e=="decimal-leading-zero"?g=f.toString().length==1?"0"+f.toString():f.toString():e=="upper-roman"?g=this.getListRoman(f):e=="lower-roman"?g=this.getListRoman(f).toLowerCase():
|
||||
e=="lower-alpha"?g=this.getListAlpha(f).toLowerCase():e=="upper-alpha"&&(g=this.getListAlpha(f));g+=". ";e=this.getListPosition(a,g);if(d=="inside")this.setFont(b.ctx,a,!1),a=c.left,c=e.bottom,this.printText(g,a,c,b.ctx)}};
|
||||
html2canvas.prototype.getListPosition=function(a,b){var c=document.createElement("boundelement");c.style.display="inline";var d=a.style.listStyleType;a.style.listStyleType="none";c.appendChild(document.createTextNode(b));a.insertBefore(c,a.firstChild);var e=this.getBounds(c);a.removeChild(c);a.style.listStyleType=d;return e};html2canvas.prototype.getListItem=function(){};html2canvas.prototype.getListAlpha=function(a){var b="";do b=String.fromCharCode(a%26+64)+b,a/=26;while(a*26>26);return b};
|
||||
html2canvas.prototype.getListRoman=function(a){var b=["M","CM","D","CD","C","XC","L","XL","X","IX","V","IV","I"],c=[1E3,900,500,400,100,90,50,40,10,9,5,4,1],d="";if(!(a<=0||a>=4E3)){for(var e=0;e<b.length;e++)for(;a>=c[e];)a-=c[e],d+=b[e];return d}};
|
||||
html2canvas.prototype.newText=function(a,b,c){var c=c.ctx,d=this.getCSS(a,"font-family"),e=this.getCSS(a,"font-size"),f=this.getCSS(a,"color"),g=this.getCSS(a,"text-decoration"),h=this.getCSS(a,"text-align"),i=this.getCSS(a,"letter-spacing");b.nodeValue=this.textTransform(b.nodeValue,this.getCSS(a,"text-transform"));if(this.trim(b.nodeValue).length>0){if(g!="none")var j=this.fontMetrics(d,e);h=h.replace(["-webkit-auto"],["auto"]);d=this.opts.letterRendering==!1&&/^(left|right|justify|auto)$/.test(h)&&
|
||||
/^(normal|none)$/.test(i)?b.nodeValue.split(/(\b| )/):b.nodeValue.split("");this.setFont(c,a,!1);a=b;for(b=0;b<d.length;b++)if(typeof a.nodeValue=="string"){e=a.splitText(d[b].length);if(g!="none"||this.trim(a.nodeValue).length!=0){if(this.support.rangeBounds)document.createRange?(h=document.createRange(),h.selectNode(a)):h=document.body.createTextRange(),h=h.getBoundingClientRect()?h.getBoundingClientRect():{};else{var i=a.parentNode,m=document.createElement("wrapper"),l=a.cloneNode(!0);m.appendChild(a.cloneNode(!0));
|
||||
i.replaceChild(m,a);h=this.getBounds(m);i.replaceChild(l,m)}this.printText(a.nodeValue,h.left,h.bottom,c);switch(g){case "underline":this.newRect(c,h.left,Math.round(h.top+j.baseline+j.lineWidth),h.width,1,f);break;case "overline":this.newRect(c,h.left,h.top,h.width,1,f);break;case "line-through":this.newRect(c,h.left,Math.ceil(h.top+j.middle+j.lineWidth),h.width,1,f)}}a=e}}};
|
||||
html2canvas.prototype.setFont=function(a,b,c){var d=this.getCSS(b,"font-family"),e=this.getCSS(b,"font-size"),f=this.getCSS(b,"color"),g=this.getCSS(b,"font-weight"),h=this.getCSS(b,"font-style"),b=this.getCSS(b,"font-variant");switch(g){case 401:g="bold";break;case 400:g="normal"}d=b+" "+g+" "+h+" "+e+" "+d;this.setContextVariable(a,"fillStyle",f);this.setContextVariable(a,"font",d);c?this.setContextVariable(a,"textAlign","right"):this.setContextVariable(a,"textAlign","left")};
|
||||
html2canvas.prototype.fontMetrics=function(a,b){var c=this.fontData.indexOf(a+"-"+b);if(c>-1)return this.fontData[c+1];c=document.createElement("div");document.getElementsByTagName("body")[0].appendChild(c);$(c).css({visibility:"hidden",fontFamily:a,fontSize:b,margin:0,padding:0});var d=document.createElement("img");d.src="http://html2canvas.hertzen.com/images/8.jpg";d.width=1;d.height=1;$(d).css({margin:0,padding:0});var e=document.createElement("span");$(e).css({fontFamily:a,fontSize:b,margin:0,
|
||||
padding:0});e.appendChild(document.createTextNode("Hidden Text"));c.appendChild(e);c.appendChild(d);var f=d.offsetTop-e.offsetTop+1;c.removeChild(e);c.appendChild(document.createTextNode("Hidden Text"));$(c).css("line-height","normal");$(d).css("vertical-align","super");d={baseline:f,lineWidth:1,middle:d.offsetTop-c.offsetTop+1};this.fontData.push(a+"-"+b);this.fontData.push(d);$(c).remove();return d};
|
||||
html2canvas.prototype.textTransform=function(a,b){switch(b){case "lowercase":return a.toLowerCase();case "capitalize":return a.replace(/(^|\s|:|-|\(|\))([a-z])/g,function(a,b,e){return b+e.toUpperCase()});case "uppercase":return a.toUpperCase();default:return a}};html2canvas.prototype.trim=function(a){return a.replace(/^\s*/,"").replace(/\s*$/,"")};
|
||||
html2canvas.prototype.parseElement=function(a,b){var c=this;this.each(a.children,function(a,e){c.parsing(e,b)});this.log("Render queue stored");this.opts.storageReady(this);this.finish()};html2canvas.prototype.parsing=function(a,b){if(this.getCSS(a,"display")!="none"&&this.getCSS(a,"visibility")!="hidden"){var c=this,b=this.newElement(a,b)||b;this.ignoreRe.test(a.nodeName)||this.each(this.contentsInZ(a),function(d,e){e.nodeType==1?c.parsing(e,b):e.nodeType==3&&c.newText(a,e,b)})}};
|
||||
html2canvas.prototype.log=function(a){this.opts.logging&&this.opts.logger(a)};html2canvas.prototype.withinBounds=function(a,b){return!a?!0:(a.left<=b.left||b.left+b.width<a.left)&&(a.top<=b.top||b.top+b.height<a.top)};html2canvas.prototype.clipBounds=function(a,b){var c=Math.max(a.left,b.left),d=Math.max(a.top,b.top);return{left:c,top:d,width:Math.min(a.left+a.width,b.left+b.width)-c,height:Math.min(a.top+a.height,b.top+b.height)-d}};
|
||||
html2canvas.prototype.getBounds=function(a){window.scroll(0,0);if(a.getBoundingClientRect){var a=a.getBoundingClientRect(),b={};b.top=a.top;b.bottom=a.bottom||a.top+a.height;b.left=a.left;b.width=a.width;b.height=a.height;return b}else return b=$(a).offset(),{left:b.left+this.getCSS(a,"border-left-width",!0),top:b.top+this.getCSS(a,"border-top-width",!0),width:$(a).innerWidth(),height:$(a).innerHeight()}};
|
||||
html2canvas.prototype.each=function(a,b){for(var b=b||function(){},c=0;c<a.length;c++)if(b(c,a[c])===!1)break};html2canvas.prototype.contentsInZ=function(a){return $(a).contents()};html2canvas.prototype.getAttr=function(a,b){return a.getAttribute(b)};html2canvas.prototype.extendObj=function(a,b){for(var c in a)b[c]=a[c];return b};html2canvas.prototype.zContext=function(a){return{zindex:a,children:[]}};
|
||||
html2canvas.prototype.setZ=function(a,b,c){return!c?this.zStack=new this.zContext(0):a!="auto"?(this.needReorder=!0,a=new this.zContext(a),c.children.push(a),a):c};html2canvas.prototype.sortZ=function(a){var b=[],c=[],d=this;this.each(a.children,function(a,f){f.children&&f.children.length>0?(b.push(f),c.push(f.zindex)):d.queue.push(f)});c.sort(function(a,b){return a-b});this.each(c,function(a,c){for(var g=0;g<=b.length;g++)if(b[g].zindex==c){g=b.splice(g,1);d.sortZ(g[0]);break}})};
|
||||
html2canvas.prototype.getContents=function(a){return a.nodeName=="iframe"?a.contentDocument||a.contentWindow.document:a.childNodes};html2canvas.prototype.getCSS=function(a,b,c){return c?parseInt($(a).css(b),10):$(a).css(b)};html2canvas.prototype.getIndex=function(a,b){if(a.indexOf)return a.indexOf(b);else{for(var c=0;c<a.length;c++)if(this[c]==b)return c;return-1}};html2canvas.prototype.isSameOrigin=function(a){var b=document.createElement("a");b.href=a;return b.protocol+b.host==this.pageOrigin};
|
||||
118
build/jquery.plugin.html2canvas.js
Normal file
118
build/jquery.plugin.html2canvas.js
Normal file
@ -0,0 +1,118 @@
|
||||
/*
|
||||
* html2canvas v0.25 <http://html2canvas.hertzen.com>
|
||||
* Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
|
||||
* http://www.twitter.com/niklasvh
|
||||
*
|
||||
* Released under MIT License
|
||||
*/
|
||||
|
||||
/*
|
||||
* The MIT License
|
||||
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* jQuery helper plugin for examples and tests
|
||||
*/
|
||||
|
||||
(function( $ ){
|
||||
$.fn.html2canvas = function(options) {
|
||||
|
||||
var date = new Date();
|
||||
var message,
|
||||
timeoutTimer,
|
||||
timer = date.getTime();
|
||||
|
||||
var object = $.extend({},{
|
||||
logging: false,
|
||||
proxyUrl: "http://html2canvas.appspot.com/", // running html2canvas-python proxy
|
||||
ready: function(renderer) {
|
||||
|
||||
var finishTime = new Date();
|
||||
// console.log((finishTime.getTime()-timer)/1000);
|
||||
|
||||
|
||||
document.body.appendChild(renderer.canvas);
|
||||
|
||||
|
||||
|
||||
var canvas = $(renderer.canvas);
|
||||
canvas.css('position','absolute')
|
||||
.css('left',0).css('top',0);
|
||||
|
||||
|
||||
|
||||
// $('body').append(canvas);
|
||||
$(canvas).siblings().toggle();
|
||||
|
||||
throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)/1000) + " seconds<br />Total of "+renderer.numDraws+" draws performed",4000);
|
||||
|
||||
|
||||
$(window).click(function(){
|
||||
if (!canvas.is(':visible')){
|
||||
$(canvas).toggle().siblings().toggle();
|
||||
throwMessage("Canvas Render visible");
|
||||
} else{
|
||||
$(canvas).siblings().toggle();
|
||||
$(canvas).toggle();
|
||||
throwMessage("Canvas Render hidden");
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
},options)
|
||||
|
||||
new html2canvas(this.get(0), object);
|
||||
|
||||
|
||||
function throwMessage(msg,duration){
|
||||
|
||||
window.clearTimeout(timeoutTimer);
|
||||
timeoutTimer = window.setTimeout(function(){
|
||||
message.fadeOut(function(){
|
||||
message.remove();
|
||||
});
|
||||
},duration || 2000);
|
||||
$(message).remove();
|
||||
message = $('<div />').html(msg).css({
|
||||
margin:0,
|
||||
padding:10,
|
||||
background: "#000",
|
||||
opacity:0.7,
|
||||
position:"fixed",
|
||||
top:10,
|
||||
right:10,
|
||||
fontFamily: 'Tahoma' ,
|
||||
color:'#fff',
|
||||
fontSize:12,
|
||||
borderRadius:12,
|
||||
width:'auto',
|
||||
height:'auto',
|
||||
textAlign:'center',
|
||||
textDecoration:'none'
|
||||
}).hide().fadeIn().appendTo('body');
|
||||
}
|
||||
|
||||
};
|
||||
})( jQuery );
|
||||
|
||||
186
demo2.html
Normal file
186
demo2.html
Normal file
@ -0,0 +1,186 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<script type="text/javascript" src="external/jquery-1.6.2.min.js"></script>
|
||||
<script type="text/javascript" src="build/html2canvas.js"></script>
|
||||
<script type="text/javascript" src="build/jquery.plugin.html2canvas.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('body').html2canvas();
|
||||
// var ss = $('ul').offset();
|
||||
// alert(ss.left);
|
||||
});
|
||||
</script>
|
||||
<title>
|
||||
display/box/float/clear test
|
||||
</title>
|
||||
<style type="text/css">
|
||||
/* last modified: 1 Dec 98 */
|
||||
|
||||
html {
|
||||
font: 10px/1 Verdana, sans-serif;
|
||||
background-color: blue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 1.5em;
|
||||
border: .5em solid black;
|
||||
padding: 0;
|
||||
width: 48em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
dt {
|
||||
background-color: rgb(204,0,0);
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
|
||||
height: 28em;
|
||||
border: .5em solid black;
|
||||
float: left;
|
||||
}
|
||||
|
||||
dd {
|
||||
float: right;
|
||||
margin: 0 0 0 1em;
|
||||
border: 1em solid black;
|
||||
padding: 1em;
|
||||
width: 34em;
|
||||
height: 27em;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block; /* i.e., suppress marker */
|
||||
color: black;
|
||||
height: 9em;
|
||||
width: 5em;
|
||||
margin: 0;
|
||||
border: .5em solid black;
|
||||
padding: 1em;
|
||||
float: left;
|
||||
background-color: #FC0;
|
||||
}
|
||||
|
||||
#bar {
|
||||
background-color: black;
|
||||
color: white;
|
||||
width: 41.17%; /* = 14em */
|
||||
border: 0;
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
#baz {
|
||||
margin: 1em 0;
|
||||
border: 0;
|
||||
padding: 1em;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
form p {
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1em 1em 1em 2em;
|
||||
border-width: 1em 1.5em 2em .5em;
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
padding: 1em 0;
|
||||
width: 5em;
|
||||
height: 9em;
|
||||
float: left;
|
||||
background-color: #FC0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
background-color: black;
|
||||
color: white;
|
||||
float: left;
|
||||
margin: 1em 0;
|
||||
border: 0;
|
||||
padding: 1em;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<dl>
|
||||
<dt>
|
||||
toggle
|
||||
</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>
|
||||
the way
|
||||
</li>
|
||||
<li id="bar">
|
||||
<p>
|
||||
the world ends
|
||||
</p>
|
||||
<form action="./" method="get">
|
||||
<p>
|
||||
bang
|
||||
<input type="radio" name="foo" value="off">
|
||||
</p>
|
||||
<p>
|
||||
whimper
|
||||
<input type="radio" name="foo2" value="on">
|
||||
</p>
|
||||
</form>
|
||||
</li>
|
||||
<li>
|
||||
i grow old
|
||||
</li>
|
||||
<li id="baz">
|
||||
pluot?
|
||||
</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<address>
|
||||
bar maids,
|
||||
</address>
|
||||
</blockquote>
|
||||
<h1>
|
||||
sing to me, erbarme dich
|
||||
</h1>
|
||||
</dd>
|
||||
</dl>
|
||||
<p style="color: black; font-size: 1em; line-height: 1.3em; clear: both">
|
||||
This is a nonsensical document, but syntactically valid HTML 4.0. All 100% conformant CSS1 agents should be able to render the document elements above this paragraph <b>indistinguishably</b> (to the pixel) from this reference rendering, (except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. Once you have finished evaluating this test, you can return to the <A HREF="sec5526c.htm" style="text-decoration:none">parent page</A>.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
72
demo3.html
Normal file
72
demo3.html
Normal file
@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
|
||||
|
||||
<script type="text/javascript" src="external/jquery-1.6.2.min.js"></script>
|
||||
<script type="text/javascript" src="build/html2canvas.js"></script>
|
||||
<script type="text/javascript" src="build/jquery.plugin.html2canvas.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
|
||||
|
||||
$('body').html2canvas();
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.feedback-overlay-black{
|
||||
background-color:#000;
|
||||
opacity:0.5;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
div{
|
||||
padding:20px;
|
||||
margin:0 auto;
|
||||
border:5px solid black;
|
||||
}
|
||||
|
||||
h1{
|
||||
border-bottom:2px solid white;
|
||||
}
|
||||
|
||||
h2{
|
||||
background: #efefef;
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="background:red;">
|
||||
<div style="background:green;">
|
||||
<div style="background:blue;border-color:white;">
|
||||
<div style="background:yellow;"><div style="background:orange;"><h1>Heading</h1>
|
||||
Text that isn't wrapped in anything.
|
||||
<p>Followed by some text wrapped in a <b><p> paragraph.</b> </p>
|
||||
Maybe add a <a href="#">link</a> or a different style of <a href="#" style="background:white;" id="highlight">link with a highlight</a>.
|
||||
<hr />
|
||||
<h2>More content</h2>
|
||||
<div style="width:10px;height:10px;border-width:10px;padding:0;">a</div>
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,181 +0,0 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
display/box/float/clear test
|
||||
</title>
|
||||
<style type="text/css">
|
||||
/* last modified: 1 Dec 98 */
|
||||
|
||||
html {
|
||||
font: 10px/1 Verdana, sans-serif;
|
||||
background-color: blue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 1.5em;
|
||||
border: .5em solid black;
|
||||
padding: 0;
|
||||
width: 48em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
dt {
|
||||
background-color: rgb(204,0,0);
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
|
||||
height: 28em;
|
||||
border: .5em solid black;
|
||||
float: left;
|
||||
}
|
||||
|
||||
dd {
|
||||
float: right;
|
||||
margin: 0 0 0 1em;
|
||||
border: 1em solid black;
|
||||
padding: 1em;
|
||||
width: 34em;
|
||||
height: 27em;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block; /* i.e., suppress marker */
|
||||
color: black;
|
||||
height: 9em;
|
||||
width: 5em;
|
||||
margin: 0;
|
||||
border: .5em solid black;
|
||||
padding: 1em;
|
||||
float: left;
|
||||
background-color: #FC0;
|
||||
}
|
||||
|
||||
#bar {
|
||||
background-color: black;
|
||||
color: white;
|
||||
width: 41.17%; /* = 14em */
|
||||
border: 0;
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
#baz {
|
||||
margin: 1em 0;
|
||||
border: 0;
|
||||
padding: 1em;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
form p {
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1em 1em 1em 2em;
|
||||
border-width: 1em 1.5em 2em .5em;
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
padding: 1em 0;
|
||||
width: 5em;
|
||||
height: 9em;
|
||||
float: left;
|
||||
background-color: #FC0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
background-color: black;
|
||||
color: white;
|
||||
float: left;
|
||||
margin: 1em 0;
|
||||
border: 0;
|
||||
padding: 1em;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<dl>
|
||||
<dt>
|
||||
toggle
|
||||
</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>
|
||||
the way
|
||||
</li>
|
||||
<li id="bar">
|
||||
<p>
|
||||
the world ends
|
||||
</p>
|
||||
<form action="./" method="get">
|
||||
<p>
|
||||
bang
|
||||
<input type="radio" name="foo" value="off">
|
||||
</p>
|
||||
<p>
|
||||
whimper
|
||||
<input type="radio" name="foo2" value="on">
|
||||
</p>
|
||||
</form>
|
||||
</li>
|
||||
<li>
|
||||
i grow old
|
||||
</li>
|
||||
<li id="baz">
|
||||
pluot?
|
||||
</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<address>
|
||||
bar maids,
|
||||
</address>
|
||||
</blockquote>
|
||||
<h1>
|
||||
sing to me, erbarme dich
|
||||
</h1>
|
||||
</dd>
|
||||
</dl>
|
||||
<p style="color: black; font-size: 1em; line-height: 1.3em; clear: both">
|
||||
This is a nonsensical document, but syntactically valid HTML 4.0. All 100% conformant CSS1 agents should be able to render the document elements above this paragraph <b>indistinguishably</b> (to the pixel) from this reference rendering, (except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. Once you have finished evaluating this test, you can return to the <A HREF="sec5526c.htm" style="text-decoration:none">parent page</A>.
|
||||
</p>
|
||||
<script type="text/javascript" src="../dist/html2canvas.js"></script>
|
||||
<script type="text/javascript">
|
||||
html2canvas(document.body).then(function(canvas) {
|
||||
document.body.appendChild(canvas);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,63 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<style>
|
||||
.feedback-overlay-black{
|
||||
background-color:#000;
|
||||
opacity:0.5;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
div{
|
||||
padding:20px;
|
||||
margin:0 auto;
|
||||
border:5px solid black;
|
||||
}
|
||||
|
||||
h1{
|
||||
border-bottom:2px solid white;
|
||||
}
|
||||
|
||||
h2{
|
||||
background: #efefef;
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="background:red;">
|
||||
<div style="background:green;">
|
||||
<div style="background:blue;border-color:white;">
|
||||
<div style="background:yellow;"><div style="background:orange;"><h1>Heading</h1>
|
||||
Text that isn't wrapped in anything.
|
||||
<p>Followed by some text wrapped in a <b><p> paragraph.</b> </p>
|
||||
Maybe add a <a href="#">link</a> or a different style of <a href="#" style="background:white;" id="highlight">link with a highlight</a>.
|
||||
<hr />
|
||||
<h2>More content</h2>
|
||||
<div style="width:10px;height:10px;border-width:10px;padding:0;">a</div>
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="../dist/html2canvas.js"></script>
|
||||
<script type="text/javascript">
|
||||
html2canvas(document.body).then(function(canvas) {
|
||||
document.body.appendChild(canvas);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,52 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Using an existing canvas to draw on</title>
|
||||
<style>
|
||||
canvas {
|
||||
border: 1px solid black;
|
||||
}
|
||||
button {
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
#content {
|
||||
background: rgba(100, 255, 255, 0.5);
|
||||
padding: 50px 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div><h1>HTML content to render:</h1>
|
||||
<div id="content">Render the content in this element <strong>only</strong> onto the existing canvas element</div>
|
||||
</div>
|
||||
<h1>Existing canvas:</h1>
|
||||
<canvas width="500" height="200"></canvas>
|
||||
<script type="text/javascript" src="../dist/html2canvas.js"></script>
|
||||
<button>Run html2canvas</button>
|
||||
<script type="text/javascript">
|
||||
var canvas = document.querySelector("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
|
||||
ctx.moveTo(110,75);
|
||||
ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
|
||||
ctx.moveTo(65,65);
|
||||
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
|
||||
ctx.moveTo(95,65);
|
||||
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
|
||||
ctx.stroke();
|
||||
|
||||
document.querySelector("button").addEventListener("click", function() {
|
||||
html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function(canvas) {
|
||||
console.log('Drew on the existing canvas');
|
||||
});
|
||||
}, false);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
18
external/jquery-1.6.2.min.js
vendored
Normal file
18
external/jquery-1.6.2.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
lib/compiler.jar
Normal file
BIN
lib/compiler.jar
Normal file
Binary file not shown.
1204
lib/jquery-1.4.4.externs.js
Normal file
1204
lib/jquery-1.4.4.externs.js
Normal file
File diff suppressed because it is too large
Load Diff
BIN
loading.gif
Normal file
BIN
loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
50
package.json
50
package.json
@ -1,50 +0,0 @@
|
||||
{
|
||||
"title": "html2canvas",
|
||||
"name": "html2canvas",
|
||||
"description": "Screenshots with JavaScript",
|
||||
"main": "dist/html2canvas.js",
|
||||
"version": "0.5.0-beta2",
|
||||
"author": {
|
||||
"name": "Niklas von Hertzen",
|
||||
"email": "niklasvh@gmail.com",
|
||||
"url": "http://hertzen.com"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:niklasvh/html2canvas.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/niklasvh/html2canvas/issues"
|
||||
},
|
||||
"devDependencies": {
|
||||
"base64-arraybuffer": ">= 0.1.4",
|
||||
"bluebird": "2.7.1",
|
||||
"grunt": "^0.4.5",
|
||||
"grunt-browserify": "^3.3.0",
|
||||
"grunt-contrib-connect": "^0.8.0",
|
||||
"grunt-contrib-jshint": "^0.10.0",
|
||||
"grunt-contrib-uglify": "^0.6.0",
|
||||
"grunt-contrib-watch": "^0.6.1",
|
||||
"grunt-execute": "^0.2.2",
|
||||
"grunt-mocha-cli": "^1.12.0",
|
||||
"grunt-mocha-phantomjs": "^2.0.0",
|
||||
"html2canvas-proxy": "0.0.5",
|
||||
"humanize-duration": "^2.0.1",
|
||||
"lodash": "^2.4.1",
|
||||
"png-js": ">= 0.1.1",
|
||||
"requirejs": "^2.1.20",
|
||||
"wd": "^0.2.21"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "grunt travis --verbose"
|
||||
},
|
||||
"homepage": "http://html2canvas.hertzen.com",
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT"
|
||||
}
|
||||
]
|
||||
}
|
||||
90
readme.md
90
readme.md
@ -1,90 +1,36 @@
|
||||
html2canvas
|
||||
===========
|
||||
|
||||
[Homepage](http://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](http://stackoverflow.com/questions/tagged/html2canvas?sort=newest) | [Donate](https://www.gittip.com/niklasvh/)
|
||||
|
||||
[](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [](https://travis-ci.org/niklasvh/html2canvas)
|
||||
|
||||
#### JavaScript HTML renderer ####
|
||||
|
||||
The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
|
||||
|
||||
This script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
|
||||
|
||||
|
||||
###How does it work?###
|
||||
The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements.
|
||||
The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements. However, as many elements are displayed differently on different browsers and operating systems (such as form elements such as radio buttons or checkboxes) as well as
|
||||
|
||||
It does **not require any rendering from the server**, as the whole image is created on the **clients browser**. However, as it is heavily dependent on the browser, this library is *not suitable* to be used in nodejs.
|
||||
It doesn't magically circumvent any browser content policy restrictions either, so rendering cross-origin content will require a [proxy](https://github.com/niklasvh/html2canvas/wiki/Proxies) to get the content to the [same origin](http://en.wikipedia.org/wiki/Same_origin_policy).
|
||||
It does <b>not require any rendering from the server</b>, as the whole image is created on the <b>clients browser</b>. However, for browsers without <code>canvas</code> support alternatives such as <a href="http://flashcanvas.net/">flashcanvas</a> or <a href="http://excanvas.sourceforge.net/">ExplorerCanvas</a> are necessary to create the image.
|
||||
|
||||
The script is still in a **very experimental state**, so I don't recommend using it in a production environment nor start building applications with it yet, as there will be still major changes made.
|
||||
Additionally, to render <code>iframe</code> content or images situated outside of the <a href="http://en.wikipedia.org/wiki/Same_origin_policy">same origin policy</a> a proxy will be necessary to load the content to the users browser.
|
||||
|
||||
The script is still in a very experimental state, so I don't recommend using it in a production environment nor start building applications with it yet, as there will be still major changes made. However, please do test it out and report your findings, especially if something should be working, but is displaying it incorrectly.
|
||||
|
||||
###Browser compatibility###
|
||||
|
||||
The library should work fine on the following browsers (with `Promise` polyfill):
|
||||
The script should work fine on the following browsers:
|
||||
|
||||
* Firefox 3.5+
|
||||
* Google Chrome
|
||||
* Opera 12+
|
||||
* IE9+
|
||||
* Safari 6+
|
||||
* Google Chrome
|
||||
* Newer versions of Opera (exactly how new is yet to be determined)
|
||||
* >=IE9 (Older versions compatible with the use of flashcanvas)
|
||||
|
||||
Note that the compatibility will most likely be increased in future builds, as many of the current restrictions have at least partial work arounds, which can be used with older browser versions.
|
||||
|
||||
As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported.
|
||||
|
||||
### Usage ###
|
||||
|
||||
The html2canvas library utilizes `Promise`s and expects them to be available in the global context. If you wish to
|
||||
support [older browsers](http://caniuse.com/#search=promise) that do not natively support `Promise`s, please include a polyfill such as
|
||||
[es6-promise](https://github.com/jakearchibald/es6-promise) before including `html2canvas`.
|
||||
|
||||
**Note!** These instructions are for using the current dev version of 0.5, for the latest release version (0.4.1), checkout the [old readme](https://github.com/niklasvh/html2canvas/blob/v0.4/readme.md).
|
||||
|
||||
To render an `element` with html2canvas, simply call:
|
||||
` html2canvas(element[, options]);`
|
||||
|
||||
The function returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) containing the `<canvas>` element. Simply add a promise fullfillment handler to the promise using `then`:
|
||||
|
||||
html2canvas(document.body).then(function(canvas) {
|
||||
document.body.appendChild(canvas);
|
||||
});
|
||||
|
||||
### Building ###
|
||||
|
||||
The library uses [grunt](http://gruntjs.com/) for building. Alternatively, you can download the latest build from [here](https://github.com/niklasvh/html2canvas/blob/master/dist/html2canvas.js).
|
||||
|
||||
Clone git repository with submodules:
|
||||
|
||||
$ git clone --recursive git://github.com/niklasvh/html2canvas.git
|
||||
|
||||
Install Grunt and uglifyjs:
|
||||
|
||||
$ npm install -g grunt-cli uglify-js
|
||||
|
||||
Run the full build process (including lint, qunit and webdriver tests):
|
||||
|
||||
$ grunt
|
||||
|
||||
Skip lint and tests and simply build from source:
|
||||
|
||||
$ grunt build
|
||||
|
||||
### Running tests ###
|
||||
|
||||
The library has two sets of tests. The first set is a number of qunit tests that check that different values parsed by browsers are correctly converted in html2canvas. To run these tests with grunt you'll need [phantomjs](http://phantomjs.org/).
|
||||
|
||||
The other set of tests run Firefox, Chrome and Internet Explorer with [webdriver](https://github.com/niklasvh/webdriver.js). The selenium standalone server (runs on Java) is required for these tests and can be downloaded from [here](http://code.google.com/p/selenium/downloads/list). They capture an actual screenshot from the test pages and compare the image to the screenshot created by html2canvas and calculate the percentage differences. These tests generally aren't expected to provide 100% matches, but while commiting changes, these should generally not go decrease from the baseline values.
|
||||
|
||||
Start by downloading the dependencies:
|
||||
|
||||
$ npm install
|
||||
|
||||
Run qunit tests:
|
||||
|
||||
$ grunt test
|
||||
###So what isn't included yet?###
|
||||
|
||||
There are still a lot of CSS properties missing, including most CSS3 properties such as <code>text-shadow</code>, <code>box-radius</code> etc. as well as all elements created by the browser, such as radio and checkbox buttons and list icons. I will compile a full list of supported elements and CSS properties soon.
|
||||
There is no support for <code>frame</code> and <code>object</code> content such as Flash.
|
||||
|
||||
### Examples ###
|
||||
|
||||
For more information and examples, please visit the [homepage](http://html2canvas.hertzen.com) or try the [test console](http://html2canvas.hertzen.com/screenshots.html).
|
||||
|
||||
### Contributing ###
|
||||
|
||||
If you wish to contribute to the project, please send the pull requests to the develop branch. Before submitting any changes, try and test that the changes work with all the support browsers. If some CSS property isn't supported or is incomplete, please create appropriate tests for it as well before submitting any code changes.
|
||||
For more information and examples, please visit the <a href="http://html2canvas.hertzen.com">homepage</a> or try the <a href="http://html2canvas.hertzen.com/screenshots.html">test console</a>.
|
||||
326
screenshots.html
Normal file
326
screenshots.html
Normal file
@ -0,0 +1,326 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JavaScript screenshot creator</title>
|
||||
|
||||
<style type="text/css">
|
||||
a {
|
||||
color: #0B0B0B;
|
||||
background-color: #FDF9EE;
|
||||
padding: 0 8px;
|
||||
text-decoration: none;
|
||||
font: normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #0B0B0B;
|
||||
background-color: #EFEBDE;
|
||||
padding: 0 8px;
|
||||
text-decoration: none;
|
||||
font: normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
body {
|
||||
font: normal 14px/19px Arial, Helvetica, sans-serif;
|
||||
background-color: white;
|
||||
color: #4E4628;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background-color: #EFEBDE;
|
||||
color: #0B0B0B;
|
||||
border: #C3BCA4 1px solid;
|
||||
|
||||
|
||||
|
||||
|
||||
font: normal 11px Arial, Helvetica, sans-serif;
|
||||
width:300px;
|
||||
height:150px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
background-color: white;
|
||||
color: #0B0B0B;
|
||||
font: normal 28px/46px Georgia, "Times New Roman", Times, serif;
|
||||
margin:0;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
||||
color: #786E4E;
|
||||
padding: 0 0 10px 55px;
|
||||
|
||||
|
||||
height: 37px;
|
||||
font: normal 24px/30px Georgia, "Times New Roman", Times, serif;
|
||||
}
|
||||
ul{
|
||||
float:left;
|
||||
margin:0;
|
||||
|
||||
}
|
||||
|
||||
table{
|
||||
margin:0 auto;
|
||||
width:400px;
|
||||
border:1px solid black;
|
||||
}
|
||||
#content{
|
||||
clear:both;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#about{
|
||||
padding:0 10px;
|
||||
width:450px;
|
||||
float:left;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="external/jquery-1.6.2.min.js"></script>
|
||||
<script type="text/javascript" src="build/html2canvas.js?221"></script>
|
||||
<script type="text/javascript" src="build/jquery.plugin.html2canvas.js"></script>
|
||||
<script type="text/javascript" src="http://www.hertzen.com/js/ganalytics-heatmap.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var date = new Date();
|
||||
var message,
|
||||
timeoutTimer,
|
||||
timer;
|
||||
|
||||
var proxyUrl = "http://html2canvas.appspot.com";
|
||||
|
||||
function addRow(table,field,val){
|
||||
var tr = $('<tr />').appendTo( $(table));
|
||||
|
||||
tr.append($('<td />').css('font-weight','bold').text(field)).append($('<td />').text(val));
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function throwMessage(msg,duration){
|
||||
|
||||
window.clearTimeout(timeoutTimer);
|
||||
timeoutTimer = window.setTimeout(function(){
|
||||
message.fadeOut(function(){
|
||||
message.remove();
|
||||
});
|
||||
},duration || 2000);
|
||||
$(message).remove();
|
||||
message = $('<div />').html(msg).css({
|
||||
margin:0,
|
||||
padding:10,
|
||||
background: "#000",
|
||||
opacity:0.7,
|
||||
position:"fixed",
|
||||
top:10,
|
||||
right:10,
|
||||
fontFamily: 'Tahoma' ,
|
||||
color:'#fff',
|
||||
fontSize:12,
|
||||
borderRadius:12,
|
||||
width:'auto',
|
||||
height:'auto',
|
||||
textAlign:'center',
|
||||
textDecoration:'none'
|
||||
}).hide().fadeIn().appendTo('body');
|
||||
}
|
||||
|
||||
$(function(){
|
||||
|
||||
$('ul li a').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#url').val(this.href);
|
||||
$('button').click();
|
||||
})
|
||||
|
||||
var iframe,d;
|
||||
|
||||
|
||||
|
||||
|
||||
$('input[type="button"]').click(function(){
|
||||
$(iframe.contentWindow).unbind('load');
|
||||
$(iframe).contents().find('body').html2canvas({
|
||||
canvasHeight: d.body.scrollHeight,
|
||||
canvasWidth: d.body.scrollWidth,
|
||||
logging:true
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
$('button').click(function(){
|
||||
|
||||
$(this).prop('disabled',true);
|
||||
var url = $('#url').val();
|
||||
$('#content').append($('<img />').attr('src','loading.gif').css('margin-top',40));
|
||||
|
||||
var urlParts = document.createElement('a');
|
||||
urlParts.href = url;
|
||||
|
||||
$.ajax({
|
||||
data: {
|
||||
xhr2:false,
|
||||
url:urlParts.href
|
||||
|
||||
},
|
||||
url: proxyUrl,
|
||||
dataType: "jsonp",
|
||||
success: function(html){
|
||||
|
||||
|
||||
iframe = document.createElement('iframe');
|
||||
$(iframe).css({
|
||||
'visibility':'hidden'
|
||||
}).width($(window).width()).height($(window).height());
|
||||
$('#content').append(iframe);
|
||||
d = iframe.contentWindow.document;
|
||||
|
||||
d.open();
|
||||
|
||||
$(iframe.contentWindow).load(function(){
|
||||
|
||||
timer = date.getTime();
|
||||
|
||||
$(iframe).contents().find('body').html2canvas({
|
||||
canvasHeight: d.body.scrollHeight,
|
||||
canvasWidth: d.body.scrollWidth,
|
||||
logging:true,
|
||||
proxyUrl: proxyUrl,
|
||||
logger:function(msg){
|
||||
$('#logger').val(function(e,i){
|
||||
return i+"\n"+msg;
|
||||
});
|
||||
|
||||
},
|
||||
ready: function(renderer) {
|
||||
$('button').prop('disabled',false);
|
||||
$("#content").empty();
|
||||
var finishTime = new Date();
|
||||
|
||||
var table = $('<table />');
|
||||
$('#content')
|
||||
.append('<h2>Screenshot</h2>')
|
||||
.append(renderer.canvas)
|
||||
.append('<h3>Details</h3>')
|
||||
.append(table);
|
||||
|
||||
|
||||
|
||||
addRow(table,"Creation time",((finishTime.getTime()-timer)/1000) + " seconds");
|
||||
addRow(table,"Total draws", renderer.numDraws);
|
||||
addRow(table,"Context stacks", renderer.contextStacks.length);
|
||||
addRow(table,"Loaded images", renderer.images.length/2);
|
||||
addRow(table,"Performed z-index reorder", renderer.needReorder);
|
||||
addRow(table,"Used rangeBounds", renderer.support.rangeBounds);
|
||||
|
||||
|
||||
|
||||
throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)/1000) + " seconds<br />Total of "+renderer.numDraws+" draws performed",4000);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
$('base').attr('href',urlParts.protocol+"//"+urlParts.hostname+"/");
|
||||
html = html.replace("<head>","<head><base href='"+urlParts.protocol+"//"+urlParts.hostname+"/' />");
|
||||
if ($("#disablejs").prop('checked')){
|
||||
html = html.replace(/\<script/gi,"<!--<script");
|
||||
html = html.replace(/\<\/script\>/gi,"<\/script>-->");
|
||||
}
|
||||
// console.log(html);
|
||||
d.write(html);
|
||||
|
||||
d.close();
|
||||
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-188600-10']);_gaq.push(['_trackPageview']);(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();
|
||||
|
||||
</script>
|
||||
<base />
|
||||
</head>
|
||||
<body>
|
||||
<!-- <div style="background:red;padding:10px;color:#fff">
|
||||
App engine proxy is <a href="http://twitter.com/#!/Niklasvh/status/96265826713350144">temporarily out of use</a> due to exceeded bandwidth use. Please try again tomorrow or meanwhile check other examples <a href="http://html2canvas.hertzen.com/">here</a>.
|
||||
</div>-->
|
||||
|
||||
<div style="float:left;width:500px;">
|
||||
<h1>JavaScript screenshot creator</h1>
|
||||
<label for="url">Website URL:</label>
|
||||
<input type="url" id="url" value="http://www.yahoo.com" /><button>Get screenshot!</button>
|
||||
<!-- <input type="button" value="Try anyway" />--><br />
|
||||
|
||||
|
||||
<label for="disablejs">Disable JavaScript (recommended, doesn't work well with the proxy)</label> <input type="checkbox" id="disablejs" checked /><br />
|
||||
<small>Tested with Google Chrome 12, Firefox 4 and Opera 11.5</small>
|
||||
</div>
|
||||
<div style="float:right;">
|
||||
<div style="margin-left:17px;float:right;">
|
||||
<!-- Place this tag in your head or just before your close body tag -->
|
||||
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
|
||||
|
||||
<!-- Place this tag where you want the +1 button to render -->
|
||||
<g:plusone size="tall"></g:plusone>
|
||||
</div>
|
||||
|
||||
<div style="float:right;">
|
||||
|
||||
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://html2canvas.hertzen.com/" data-text="html2canvas - screenshots with #JavaScript" data-count="vertical" data-via="niklasvh">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="clear:both;"></div>
|
||||
<h3>Recommended (tested) pages:</h3>
|
||||
|
||||
<ul>
|
||||
|
||||
<li><a href="http://www.yahoo.com">yahoo.com</a></li>
|
||||
<li><a href="http://www.google.com">google.com</a></li>
|
||||
<li><a href="https://github.com/niklasvh/html2canvas">github.com</a></li>
|
||||
<li><a href="http://www.smashingmagazine.com">smashingmagazine.com</a></li>
|
||||
<li><a href="http://www.mashable.com">mashable.com</a></li>
|
||||
<li><a href="http://www.facebook.com/google">facebook.com/google</a></li>
|
||||
<li><a href="http://www.youtube.com/">youtube.com</a></li>
|
||||
<li><a href="http://www.cnn.com/">cnn.com</a></li>
|
||||
|
||||
<li><a href="http://www.engadget.com/">engadget.com (lot of elements, very slow)</a></li>
|
||||
<li><a href="http://eu.battle.net/en/">battle.net</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
<div style="float:left;">
|
||||
<textarea id="logger"></textarea>
|
||||
</div>
|
||||
<div id="about"><b> About</b><br />
|
||||
The whole screenshot is created with JavaScript. The only server interaction that is happening on this page is the proxy for loading the external pages/images into JSONP/CORS enabled page and onwards onto the JavaScript renderer script.
|
||||
There are a lot of problems of loading external pages, even with a proxy, and as such many pages will not render at all. If you wish to try the script properly, I recommend you get a copy of the source from <a href="https://github.com/niklasvh/html2canvas">here</a> instead.
|
||||
</div>
|
||||
<div id="content"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
300
src/Background.js
Normal file
300
src/Background.js
Normal file
@ -0,0 +1,300 @@
|
||||
|
||||
|
||||
html2canvas.prototype.drawBackground = function(el,bounds,ctx){
|
||||
|
||||
// TODO add support for multi background-images
|
||||
var background_image = this.getCSS(el,"background-image").split(",")[0];
|
||||
var background_repeat = this.getCSS(el,"background-repeat").split(",")[0];
|
||||
|
||||
if (typeof background_image != "undefined" && /^(1|none)$/.test(background_image)==false && /^(-webkit|-moz|linear-gradient|-o-)/.test(background_image)==false){
|
||||
|
||||
background_image = this.backgroundImageUrl(background_image);
|
||||
var image = this.loadImage(background_image);
|
||||
|
||||
|
||||
var bgp = this.getBackgroundPosition(el,bounds,image),
|
||||
bgy;
|
||||
|
||||
if (image){
|
||||
switch(background_repeat){
|
||||
|
||||
case "repeat-x":
|
||||
this.drawbackgroundRepeatX(ctx,image,bgp,bounds.left,bounds.top,bounds.width,bounds.height);
|
||||
break;
|
||||
|
||||
case "repeat-y":
|
||||
this.drawbackgroundRepeatY(ctx,image,bgp,bounds.left,bounds.top,bounds.width,bounds.height);
|
||||
break;
|
||||
|
||||
case "no-repeat":
|
||||
/*
|
||||
this.drawBackgroundRepeat(
|
||||
ctx,
|
||||
image,
|
||||
bgp.left+bounds.left, // sx
|
||||
bgp.top+bounds.top, // sy
|
||||
Math.min(bounds.width,image.width),
|
||||
Math.min(bounds.height,image.height),
|
||||
bounds.left,
|
||||
bounds.top
|
||||
);*/
|
||||
|
||||
|
||||
// console.log($(el).css('background-image'));
|
||||
var bgw = bounds.width-bgp.left,
|
||||
bgh = bounds.height-bgp.top,
|
||||
bgsx = bgp.left,
|
||||
bgsy = bgp.top,
|
||||
bgdx = bgp.left+bounds.left,
|
||||
bgdy = bgp.top+bounds.top;
|
||||
|
||||
//
|
||||
// bgw = Math.min(bgw,image.width);
|
||||
// bgh = Math.min(bgh,image.height);
|
||||
|
||||
if (bgsx<0){
|
||||
bgsx = Math.abs(bgsx);
|
||||
bgdx += bgsx;
|
||||
bgw = Math.min(bounds.width,image.width-bgsx);
|
||||
}else{
|
||||
bgw = Math.min(bgw,image.width);
|
||||
bgsx = 0;
|
||||
}
|
||||
|
||||
if (bgsy<0){
|
||||
bgsy = Math.abs(bgsy);
|
||||
bgdy += bgsy;
|
||||
// bgh = bgh-bgsy;
|
||||
bgh = Math.min(bounds.height,image.height-bgsy);
|
||||
}else{
|
||||
bgh = Math.min(bgh,image.height);
|
||||
bgsy = 0;
|
||||
}
|
||||
|
||||
|
||||
// bgh = Math.abs(bgh);
|
||||
// bgw = Math.abs(bgw);
|
||||
if (bgh>0 && bgw > 0){
|
||||
this.drawImage(
|
||||
ctx,
|
||||
image,
|
||||
bgsx, // source X : 0
|
||||
bgsy, // source Y : 1695
|
||||
bgw, // source Width : 18
|
||||
bgh, // source Height : 1677
|
||||
bgdx, // destination X :906
|
||||
bgdy, // destination Y : 1020
|
||||
bgw, // destination width : 18
|
||||
bgh // destination height : 1677
|
||||
);
|
||||
|
||||
// ctx.drawImage(image,(bounds.left+bgp.left),(bounds.top+bgp.top));
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
var height,
|
||||
add;
|
||||
|
||||
|
||||
bgp.top = bgp.top-Math.ceil(bgp.top/image.height)*image.height;
|
||||
|
||||
|
||||
for(bgy=(bounds.top+bgp.top);bgy<bounds.height+bounds.top;){
|
||||
|
||||
|
||||
|
||||
var h = Math.min(image.height,(bounds.height+bounds.top)-bgy);
|
||||
|
||||
|
||||
if ( Math.floor(bgy+image.height)>h+bgy){
|
||||
height = (h+bgy)-bgy;
|
||||
}else{
|
||||
height = image.height;
|
||||
}
|
||||
// console.log(height);
|
||||
|
||||
if (bgy<bounds.top){
|
||||
add = bounds.top-bgy;
|
||||
bgy = bounds.top;
|
||||
|
||||
}else{
|
||||
add = 0;
|
||||
}
|
||||
|
||||
this.drawbackgroundRepeatX(ctx,image,bgp,bounds.left,bgy,bounds.width,height);
|
||||
if (add>0){
|
||||
bgp.top += add;
|
||||
}
|
||||
bgy = Math.floor(bgy+image.height)-add;
|
||||
}
|
||||
break;
|
||||
|
||||
|
||||
}
|
||||
}else{
|
||||
|
||||
this.log("Error loading background:" + background_image);
|
||||
//console.log(images);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Function to retrieve the actual src of a background-image
|
||||
*/
|
||||
|
||||
html2canvas.prototype.backgroundImageUrl = function(src){
|
||||
if (src.substr(0,5)=='url("'){
|
||||
src = src.substr(5);
|
||||
src = src.substr(0,src.length-2);
|
||||
}else{
|
||||
src = src.substr(4);
|
||||
src = src.substr(0,src.length-1);
|
||||
}
|
||||
|
||||
|
||||
return src;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Function to retrieve background-position, both in pixels and %
|
||||
*/
|
||||
|
||||
html2canvas.prototype.getBackgroundPosition = function(el,bounds,image){
|
||||
// TODO add support for multi image backgrounds
|
||||
|
||||
var bgpos = this.getCSS(el,"backgroundPosition").split(",")[0] || "0 0";
|
||||
// var bgpos = $(el).css("backgroundPosition") || "0 0";
|
||||
var bgposition = bgpos.split(" "),
|
||||
topPos,
|
||||
left,
|
||||
percentage;
|
||||
|
||||
if (bgposition.length==1){
|
||||
var val = bgposition,
|
||||
bgposition = [];
|
||||
|
||||
bgposition[0] = val,
|
||||
bgposition[1] = val;
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (bgposition[0].toString().indexOf("%")!=-1){
|
||||
|
||||
percentage = (parseFloat(bgposition[0])/100);
|
||||
left = ((bounds.width * percentage)-(image.width*percentage));
|
||||
|
||||
}else{
|
||||
left = parseInt(bgposition[0],10);
|
||||
}
|
||||
|
||||
if (bgposition[1].toString().indexOf("%")!=-1){
|
||||
|
||||
percentage = (parseFloat(bgposition[1])/100);
|
||||
topPos = ((bounds.height * percentage)-(image.height*percentage));
|
||||
}else{
|
||||
|
||||
topPos = parseInt(bgposition[1],10);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
var returnObj = {}
|
||||
/*
|
||||
"top": topPos,
|
||||
"left": left
|
||||
};*/
|
||||
|
||||
|
||||
returnObj.top = topPos;
|
||||
returnObj.left = left;
|
||||
|
||||
|
||||
|
||||
return returnObj;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
html2canvas.prototype.drawbackgroundRepeatY = function(ctx,image,bgp,x,y,w,h){
|
||||
|
||||
var height,
|
||||
width = Math.min(image.width,w),bgy;
|
||||
|
||||
bgp.top = bgp.top-Math.ceil(bgp.top/image.height)*image.height;
|
||||
|
||||
|
||||
for(bgy=(y+bgp.top);bgy<h+y;){
|
||||
|
||||
|
||||
if ( Math.floor(bgy+image.height)>h+y){
|
||||
height = (h+y)-bgy;
|
||||
}else{
|
||||
height = image.height;
|
||||
}
|
||||
this.drawBackgroundRepeat(ctx,image,x+bgp.left,bgy,width,height,x,y);
|
||||
|
||||
bgy = Math.floor(bgy+image.height);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
html2canvas.prototype.drawbackgroundRepeatX = function(ctx,image,bgp,x,y,w,h){
|
||||
|
||||
var height = Math.min(image.height,h),
|
||||
width,bgx;
|
||||
|
||||
|
||||
bgp.left = bgp.left-Math.ceil(bgp.left/image.width)*image.width;
|
||||
|
||||
|
||||
for(bgx=(x+bgp.left);bgx<w+x;){
|
||||
|
||||
if (Math.floor(bgx+image.width)>w+x){
|
||||
width = (w+x)-bgx;
|
||||
}else{
|
||||
width = image.width;
|
||||
}
|
||||
|
||||
this.drawBackgroundRepeat(ctx,image,bgx,(y+bgp.top),width,height,x,y);
|
||||
|
||||
bgx = Math.floor(bgx+image.width);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
html2canvas.prototype.drawBackgroundRepeat = function(ctx,image,x,y,width,height,elx,ely){
|
||||
var sourceX = 0,
|
||||
sourceY=0;
|
||||
if (elx-x>0){
|
||||
sourceX = elx-x;
|
||||
}
|
||||
|
||||
if (ely-y>0){
|
||||
sourceY = ely-y;
|
||||
}
|
||||
|
||||
this.drawImage(
|
||||
ctx,
|
||||
image,
|
||||
sourceX, // source X
|
||||
sourceY, // source Y
|
||||
width-sourceX, // source Width
|
||||
height-sourceY, // source Height
|
||||
x+sourceX, // destination X
|
||||
y+sourceY, // destination Y
|
||||
width-sourceX, // destination width
|
||||
height-sourceY // destination height
|
||||
);
|
||||
}
|
||||
85
src/Border.js
Normal file
85
src/Border.js
Normal file
@ -0,0 +1,85 @@
|
||||
/*
|
||||
* Function to provide border details for an element
|
||||
*/
|
||||
|
||||
html2canvas.prototype.getBorderData = function(el){
|
||||
|
||||
var borders = [];
|
||||
var _ = this;
|
||||
this.each(["top","right","bottom","left"],function(i,borderSide){
|
||||
borders.push({
|
||||
width: parseInt(_.getCSS(el,'border-'+borderSide+'-width'),10),
|
||||
color: _.getCSS(el,'border-'+borderSide+'-color')
|
||||
});
|
||||
});
|
||||
|
||||
return borders;
|
||||
|
||||
}
|
||||
|
||||
html2canvas.prototype.drawBorders = function(el,ctx, bounds,clip){
|
||||
|
||||
|
||||
var x = bounds.left;
|
||||
var y = bounds.top;
|
||||
var w = bounds.width;
|
||||
var h = bounds.height;
|
||||
|
||||
/*
|
||||
* TODO add support for different border-style's than solid
|
||||
*/
|
||||
var borders = this.getBorderData(el);
|
||||
var _ = this;
|
||||
|
||||
this.each(borders,function(borderSide,borderData){
|
||||
if (borderData.width>0){
|
||||
var bx = x,
|
||||
by = y,
|
||||
bw = w,
|
||||
bh = h-(borders[2].width);
|
||||
switch(borderSide){
|
||||
case 0:
|
||||
// top border
|
||||
bh = borders[0].width;
|
||||
break;
|
||||
case 1:
|
||||
// right border
|
||||
bx = x+w-(borders[1].width);
|
||||
bw = borders[1].width;
|
||||
break;
|
||||
case 2:
|
||||
// bottom border
|
||||
by = (by+h)-(borders[2].width);
|
||||
bh = borders[2].width;
|
||||
break;
|
||||
case 3:
|
||||
// left border
|
||||
bw = borders[3].width;
|
||||
break;
|
||||
}
|
||||
|
||||
var borderBounds = {
|
||||
left:bx,
|
||||
top:by,
|
||||
width: bw,
|
||||
height:bh
|
||||
};
|
||||
|
||||
if (clip){
|
||||
borderBounds = _.clipBounds(borderBounds,clip);
|
||||
}
|
||||
|
||||
|
||||
if (borderBounds.width>0 && borderBounds.height>0){
|
||||
_.newRect(ctx,bx,by,borderBounds.width,borderBounds.height,borderData.color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
return borders;
|
||||
|
||||
};
|
||||
260
src/Core.js
Normal file
260
src/Core.js
Normal file
@ -0,0 +1,260 @@
|
||||
/**
|
||||
* Creates a render of the element el
|
||||
* @constructor
|
||||
*/
|
||||
|
||||
function html2canvas(el, userOptions) {
|
||||
|
||||
var options = userOptions || {};
|
||||
|
||||
|
||||
this.opts = this.extendObj(options, {
|
||||
logging: false,
|
||||
ready: function (stack) {
|
||||
document.body.appendChild(stack.canvas);
|
||||
},
|
||||
storageReady: function(obj){
|
||||
obj.Renderer(obj.contextStacks);
|
||||
},
|
||||
iframeDefault: "default",
|
||||
flashCanvasPath: "http://html2canvas.hertzen.com/external/flashcanvas/flashcanvas.js",
|
||||
renderViewport: false,
|
||||
reorderZ: true,
|
||||
throttle:true,
|
||||
letterRendering:false,
|
||||
proxyUrl: null,
|
||||
logger: function(a){
|
||||
if (window.console && window.console.log){
|
||||
window.console.log(a);
|
||||
}else{
|
||||
alert(a);
|
||||
}
|
||||
},
|
||||
canvasWidth:0,
|
||||
canvasHeight:0,
|
||||
useOverflow: true,
|
||||
renderOrder: "canvas flash html"
|
||||
});
|
||||
|
||||
this.element = el;
|
||||
|
||||
var imageLoaded,
|
||||
canvas,
|
||||
ctx,
|
||||
bgx,
|
||||
bgy,
|
||||
image;
|
||||
this.imagesLoaded = 0;
|
||||
this.images = [];
|
||||
this.fontData = [];
|
||||
this.numDraws = 0;
|
||||
this.contextStacks = [];
|
||||
this.ignoreElements = "IFRAME|OBJECT|PARAM";
|
||||
this.needReorder = false;
|
||||
this.blockElements = new RegExp("(BR|PARAM)");
|
||||
this.pageOrigin = window.location.protocol + window.location.host;
|
||||
this.queue = [];
|
||||
|
||||
this.ignoreRe = new RegExp("("+this.ignoreElements+")");
|
||||
|
||||
|
||||
this.support = {
|
||||
rangeBounds: false
|
||||
|
||||
};
|
||||
|
||||
// Test whether we can use ranges to measure bounding boxes
|
||||
// Opera doesn't provide valid bounds.height/bottom even though it supports the method.
|
||||
|
||||
|
||||
if (document.createRange){
|
||||
var r = document.createRange();
|
||||
//this.support.rangeBounds = new Boolean(r.getBoundingClientRect);
|
||||
if (r.getBoundingClientRect){
|
||||
var testElement = document.createElement('boundtest');
|
||||
testElement.style.height = "123px";
|
||||
testElement.style.display = "block";
|
||||
document.getElementsByTagName('body')[0].appendChild(testElement);
|
||||
|
||||
r.selectNode(testElement);
|
||||
var rangeBounds = r.getBoundingClientRect();
|
||||
var rangeHeight = rangeBounds.height;
|
||||
|
||||
if (rangeHeight==123){
|
||||
this.support.rangeBounds = true;
|
||||
}
|
||||
document.getElementsByTagName('body')[0].removeChild(testElement);
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Start script
|
||||
this.init();
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
html2canvas.prototype.init = function(){
|
||||
|
||||
var _ = this;
|
||||
/*
|
||||
this.ctx = new this.stackingContext($(document).width(),$(document).height());
|
||||
|
||||
if (!this.ctx){
|
||||
// canvas not initialized, let's kill it here
|
||||
this.log('Canvas not available');
|
||||
return;
|
||||
}
|
||||
|
||||
this.canvas = this.ctx.canvas;
|
||||
*/
|
||||
this.log('Finding background-images');
|
||||
|
||||
this.images.push('start');
|
||||
|
||||
this.getImages(this.element);
|
||||
|
||||
this.log('Finding images');
|
||||
// console.log(this.element.ownerDocument);
|
||||
|
||||
|
||||
|
||||
this.each(this.element.ownerDocument.images,function(i,e){
|
||||
_.preloadImage(_.getAttr(e,'src'));
|
||||
});
|
||||
this.images.splice(0,1);
|
||||
// console.log(this.images);
|
||||
if (this.images.length == 0){
|
||||
this.start();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* Check whether all assets have been loaded and start traversing the DOM
|
||||
*/
|
||||
|
||||
html2canvas.prototype.start = function(){
|
||||
// console.log(this.images);
|
||||
if (this.images.length == 0 || this.imagesLoaded==this.images.length/2){
|
||||
|
||||
this.log('Finished loading '+this.imagesLoaded+' images, Started parsing');
|
||||
this.bodyOverflow = document.getElementsByTagName('body')[0].style.overflow;
|
||||
document.getElementsByTagName('body')[0].style.overflow = "hidden";
|
||||
var rootStack = new this.storageContext($(document).width(),$(document).height());
|
||||
rootStack.opacity = this.getCSS(this.element,"opacity");
|
||||
var stack = this.newElement(this.element,rootStack);
|
||||
|
||||
|
||||
this.parseElement(this.element,stack);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
html2canvas.prototype.stackingContext = function(width,height){
|
||||
this.canvas = document.createElement('canvas');
|
||||
|
||||
|
||||
this.canvas.width = width;
|
||||
this.canvas.height = width;
|
||||
|
||||
if (!this.canvas.getContext){
|
||||
|
||||
// TODO include Flashcanvas
|
||||
/*
|
||||
var script = document.createElement('script');
|
||||
script.type = "text/javascript";
|
||||
script.src = this.opts.flashCanvasPath;
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(script, s);
|
||||
|
||||
if (typeof FlashCanvas != "undefined") {
|
||||
|
||||
FlashCanvas.initElement(this.canvas);
|
||||
this.ctx = this.canvas.getContext('2d');
|
||||
} */
|
||||
|
||||
}else{
|
||||
this.ctx = this.canvas.getContext('2d');
|
||||
}
|
||||
|
||||
// set common settings for canvas
|
||||
this.ctx.textBaseline = "bottom";
|
||||
|
||||
return this.ctx;
|
||||
|
||||
}
|
||||
|
||||
html2canvas.prototype.storageContext = function(width,height){
|
||||
this.storage = [];
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
//this.zIndex;
|
||||
|
||||
// todo simplify this whole section
|
||||
this.fillRect = function(x, y, w, h){
|
||||
this.storage.push(
|
||||
{
|
||||
type: "function",
|
||||
name:"fillRect",
|
||||
arguments:[x,y,w,h]
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
this.drawImage = function(image,sx,sy,sw,sh,dx,dy,dw,dh){
|
||||
this.storage.push(
|
||||
{
|
||||
type: "function",
|
||||
name:"drawImage",
|
||||
arguments:[image,sx,sy,sw,sh,dx,dy,dw,dh]
|
||||
});
|
||||
};
|
||||
|
||||
this.fillText = function(currentText,x,y){
|
||||
|
||||
this.storage.push(
|
||||
{
|
||||
type: "function",
|
||||
name:"fillText",
|
||||
arguments:[currentText,x,y]
|
||||
});
|
||||
}
|
||||
|
||||
return this;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Finished rendering, send callback
|
||||
*/
|
||||
|
||||
html2canvas.prototype.finish = function(){
|
||||
|
||||
this.log("Finished rendering");
|
||||
|
||||
document.getElementsByTagName('body')[0].style.overflow = this.bodyOverflow;
|
||||
/*
|
||||
if (this.opts.renderViewport){
|
||||
// let's crop it to viewport only then
|
||||
var newCanvas = document.createElement('canvas');
|
||||
var newctx = newCanvas.getContext('2d');
|
||||
newCanvas.width = window.innerWidth;
|
||||
newCanvas.height = window.innerHeight;
|
||||
|
||||
}*/
|
||||
this.opts.ready(this);
|
||||
}
|
||||
|
||||
226
src/Draw.js
Normal file
226
src/Draw.js
Normal file
@ -0,0 +1,226 @@
|
||||
html2canvas.prototype.newElement = function(el,parentStack){
|
||||
|
||||
var bounds = this.getBounds(el);
|
||||
|
||||
var x = bounds.left;
|
||||
var y = bounds.top;
|
||||
var w = bounds.width;
|
||||
var h = bounds.height;
|
||||
var _ = this,
|
||||
image;
|
||||
var bgcolor = this.getCSS(el,"background-color");
|
||||
|
||||
var cssPosition = this.getCSS(el,"position");
|
||||
parentStack = parentStack || {};
|
||||
|
||||
//var zindex = this.formatZ(this.getCSS(el,"zIndex"),cssPosition,parentStack.zIndex,el.parentNode);
|
||||
|
||||
var zindex = this.setZ(this.getCSS(el,"zIndex"),cssPosition,parentStack.zIndex,el.parentNode);
|
||||
|
||||
//console.log(el.nodeName+":"+zindex+":"+this.getCSS(el,"position")+":"+this.numDraws+":"+this.getCSS(el,"z-index"))
|
||||
|
||||
var opacity = this.getCSS(el,"opacity");
|
||||
|
||||
|
||||
var stack = {
|
||||
ctx: new this.storageContext(),
|
||||
zIndex: zindex,
|
||||
opacity: opacity*parentStack.opacity,
|
||||
cssPosition: cssPosition
|
||||
};
|
||||
|
||||
|
||||
|
||||
// TODO correct overflow for absolute content residing under a static position
|
||||
if (parentStack.clip){
|
||||
stack.clip = $.extend({}, parentStack.clip);
|
||||
//stack.clip = parentStack.clip;
|
||||
stack.clip.height = stack.clip.height - parentStack.borders[2].width;
|
||||
}
|
||||
|
||||
|
||||
if (this.opts.useOverflow && /(hidden|scroll|auto)/.test(this.getCSS(el,"overflow")) && !/(BODY)/i.test(el.nodeName)){
|
||||
if (stack.clip){
|
||||
stack.clip = this.clipBounds(stack.clip,bounds);
|
||||
}else{
|
||||
stack.clip = bounds;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
/*
|
||||
var stackLength = this.contextStacks.push(stack);
|
||||
|
||||
var ctx = this.contextStacks[stackLength-1].ctx;
|
||||
*/
|
||||
|
||||
var stackLength = zindex.children.push(stack);
|
||||
|
||||
var ctx = zindex.children[stackLength-1].ctx;
|
||||
|
||||
this.setContextVariable(ctx,"globalAlpha",stack.opacity);
|
||||
|
||||
// draw element borders
|
||||
var borders = this.drawBorders(el, ctx, bounds);
|
||||
stack.borders = borders;
|
||||
|
||||
// let's modify clip area for child elements, so borders dont get overwritten
|
||||
|
||||
/*
|
||||
if (stack.clip){
|
||||
stack.clip.width = stack.clip.width-(borders[1].width);
|
||||
stack.clip.height = stack.clip.height-(borders[2].width);
|
||||
}
|
||||
*/
|
||||
if (this.ignoreRe.test(el.nodeName) && this.opts.iframeDefault != "transparent"){
|
||||
if (this.opts.iframeDefault=="default"){
|
||||
bgcolor = "#efefef";
|
||||
/*
|
||||
* TODO write X over frame
|
||||
*/
|
||||
}else{
|
||||
bgcolor = this.opts.iframeDefault;
|
||||
}
|
||||
}
|
||||
|
||||
// draw base element bgcolor
|
||||
|
||||
var bgbounds = {
|
||||
left: x+borders[3].width,
|
||||
top: y+borders[0].width,
|
||||
width: w-(borders[1].width+borders[3].width),
|
||||
height: h-(borders[0].width+borders[2].width)
|
||||
};
|
||||
|
||||
//if (this.withinBounds(stack.clip,bgbounds)){
|
||||
|
||||
if (stack.clip){
|
||||
bgbounds = this.clipBounds(bgbounds,stack.clip);
|
||||
|
||||
//}
|
||||
|
||||
}
|
||||
|
||||
if (bgbounds.height>0 && bgbounds.width>0){
|
||||
this.newRect(
|
||||
ctx,
|
||||
bgbounds.left,
|
||||
bgbounds.top,
|
||||
bgbounds.width,
|
||||
bgbounds.height,
|
||||
bgcolor
|
||||
);
|
||||
|
||||
this.drawBackground(el,bgbounds,ctx);
|
||||
}
|
||||
|
||||
switch(el.nodeName){
|
||||
case "IMG":
|
||||
image = _.loadImage(_.getAttr(el,'src'));
|
||||
if (image){
|
||||
// console.log(image.width);
|
||||
this.drawImage(
|
||||
ctx,
|
||||
image,
|
||||
0, //sx
|
||||
0, //sy
|
||||
image.width, //sw
|
||||
image.height, //sh
|
||||
x+parseInt(_.getCSS(el,'padding-left'),10) + borders[3].width, //dx
|
||||
y+parseInt(_.getCSS(el,'padding-top'),10) + borders[0].width, // dy
|
||||
bounds.width - (borders[1].width + borders[3].width + parseInt(_.getCSS(el,'padding-left'),10) + parseInt(_.getCSS(el,'padding-right'),10)), //dw
|
||||
bounds.height - (borders[0].width + borders[2].width + parseInt(_.getCSS(el,'padding-top'),10) + parseInt(_.getCSS(el,'padding-bottom'),10)) //dh
|
||||
);
|
||||
|
||||
}else {
|
||||
this.log("Error loading <img>:" + _.getAttr(el,'src'));
|
||||
}
|
||||
break;
|
||||
case "INPUT":
|
||||
// TODO add all relevant type's, i.e. HTML5 new stuff
|
||||
// todo add support for placeholder attribute for browsers which support it
|
||||
if (/^(text|url|email|submit|button|reset)$/.test(el.type) && el.value.length > 0){
|
||||
|
||||
this.renderFormValue(el,bounds,stack);
|
||||
|
||||
|
||||
/*
|
||||
this just doesn't work well enough
|
||||
|
||||
this.newText(el,{
|
||||
nodeValue:el.value,
|
||||
splitText: function(){
|
||||
return this;
|
||||
},
|
||||
formValue:true
|
||||
},stack);
|
||||
*/
|
||||
}
|
||||
break;
|
||||
case "TEXTAREA":
|
||||
if (el.value.length > 0){
|
||||
this.renderFormValue(el,bounds,stack);
|
||||
}
|
||||
break;
|
||||
case "SELECT":
|
||||
if (el.options.length > 0){
|
||||
this.renderFormValue(el,bounds,stack);
|
||||
}
|
||||
break;
|
||||
case "LI":
|
||||
this.drawListItem(el,stack,bgbounds);
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// return this.contextStacks[stackLength-1];
|
||||
return zindex.children[stackLength-1];
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Function to draw the text on the canvas
|
||||
*/
|
||||
|
||||
html2canvas.prototype.printText = function(currentText,x,y,ctx){
|
||||
if (this.trim(currentText).length>0){
|
||||
|
||||
ctx.fillText(currentText,x,y);
|
||||
this.numDraws++;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Drawing a rectangle
|
||||
html2canvas.prototype.newRect = function(ctx,x,y,w,h,bgcolor){
|
||||
|
||||
if (bgcolor!="transparent"){
|
||||
this.setContextVariable(ctx,"fillStyle",bgcolor);
|
||||
ctx.fillRect (x, y, w, h);
|
||||
this.numDraws++;
|
||||
}
|
||||
}
|
||||
|
||||
html2canvas.prototype.drawImage = function(ctx,image,sx,sy,sw,sh,dx,dy,dw,dh){
|
||||
ctx.drawImage(
|
||||
image,
|
||||
sx, //sx
|
||||
sy, //sy
|
||||
sw, //sw
|
||||
sh, //sh
|
||||
dx, //dx
|
||||
dy, // dy
|
||||
dw, //dw
|
||||
dh //dh
|
||||
);
|
||||
this.numDraws++;
|
||||
|
||||
}
|
||||
38
src/Forms.js
Normal file
38
src/Forms.js
Normal file
@ -0,0 +1,38 @@
|
||||
html2canvas.prototype.renderFormValue = function(el,bounds,stack){
|
||||
|
||||
var valueWrap = document.createElement('valuewrap'),
|
||||
_ = this;
|
||||
|
||||
this.each(['lineHeight','textAlign','fontFamily','color','fontSize','paddingLeft','paddingTop','width','height','border','borderLeftWidth','borderTopWidth'],function(i,style){
|
||||
valueWrap.style[style] = _.getCSS(el,style);
|
||||
});
|
||||
|
||||
valueWrap.style.borderColor = "black";
|
||||
valueWrap.style.borderStyle = "solid";
|
||||
valueWrap.style.display = "block";
|
||||
valueWrap.style.position = "absolute";
|
||||
if (/^(submit|reset|button|text|password)$/.test(el.type) || el.nodeName == "SELECT"){
|
||||
valueWrap.style.lineHeight = _.getCSS(el,"height");
|
||||
}
|
||||
|
||||
|
||||
valueWrap.style.top = bounds.top+"px";
|
||||
valueWrap.style.left = bounds.left+"px";
|
||||
if (el.nodeName == "SELECT"){
|
||||
// TODO increase accuracy of text position
|
||||
var textValue = el.options[el.selectedIndex].text;
|
||||
} else{
|
||||
var textValue = el.value;
|
||||
|
||||
}
|
||||
var textNode = document.createTextNode(textValue);
|
||||
|
||||
valueWrap.appendChild(textNode);
|
||||
$('body').append(valueWrap);
|
||||
|
||||
this.newText(el,textNode,stack);
|
||||
|
||||
$(valueWrap).remove();
|
||||
|
||||
|
||||
}
|
||||
129
src/Images.js
Normal file
129
src/Images.js
Normal file
@ -0,0 +1,129 @@
|
||||
/*
|
||||
* Function to find all images from <img> and background-image
|
||||
*/
|
||||
html2canvas.prototype.getImages = function(el) {
|
||||
|
||||
var self = this;
|
||||
|
||||
if (!this.ignoreRe.test(el.nodeName)){
|
||||
// TODO remove jQuery dependancy
|
||||
this.each($(el).contents(),function(i,element){
|
||||
var ignRe = new RegExp("("+this.ignoreElements+")");
|
||||
if (!ignRe.test(element.nodeName)){
|
||||
self.getImages(element);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (el.nodeType==1 || typeof el.nodeType == "undefined"){
|
||||
var background_image = this.getCSS(el,'background-image');
|
||||
|
||||
if (background_image && background_image != "1" && background_image != "none" && background_image.substring(0,7)!="-webkit" && background_image.substring(0,3)!="-o-" && background_image.substring(0,4)!="-moz"){
|
||||
// TODO add multi image background support
|
||||
var src = this.backgroundImageUrl(background_image.split(",")[0]);
|
||||
this.preloadImage(src);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Load image from storage
|
||||
*/
|
||||
|
||||
html2canvas.prototype.loadImage = function(src){
|
||||
|
||||
var imgIndex = this.getIndex(this.images,src);
|
||||
if (imgIndex!=-1){
|
||||
return this.images[imgIndex+1];
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
html2canvas.prototype.preloadImage = function(src){
|
||||
|
||||
|
||||
if (this.getIndex(this.images,src)==-1){
|
||||
if (this.isSameOrigin(src)){
|
||||
this.images.push(src);
|
||||
// console.log('a'+src);
|
||||
var img = new Image();
|
||||
// TODO remove jQuery dependancy
|
||||
var _ = this;
|
||||
$(img).load(function(){
|
||||
_.imagesLoaded++;
|
||||
_.start();
|
||||
|
||||
});
|
||||
img.onerror = function(){
|
||||
_.images.splice(_.images.indexOf(img.src),2);
|
||||
// _.imagesLoaded++;
|
||||
_.start();
|
||||
}
|
||||
img.src = src;
|
||||
this.images.push(img);
|
||||
}else if (this.opts.proxyUrl){
|
||||
// console.log('b'+src);
|
||||
this.images.push(src);
|
||||
var img = new Image();
|
||||
this.proxyGetImage(src,img);
|
||||
this.images.push(img);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
html2canvas.prototype.proxyGetImage = function(url,img){
|
||||
var _ = this;
|
||||
|
||||
var link = document.createElement("a");
|
||||
link.href = url;
|
||||
url = link.href; // work around for pages with base href="" set
|
||||
|
||||
|
||||
// todo remove jQuery dependency and enable xhr2 requests where available (no need for base64 / json)
|
||||
$.ajax({
|
||||
data:{
|
||||
xhr2:false,
|
||||
url:url
|
||||
},
|
||||
url: this.opts.proxyUrl,
|
||||
dataType: "jsonp",
|
||||
success: function(a){
|
||||
|
||||
if (a.substring(0,6)=="error:"){
|
||||
_.images.splice(_.images.indexOf(url),2);
|
||||
_.start();
|
||||
_.log('Proxy was unable to load '+url+' '+a);
|
||||
}else{
|
||||
// document.createElement(a);
|
||||
// console.log(img);
|
||||
img.onload = function(){
|
||||
// console.log('w'+img.width);
|
||||
_.imagesLoaded++;
|
||||
_.start();
|
||||
|
||||
}
|
||||
|
||||
img.src = a;
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
error: function(){
|
||||
|
||||
_.images.splice(_.images.indexOf(url),2);
|
||||
// _.imagesLoaded++;
|
||||
_.start();
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
7
src/LICENSE
Normal file
7
src/LICENSE
Normal file
@ -0,0 +1,7 @@
|
||||
/*
|
||||
* html2canvas v0.27 <http://html2canvas.hertzen.com>
|
||||
* Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
|
||||
* http://www.twitter.com/niklasvh
|
||||
*
|
||||
* Released under MIT License
|
||||
*/
|
||||
121
src/Lists.js
Normal file
121
src/Lists.js
Normal file
@ -0,0 +1,121 @@
|
||||
html2canvas.prototype.drawListItem = function(element,stack,elBounds){
|
||||
|
||||
|
||||
var position = this.getCSS(element,"list-style-position",false);
|
||||
|
||||
|
||||
var item = this.getListItem(element),
|
||||
x,
|
||||
y;
|
||||
|
||||
var type = this.getCSS(element,"list-style-type",false);
|
||||
|
||||
if (/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i.test(type)){
|
||||
// TODO remove jQuery dependency
|
||||
var currentIndex = $(element).index()+1,
|
||||
text;
|
||||
|
||||
if (type == "decimal"){
|
||||
text = currentIndex;
|
||||
}else if (type == "decimal-leading-zero"){
|
||||
if (currentIndex.toString().length == 1){
|
||||
text = currentIndex = "0" + currentIndex.toString();
|
||||
}else{
|
||||
text = currentIndex.toString();
|
||||
}
|
||||
|
||||
}else if (type == "upper-roman"){
|
||||
text = this.getListRoman(currentIndex);
|
||||
}else if (type == "lower-roman"){
|
||||
text = this.getListRoman(currentIndex).toLowerCase();
|
||||
}else if (type == "lower-alpha"){
|
||||
text = this.getListAlpha(currentIndex).toLowerCase();
|
||||
}else if (type == "upper-alpha"){
|
||||
text = this.getListAlpha(currentIndex);
|
||||
}
|
||||
|
||||
text += ". ";
|
||||
var listBounds = this.getListPosition(element,text);
|
||||
|
||||
if (position == "inside"){
|
||||
this.setFont(stack.ctx,element,false);
|
||||
x = elBounds.left;
|
||||
}else{
|
||||
return; /* TODO really need to figure out some more accurate way to try and find the position.
|
||||
as defined in http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position, it does not even have a specified "correct" position, so each browser
|
||||
may display it whatever way it feels like.
|
||||
"The position of the list-item marker adjacent to floats is undefined in CSS 2.1. CSS 2.1 does not specify the precise location of the marker box or its position in the painting order"
|
||||
*/
|
||||
this.setFont(stack.ctx,element,true);
|
||||
x = elBounds.left-10;
|
||||
}
|
||||
|
||||
y = listBounds.bottom;
|
||||
|
||||
|
||||
this.printText(text, x, y, stack.ctx);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
html2canvas.prototype.getListPosition = function(element,val){
|
||||
var boundElement = document.createElement("boundelement");
|
||||
boundElement.style.display = "inline";
|
||||
//boundElement.style.width = "1px";
|
||||
//boundElement.style.height = "1px";
|
||||
|
||||
var type = element.style.listStyleType;
|
||||
element.style.listStyleType = "none";
|
||||
|
||||
boundElement.appendChild(document.createTextNode(val));
|
||||
|
||||
|
||||
element.insertBefore(boundElement,element.firstChild);
|
||||
|
||||
|
||||
var bounds = this.getBounds(boundElement);
|
||||
element.removeChild(boundElement);
|
||||
element.style.listStyleType = type;
|
||||
return bounds;
|
||||
|
||||
|
||||
}
|
||||
|
||||
html2canvas.prototype.getListItem = function(element){
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
html2canvas.prototype.getListAlpha = function(number){
|
||||
var tmp = "";
|
||||
do{
|
||||
var modulus = number % 26;
|
||||
tmp = String.fromCharCode((modulus) + 64) + tmp;
|
||||
number = number / 26;
|
||||
}while((number*26) > 26);
|
||||
|
||||
return tmp;
|
||||
}
|
||||
|
||||
html2canvas.prototype.getListRoman = 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 = "";
|
||||
|
||||
if (number <= 0 || number >= 4000) return;
|
||||
for (var v=0; v<romanArray.length; v++) {
|
||||
while (number >= decimal[v]) {
|
||||
number -= decimal[v];
|
||||
roman += romanArray[v];
|
||||
}
|
||||
}
|
||||
|
||||
return roman;
|
||||
|
||||
|
||||
}
|
||||
348
src/Renderer.js
Normal file
348
src/Renderer.js
Normal file
@ -0,0 +1,348 @@
|
||||
html2canvas.prototype.Renderer = function(queue){
|
||||
|
||||
var _ = this;
|
||||
|
||||
this.log('Renderer initiated');
|
||||
|
||||
this.each(this.opts.renderOrder.split(" "),function(i,renderer){
|
||||
|
||||
switch(renderer){
|
||||
case "canvas":
|
||||
_.canvas = document.createElement('canvas');
|
||||
if (_.canvas.getContext){
|
||||
_.canvasRenderer(queue);
|
||||
_.log('Using canvas renderer');
|
||||
return false;
|
||||
}
|
||||
break;
|
||||
case "flash":
|
||||
/*
|
||||
var script = document.createElement('script');
|
||||
script.type = "text/javascript";
|
||||
script.src = _.opts.flashCanvasPath;
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(script, s);
|
||||
|
||||
|
||||
if (typeof FlashCanvas != "undefined") {
|
||||
_.canvas = initCanvas(document.getElementById("testflash"));
|
||||
FlashCanvas.initElement(_.canvas);
|
||||
_.ctx = _.canvas.getContext("2d");
|
||||
// _.canvas = document.createElement('canvas');
|
||||
//
|
||||
_.log('Using Flashcanvas renderer');
|
||||
_.canvasRenderer(queue);
|
||||
|
||||
return false;
|
||||
}
|
||||
*/
|
||||
|
||||
break;
|
||||
case "html":
|
||||
// TODO add renderer
|
||||
_.log("Using HTML renderer");
|
||||
return false;
|
||||
break;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
// this.log('No renderer chosen, rendering quit');
|
||||
return this;
|
||||
|
||||
// this.canvasRenderer(queue);
|
||||
|
||||
/*
|
||||
if (!this.canvas.getContext){
|
||||
|
||||
|
||||
}*/
|
||||
// TODO include Flashcanvas
|
||||
/*
|
||||
var script = document.createElement('script');
|
||||
script.type = "text/javascript";
|
||||
script.src = this.opts.flashCanvasPath;
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(script, s);
|
||||
|
||||
if (typeof FlashCanvas != "undefined") {
|
||||
|
||||
FlashCanvas.initElement(this.canvas);
|
||||
this.ctx = this.canvas.getContext('2d');
|
||||
} */
|
||||
|
||||
}
|
||||
|
||||
|
||||
html2canvas.prototype.throttler = function(queue){
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
html2canvas.prototype.canvasRenderContext = function(storageContext,ctx){
|
||||
|
||||
// set common settings for canvas
|
||||
ctx.textBaseline = "bottom";
|
||||
var _ = this;
|
||||
|
||||
|
||||
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){
|
||||
_.each(storageContext.ctx.storage,function(a,renderItem){
|
||||
|
||||
|
||||
switch(renderItem.type){
|
||||
case "variable":
|
||||
ctx[renderItem.name] = renderItem.arguments;
|
||||
break;
|
||||
case "function":
|
||||
if (renderItem.name=="fillRect"){
|
||||
|
||||
ctx.fillRect(
|
||||
renderItem.arguments[0],
|
||||
renderItem.arguments[1],
|
||||
renderItem.arguments[2],
|
||||
renderItem.arguments[3]
|
||||
);
|
||||
}else if(renderItem.name=="fillText"){
|
||||
// console.log(renderItem.arguments[0]);
|
||||
ctx.fillText(renderItem.arguments[0],renderItem.arguments[1],renderItem.arguments[2]);
|
||||
|
||||
}else if(renderItem.name=="drawImage"){
|
||||
// console.log(renderItem);
|
||||
// console.log(renderItem.arguments[0].width);
|
||||
if (renderItem.arguments[8] > 0 && renderItem.arguments[7]){
|
||||
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]
|
||||
);
|
||||
}
|
||||
}else{
|
||||
_.log(renderItem);
|
||||
}
|
||||
|
||||
|
||||
break;
|
||||
default:
|
||||
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
if (storageContext.clip){
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
html2canvas.prototype.canvasRenderContextChildren = function(storageContext,parentctx){
|
||||
var ctx = storageContext.canvas.getContext('2d');
|
||||
|
||||
storageContext.canvasPosition = storageContext.canvasPosition || {};
|
||||
this.canvasRenderContext(storageContext,ctx);
|
||||
|
||||
|
||||
for (var s = 0; s<this.queue.length;){
|
||||
if (storageContext.parentStack && this.queue[s].canvas === storageContext.parentStack.canvas){
|
||||
var substorageContext = this.queue.splice(s,1)[0];
|
||||
|
||||
if (substorageContext.ctx.storage[5] && substorageContext.ctx.storage[5].arguments[0]=="Highlights"){
|
||||
console.log('ssssssadasda');
|
||||
}
|
||||
|
||||
this.canvasRenderContextChildren(substorageContext,ctx);
|
||||
// this.canvasRenderContext(substorageContext,ctx);
|
||||
// this.canvasRenderStorage(this.queue,ctx);
|
||||
|
||||
|
||||
}else{
|
||||
s++;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
if (storageContext.ctx.storage[5] && storageContext.ctx.storage[5].arguments[0]=="Highlights"){
|
||||
$('body').append(parentctx.canvas);
|
||||
}
|
||||
//var parentctx = this.canvas.getContext("2d");
|
||||
|
||||
if (storageContext.canvas.width>0 && storageContext.canvas.height > 0){
|
||||
parentctx.drawImage(storageContext.canvas,(storageContext.canvasPosition.x || 0),(storageContext.canvasPosition.y || 0));
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
*/
|
||||
html2canvas.prototype.canvasRenderStorage = function(queue,parentctx){
|
||||
|
||||
|
||||
|
||||
|
||||
for (var i = 0; i<queue.length;){
|
||||
var storageContext = queue.splice(0,1)[0];
|
||||
|
||||
|
||||
|
||||
// storageContext.removeOverflow = storageContext.removeOverflow || {};
|
||||
/*
|
||||
if (storageContext.canvas){
|
||||
this.canvasRenderContextChildren(storageContext,parentctx);
|
||||
|
||||
var ctx = storageContext.canvas.getContext('2d');
|
||||
|
||||
storageContext.canvasPosition = storageContext.canvasPosition || {};
|
||||
this.canvasRenderContext(storageContext,ctx);
|
||||
|
||||
for (var s = 0; s<this.queue.length;){
|
||||
if (this.queue[s].canvas === storageContext.canvas){
|
||||
var substorageContext = this.queue.splice(s,1)[0];
|
||||
substorageContext.canvasPosition = storageContext.canvasPosition || {};
|
||||
|
||||
this.canvasRenderContext(substorageContext,ctx);
|
||||
// this.canvasRenderStorage(this.queue,ctx);
|
||||
|
||||
}else{
|
||||
s++;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
//var parentctx = this.canvas.getContext("2d");
|
||||
|
||||
if (storageContext.canvas.width>0 && storageContext.canvas.height > 0){
|
||||
parentctx.drawImage(storageContext.canvas,(storageContext.canvasPosition.x || 0),(storageContext.canvasPosition.y || 0));
|
||||
}
|
||||
ctx = parentctx;
|
||||
|
||||
}else{
|
||||
*/
|
||||
storageContext.canvasPosition = storageContext.canvasPosition || {};
|
||||
this.canvasRenderContext(storageContext,parentctx);
|
||||
// }
|
||||
|
||||
|
||||
/*
|
||||
if (storageContext.newCanvas){
|
||||
var ctx = _.canvas.getContext("2d");
|
||||
ctx.drawImage(canvas,(storageContext.removeOverflow.left || 0),(storageContext.removeOverflow.top || 0));
|
||||
_.ctx = ctx;
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
html2canvas.prototype.canvasRenderer = function(queue){
|
||||
var _ = this;
|
||||
this.sortZ(this.zStack);
|
||||
queue = this.queue;
|
||||
//console.log(queue);
|
||||
|
||||
//queue = this.sortQueue(queue);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
this.canvas.width = Math.max($(document).width(),this.opts.canvasWidth);
|
||||
this.canvas.height = Math.max($(document).height(),this.opts.canvasHeight);
|
||||
|
||||
this.ctx = this.canvas.getContext("2d");
|
||||
|
||||
this.canvasRenderStorage(queue,this.ctx);
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
/*
|
||||
* Sort elements based on z-index and position attributes
|
||||
*/
|
||||
|
||||
/*
|
||||
html2canvas.prototype.sortQueue = function(queue){
|
||||
if (!this.opts.reorderZ || !this.needReorder) return queue;
|
||||
|
||||
var longest = 0;
|
||||
this.each(queue,function(i,e){
|
||||
if (longest<e.zIndex.length){
|
||||
longest = e.zIndex.length;
|
||||
}
|
||||
});
|
||||
|
||||
var counter = 0;
|
||||
//console.log(((queue.length).toString().length)-(count.length).toString().length);
|
||||
this.each(queue,function(i,e){
|
||||
|
||||
var more = ((queue.length).toString().length)-((counter).toString().length);
|
||||
while(longest>e.zIndex.length){
|
||||
e.zIndex += "0";
|
||||
}
|
||||
e.zIndex = e.zIndex+counter;
|
||||
|
||||
while((longest+more+(counter).toString().length)>e.zIndex.length){
|
||||
e.zIndex += "0";
|
||||
}
|
||||
counter++;
|
||||
// console.log(e.zIndex);
|
||||
});
|
||||
|
||||
|
||||
|
||||
queue = queue.sort(function(a,b){
|
||||
|
||||
if (a.zIndex < b.zIndex) return -1;
|
||||
if (a.zIndex > b.zIndex) return 1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
return queue;
|
||||
}
|
||||
*/
|
||||
|
||||
html2canvas.prototype.setContextVariable = function(ctx,variable,value){
|
||||
if (!ctx.storage){
|
||||
ctx[variable] = value;
|
||||
}else{
|
||||
ctx.storage.push(
|
||||
{
|
||||
type: "variable",
|
||||
name:variable,
|
||||
arguments:value
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
288
src/Text.js
Normal file
288
src/Text.js
Normal file
@ -0,0 +1,288 @@
|
||||
|
||||
html2canvas.prototype.newText = function(el,textNode,stack,form){
|
||||
var ctx = stack.ctx;
|
||||
var family = this.getCSS(el,"font-family");
|
||||
var size = this.getCSS(el,"font-size");
|
||||
var color = this.getCSS(el,"color");
|
||||
|
||||
|
||||
|
||||
var text_decoration = this.getCSS(el,"text-decoration");
|
||||
var text_align = this.getCSS(el,"text-align");
|
||||
|
||||
|
||||
var letter_spacing = this.getCSS(el,"letter-spacing");
|
||||
|
||||
// apply text-transform:ation to the text
|
||||
textNode.nodeValue = this.textTransform(textNode.nodeValue,this.getCSS(el,"text-transform"));
|
||||
var text = this.trim(textNode.nodeValue);
|
||||
|
||||
//text = $.trim(text);
|
||||
if (text.length>0){
|
||||
|
||||
|
||||
|
||||
if (text_decoration!="none"){
|
||||
var metrics = this.fontMetrics(family,size);
|
||||
|
||||
}
|
||||
|
||||
var renderList,
|
||||
renderWords = false;
|
||||
|
||||
|
||||
text_align = text_align.replace(["-webkit-auto"],["auto"])
|
||||
|
||||
|
||||
if (this.opts.letterRendering == false && /^(left|right|justify|auto)$/.test(text_align) && /^(normal|none)$/.test(letter_spacing)){
|
||||
// this.setContextVariable(ctx,"textAlign",text_align);
|
||||
renderWords = true;
|
||||
renderList = textNode.nodeValue.split(/(\b| )/);
|
||||
|
||||
}else{
|
||||
// this.setContextVariable(ctx,"textAlign","left");
|
||||
renderList = textNode.nodeValue.split("");
|
||||
}
|
||||
|
||||
this.setFont(ctx,el,false);
|
||||
|
||||
|
||||
/*
|
||||
if (stack.clip){
|
||||
ctx.rect (stack.clip.left, stack.clip.top, stack.clip.width, stack.clip.height);
|
||||
ctx.clip();
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
var oldTextNode = textNode;
|
||||
for(var c=0;c<renderList.length;c++){
|
||||
|
||||
|
||||
// IE 9 bug
|
||||
if (typeof oldTextNode.nodeValue != "string"){
|
||||
continue;
|
||||
}
|
||||
|
||||
// TODO only do the splitting for non-range prints
|
||||
var newTextNode = oldTextNode.splitText(renderList[c].length);
|
||||
|
||||
if (text_decoration!="none" || this.trim(oldTextNode.nodeValue).length != 0){
|
||||
|
||||
|
||||
|
||||
|
||||
if (this.support.rangeBounds){
|
||||
// getBoundingClientRect is supported for ranges
|
||||
if (document.createRange){
|
||||
var range = document.createRange();
|
||||
range.selectNode(oldTextNode);
|
||||
}else{
|
||||
// TODO add IE support
|
||||
var range = document.body.createTextRange();
|
||||
}
|
||||
if (range.getBoundingClientRect()){
|
||||
var bounds = range.getBoundingClientRect();
|
||||
}else{
|
||||
var bounds = {};
|
||||
}
|
||||
}else{
|
||||
// it isn't supported, so let's wrap it inside an element instead and the bounds there
|
||||
|
||||
var parent = oldTextNode.parentNode;
|
||||
var wrapElement = document.createElement('wrapper');
|
||||
var backupText = oldTextNode.cloneNode(true);
|
||||
wrapElement.appendChild(oldTextNode.cloneNode(true));
|
||||
parent.replaceChild(wrapElement,oldTextNode);
|
||||
|
||||
var bounds = this.getBounds(wrapElement);
|
||||
|
||||
parent.replaceChild(backupText,wrapElement);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// console.log(range);
|
||||
// console.log("'"+oldTextNode.nodeValue+"'"+bounds.left)
|
||||
this.printText(oldTextNode.nodeValue,bounds.left,bounds.bottom,ctx);
|
||||
|
||||
switch(text_decoration) {
|
||||
case "underline":
|
||||
// Draws a line at the baseline of the font
|
||||
// TODO As some browsers display the line as more than 1px if the font-size is big, need to take that into account both in position and size
|
||||
this.newRect(ctx,bounds.left,Math.round(bounds.top+metrics.baseline+metrics.lineWidth),bounds.width,1,color);
|
||||
break;
|
||||
case "overline":
|
||||
this.newRect(ctx,bounds.left,bounds.top,bounds.width,1,color);
|
||||
break;
|
||||
case "line-through":
|
||||
// TODO try and find exact position for line-through
|
||||
this.newRect(ctx,bounds.left,Math.ceil(bounds.top+metrics.middle+metrics.lineWidth),bounds.width,1,color);
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
oldTextNode = newTextNode;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
html2canvas.prototype.setFont = function(ctx,el,align){
|
||||
|
||||
var family = this.getCSS(el,"font-family");
|
||||
var size = this.getCSS(el,"font-size");
|
||||
var color = this.getCSS(el,"color");
|
||||
|
||||
var bold = this.getCSS(el,"font-weight");
|
||||
var font_style = this.getCSS(el,"font-style");
|
||||
var font_variant = this.getCSS(el,"font-variant");
|
||||
|
||||
switch(bold){
|
||||
case 401:
|
||||
bold = "bold";
|
||||
break;
|
||||
case 400:
|
||||
bold = "normal";
|
||||
break;
|
||||
}
|
||||
|
||||
var font = font_variant+" "+bold+" "+font_style+" "+size+" "+family;
|
||||
|
||||
|
||||
this.setContextVariable(ctx,"fillStyle",color);
|
||||
this.setContextVariable(ctx,"font",font);
|
||||
if (align){
|
||||
this.setContextVariable(ctx,"textAlign","right");
|
||||
}else{
|
||||
this.setContextVariable(ctx,"textAlign","left");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Function to find baseline for font with a specicic size
|
||||
*/
|
||||
html2canvas.prototype.fontMetrics = function(font,fontSize){
|
||||
|
||||
|
||||
var findMetrics = this.fontData.indexOf(font+"-"+fontSize);
|
||||
|
||||
if (findMetrics>-1){
|
||||
return this.fontData[findMetrics+1];
|
||||
}
|
||||
|
||||
var container = document.createElement('div');
|
||||
document.getElementsByTagName('body')[0].appendChild(container);
|
||||
|
||||
// jquery to speed this up, TODO remove jquery dependancy
|
||||
$(container).css({
|
||||
visibility:'hidden',
|
||||
fontFamily:font,
|
||||
fontSize:fontSize,
|
||||
margin:0,
|
||||
padding:0
|
||||
});
|
||||
|
||||
|
||||
|
||||
var img = document.createElement('img');
|
||||
|
||||
// TODO add another image
|
||||
img.src = "http://html2canvas.hertzen.com/images/8.jpg";
|
||||
img.width = 1;
|
||||
img.height = 1;
|
||||
|
||||
$(img).css({
|
||||
margin:0,
|
||||
padding:0
|
||||
});
|
||||
var span = document.createElement('span');
|
||||
|
||||
$(span).css({
|
||||
fontFamily:font,
|
||||
fontSize:fontSize,
|
||||
margin:0,
|
||||
padding:0
|
||||
});
|
||||
|
||||
|
||||
span.appendChild(document.createTextNode('Hidden Text'));
|
||||
container.appendChild(span);
|
||||
container.appendChild(img);
|
||||
var baseline = (img.offsetTop-span.offsetTop)+1;
|
||||
|
||||
container.removeChild(span);
|
||||
container.appendChild(document.createTextNode('Hidden Text'));
|
||||
|
||||
$(container).css('line-height','normal');
|
||||
$(img).css("vertical-align","super");
|
||||
var middle = (img.offsetTop-container.offsetTop)+1;
|
||||
|
||||
var metricsObj = {
|
||||
baseline: baseline,
|
||||
lineWidth: 1,
|
||||
middle: middle
|
||||
};
|
||||
|
||||
|
||||
this.fontData.push(font+"-"+fontSize);
|
||||
this.fontData.push(metricsObj);
|
||||
|
||||
$(container).remove();
|
||||
|
||||
|
||||
|
||||
return metricsObj;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Function to apply text-transform attribute to text
|
||||
*/
|
||||
html2canvas.prototype.textTransform = function(text,transform){
|
||||
switch(transform){
|
||||
case "lowercase":
|
||||
return text.toLowerCase();
|
||||
break;
|
||||
|
||||
case "capitalize":
|
||||
return text.replace( /(^|\s|:|-|\(|\))([a-z])/g , function(m,p1,p2){
|
||||
return p1+p2.toUpperCase();
|
||||
} );
|
||||
break;
|
||||
|
||||
case "uppercase":
|
||||
return text.toUpperCase();
|
||||
break;
|
||||
default:
|
||||
return text;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
*Function to trim whitespace from text
|
||||
*/
|
||||
html2canvas.prototype.trim = function(text) {
|
||||
return text.replace(/^\s*/, "").replace(/\s*$/, "");
|
||||
}
|
||||
46
src/Traversing.js
Normal file
46
src/Traversing.js
Normal file
@ -0,0 +1,46 @@
|
||||
|
||||
|
||||
html2canvas.prototype.parseElement = function(element,stack){
|
||||
var _ = this;
|
||||
this.each(element.children,function(index,el){
|
||||
_.parsing(el,stack);
|
||||
});
|
||||
|
||||
this.log('Render queue stored');
|
||||
this.opts.storageReady(this);
|
||||
this.finish();
|
||||
}
|
||||
|
||||
|
||||
|
||||
html2canvas.prototype.parsing = function(el,stack){
|
||||
|
||||
if (this.getCSS(el,'display') != "none" && this.getCSS(el,'visibility')!="hidden"){
|
||||
|
||||
var _ = this;
|
||||
|
||||
stack = this.newElement(el,stack) || stack;
|
||||
|
||||
var ctx = stack.ctx;
|
||||
|
||||
if (!this.ignoreRe.test(el.nodeName)){
|
||||
// TODO remove jQuery dependancy
|
||||
this.each(this.contentsInZ(el),function(cid,node){
|
||||
|
||||
if (node.nodeType==1){
|
||||
// element
|
||||
_.parsing(node,stack);
|
||||
}else if (node.nodeType==3){
|
||||
_.newText(el,node,stack);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
// }
|
||||
}
|
||||
|
||||
285
src/Util.js
Normal file
285
src/Util.js
Normal file
@ -0,0 +1,285 @@
|
||||
|
||||
// Simple logger
|
||||
html2canvas.prototype.log = function(a){
|
||||
if (this.opts.logging){
|
||||
|
||||
this.opts.logger(a);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
html2canvas.prototype.withinBounds = function(src,dst){
|
||||
if (!src) return true;
|
||||
// return true;
|
||||
return (
|
||||
(src.left <= dst.left || dst.left+dst.width < src.left) &&
|
||||
(src.top <= dst.top || dst.top+dst.height < src.top)
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
html2canvas.prototype.clipBounds = function(src,dst){
|
||||
|
||||
var x = Math.max(src.left,dst.left);
|
||||
var y = Math.max(src.top,dst.top);
|
||||
|
||||
var x2 = Math.min((src.left+src.width),(dst.left+dst.width));
|
||||
var y2 = Math.min((src.top+src.height),(dst.top+dst.height));
|
||||
|
||||
return {
|
||||
left:x,
|
||||
top:y,
|
||||
width:x2-x,
|
||||
height:y2-y
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Function to provide bounds for element
|
||||
* @return {Bounds} object with position and dimension information
|
||||
*/
|
||||
html2canvas.prototype.getBounds = function(el){
|
||||
|
||||
window.scroll(0,0);
|
||||
|
||||
if (el.getBoundingClientRect){
|
||||
var clientRect = el.getBoundingClientRect();
|
||||
var bounds = {};
|
||||
// need to create new object, as clientrect bounds can't be modified, thanks pufuwozu
|
||||
// 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 = clientRect.width;
|
||||
bounds.height = clientRect.height;
|
||||
|
||||
|
||||
|
||||
return bounds;
|
||||
}else{
|
||||
|
||||
// TODO remove jQuery dependancy
|
||||
var p = $(el).offset();
|
||||
|
||||
return {
|
||||
left: p.left + this.getCSS(el,"border-left-width",true),
|
||||
top: p.top + this.getCSS(el,"border-top-width",true),
|
||||
width:$(el).innerWidth(),
|
||||
height:$(el).innerHeight()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Function for looping through array
|
||||
*/
|
||||
html2canvas.prototype.each = function(arrayLoop,callbackFunc){
|
||||
callbackFunc = callbackFunc || function(){};
|
||||
for (var i=0;i<arrayLoop.length;i++){
|
||||
if (callbackFunc(i,arrayLoop[i]) === false) return;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Function to get childNodes of an element in the order they should be rendered (based on z-index)
|
||||
* reference http://www.w3.org/TR/CSS21/zindex.html
|
||||
*/
|
||||
|
||||
html2canvas.prototype.contentsInZ = function(el){
|
||||
|
||||
// TODO remove jQuery dependency
|
||||
|
||||
var contents = $(el).contents();
|
||||
|
||||
return contents;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Function for fetching the element attribute
|
||||
*/
|
||||
html2canvas.prototype.getAttr = function(el,attribute){
|
||||
return el.getAttribute(attribute);
|
||||
//return $(el).attr(attribute);
|
||||
}
|
||||
|
||||
/*
|
||||
* Function to extend object
|
||||
*/
|
||||
html2canvas.prototype.extendObj = function(options,defaults){
|
||||
for (var key in options){
|
||||
defaults[key] = options[key];
|
||||
}
|
||||
return defaults;
|
||||
}
|
||||
|
||||
/*
|
||||
*todo remove this function
|
||||
html2canvas.prototype.leadingZero = function(num,size){
|
||||
|
||||
var s = "000000000" + num;
|
||||
return s.substr(s.length-size);
|
||||
}
|
||||
*/
|
||||
|
||||
html2canvas.prototype.zContext = function(zindex){
|
||||
return {
|
||||
zindex: zindex,
|
||||
children: []
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
html2canvas.prototype.setZ = function(zindex,position,parentZ,parentNode){
|
||||
// TODO fix static elements overlapping relative/absolute elements under same stack, if they are defined after them
|
||||
if (!parentZ){
|
||||
this.zStack = new this.zContext(0);
|
||||
return this.zStack;
|
||||
}
|
||||
|
||||
if (zindex!="auto"){
|
||||
this.needReorder = true;
|
||||
var newContext = new this.zContext(zindex);
|
||||
parentZ.children.push(newContext);
|
||||
|
||||
return newContext;
|
||||
|
||||
}else {
|
||||
return parentZ;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
html2canvas.prototype.sortZ = function(zStack){
|
||||
var subStacks = [];
|
||||
var stackValues = [];
|
||||
var _ = this;
|
||||
|
||||
this.each(zStack.children, function(i,stackChild){
|
||||
if (stackChild.children && stackChild.children.length > 0){
|
||||
subStacks.push(stackChild);
|
||||
stackValues.push(stackChild.zindex);
|
||||
}else{
|
||||
|
||||
|
||||
_.queue.push(stackChild);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
stackValues.sort(function(a,b){
|
||||
return a - b
|
||||
});
|
||||
|
||||
this.each(stackValues, function(i,zValue){
|
||||
for (var s = 0;s<=subStacks.length;s++){
|
||||
if (subStacks[s].zindex == zValue){
|
||||
var stackChild = subStacks.splice(s,1);
|
||||
_.sortZ(stackChild[0]);
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
*todo remove this function
|
||||
|
||||
html2canvas.prototype.formatZ = function(zindex,position,parentZ,parentNode){
|
||||
|
||||
if (!parentZ){
|
||||
parentZ = "0";
|
||||
}
|
||||
|
||||
|
||||
if (position!="static" && parentZ.charAt(0)=="0"){
|
||||
this.needReorder = true;
|
||||
parentZ = "1"+parentZ.slice(1);
|
||||
}
|
||||
|
||||
if (zindex=="auto"){
|
||||
var parentPosition = this.getCSS(parentNode,"position");
|
||||
if (parentPosition!="static" && typeof parentPosition != "undefined"){
|
||||
zindex = 0;
|
||||
}
|
||||
else{
|
||||
return parentZ;
|
||||
}
|
||||
}
|
||||
|
||||
var b = this.leadingZero(this.numDraws,9);
|
||||
|
||||
|
||||
var s = this.leadingZero(zindex+1,9);
|
||||
|
||||
// var s = "000000000" + num;
|
||||
return parentZ+""+""+s+""+b;
|
||||
|
||||
|
||||
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Get element childNodes
|
||||
*/
|
||||
|
||||
html2canvas.prototype.getContents = function(el){
|
||||
return (el.nodeName == "iframe" ) ?
|
||||
el.contentDocument || el.contentWindow.document :
|
||||
el.childNodes;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Function for fetching the css attribute
|
||||
* TODO remove jQuery dependancy
|
||||
*/
|
||||
html2canvas.prototype.getCSS = function(el,attribute,intOnly){
|
||||
if (intOnly){
|
||||
return parseInt($(el).css(attribute),10);
|
||||
}else{
|
||||
return $(el).css(attribute);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
html2canvas.prototype.getIndex = function(array,src){
|
||||
|
||||
if (array.indexOf){
|
||||
return array.indexOf(src);
|
||||
}else{
|
||||
for(var i = 0; i < array.length; i++){
|
||||
if(this[i] == src) return i;
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
html2canvas.prototype.isSameOrigin = function(url){
|
||||
var link = document.createElement("a");
|
||||
link.href = url;
|
||||
|
||||
return ((link.protocol + link.host) == this.pageOrigin);
|
||||
}
|
||||
104
src/clone.js
104
src/clone.js
@ -1,104 +0,0 @@
|
||||
var log = require('./log');
|
||||
|
||||
function restoreOwnerScroll(ownerDocument, x, y) {
|
||||
if (ownerDocument.defaultView && (x !== ownerDocument.defaultView.pageXOffset || y !== ownerDocument.defaultView.pageYOffset)) {
|
||||
ownerDocument.defaultView.scrollTo(x, y);
|
||||
}
|
||||
}
|
||||
|
||||
function cloneCanvasContents(canvas, clonedCanvas) {
|
||||
try {
|
||||
if (clonedCanvas) {
|
||||
clonedCanvas.width = canvas.width;
|
||||
clonedCanvas.height = canvas.height;
|
||||
clonedCanvas.getContext("2d").putImageData(canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height), 0, 0);
|
||||
}
|
||||
} catch(e) {
|
||||
log("Unable to copy canvas content from", canvas, e);
|
||||
}
|
||||
}
|
||||
|
||||
function cloneNode(node, javascriptEnabled) {
|
||||
var clone = node.nodeType === 3 ? document.createTextNode(node.nodeValue) : node.cloneNode(false);
|
||||
|
||||
var child = node.firstChild;
|
||||
while(child) {
|
||||
if (javascriptEnabled === true || child.nodeType !== 1 || child.nodeName !== 'SCRIPT') {
|
||||
clone.appendChild(cloneNode(child, javascriptEnabled));
|
||||
}
|
||||
child = child.nextSibling;
|
||||
}
|
||||
|
||||
if (node.nodeType === 1) {
|
||||
clone._scrollTop = node.scrollTop;
|
||||
clone._scrollLeft = node.scrollLeft;
|
||||
if (node.nodeName === "CANVAS") {
|
||||
cloneCanvasContents(node, clone);
|
||||
} else if (node.nodeName === "TEXTAREA" || node.nodeName === "SELECT") {
|
||||
clone.value = node.value;
|
||||
}
|
||||
}
|
||||
|
||||
return clone;
|
||||
}
|
||||
|
||||
function initNode(node) {
|
||||
if (node.nodeType === 1) {
|
||||
node.scrollTop = node._scrollTop;
|
||||
node.scrollLeft = node._scrollLeft;
|
||||
|
||||
var child = node.firstChild;
|
||||
while(child) {
|
||||
initNode(child);
|
||||
child = child.nextSibling;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = function(ownerDocument, containerDocument, width, height, options, x ,y) {
|
||||
var documentElement = cloneNode(ownerDocument.documentElement, options.javascriptEnabled);
|
||||
var container = containerDocument.createElement("iframe");
|
||||
|
||||
container.className = "html2canvas-container";
|
||||
container.style.visibility = "hidden";
|
||||
container.style.position = "fixed";
|
||||
container.style.left = "-10000px";
|
||||
container.style.top = "0px";
|
||||
container.style.border = "0";
|
||||
container.width = width;
|
||||
container.height = height;
|
||||
container.scrolling = "no"; // ios won't scroll without it
|
||||
containerDocument.body.appendChild(container);
|
||||
|
||||
return new Promise(function(resolve) {
|
||||
var documentClone = container.contentWindow.document;
|
||||
|
||||
/* Chrome doesn't detect relative background-images assigned in inline <style> sheets when fetched through getComputedStyle
|
||||
if window url is about:blank, we can assign the url to current by writing onto the document
|
||||
*/
|
||||
container.contentWindow.onload = container.onload = function() {
|
||||
var interval = setInterval(function() {
|
||||
if (documentClone.body.childNodes.length > 0) {
|
||||
initNode(documentClone.documentElement);
|
||||
clearInterval(interval);
|
||||
if (options.type === "view") {
|
||||
container.contentWindow.scrollTo(x, y);
|
||||
if ((/(iPad|iPhone|iPod)/g).test(navigator.userAgent) && (container.contentWindow.scrollY !== y || container.contentWindow.scrollX !== x)) {
|
||||
documentClone.documentElement.style.top = (-y) + "px";
|
||||
documentClone.documentElement.style.left = (-x) + "px";
|
||||
documentClone.documentElement.style.position = 'absolute';
|
||||
}
|
||||
}
|
||||
resolve(container);
|
||||
}
|
||||
}, 50);
|
||||
};
|
||||
|
||||
documentClone.open();
|
||||
documentClone.write("<!DOCTYPE html><html></html>");
|
||||
// Chrome scrolls the parent document for some reason after the write to the cloned window???
|
||||
restoreOwnerScroll(ownerDocument, x, y);
|
||||
documentClone.replaceChild(documentClone.adoptNode(documentElement), documentClone.documentElement);
|
||||
documentClone.close();
|
||||
});
|
||||
};
|
||||
271
src/color.js
271
src/color.js
@ -1,271 +0,0 @@
|
||||
// http://dev.w3.org/csswg/css-color/
|
||||
|
||||
function Color(value) {
|
||||
this.r = 0;
|
||||
this.g = 0;
|
||||
this.b = 0;
|
||||
this.a = null;
|
||||
var result = this.fromArray(value) ||
|
||||
this.namedColor(value) ||
|
||||
this.rgb(value) ||
|
||||
this.rgba(value) ||
|
||||
this.hex6(value) ||
|
||||
this.hex3(value);
|
||||
}
|
||||
|
||||
Color.prototype.darken = function(amount) {
|
||||
var a = 1 - amount;
|
||||
return new Color([
|
||||
Math.round(this.r * a),
|
||||
Math.round(this.g * a),
|
||||
Math.round(this.b * a),
|
||||
this.a
|
||||
]);
|
||||
};
|
||||
|
||||
Color.prototype.isTransparent = function() {
|
||||
return this.a === 0;
|
||||
};
|
||||
|
||||
Color.prototype.isBlack = function() {
|
||||
return this.r === 0 && this.g === 0 && this.b === 0;
|
||||
};
|
||||
|
||||
Color.prototype.fromArray = function(array) {
|
||||
if (Array.isArray(array)) {
|
||||
this.r = Math.min(array[0], 255);
|
||||
this.g = Math.min(array[1], 255);
|
||||
this.b = Math.min(array[2], 255);
|
||||
if (array.length > 3) {
|
||||
this.a = array[3];
|
||||
}
|
||||
}
|
||||
|
||||
return (Array.isArray(array));
|
||||
};
|
||||
|
||||
var _hex3 = /^#([a-f0-9]{3})$/i;
|
||||
|
||||
Color.prototype.hex3 = function(value) {
|
||||
var match = null;
|
||||
if ((match = value.match(_hex3)) !== null) {
|
||||
this.r = parseInt(match[1][0] + match[1][0], 16);
|
||||
this.g = parseInt(match[1][1] + match[1][1], 16);
|
||||
this.b = parseInt(match[1][2] + match[1][2], 16);
|
||||
}
|
||||
return match !== null;
|
||||
};
|
||||
|
||||
var _hex6 = /^#([a-f0-9]{6})$/i;
|
||||
|
||||
Color.prototype.hex6 = function(value) {
|
||||
var match = null;
|
||||
if ((match = value.match(_hex6)) !== null) {
|
||||
this.r = parseInt(match[1].substring(0, 2), 16);
|
||||
this.g = parseInt(match[1].substring(2, 4), 16);
|
||||
this.b = parseInt(match[1].substring(4, 6), 16);
|
||||
}
|
||||
return match !== null;
|
||||
};
|
||||
|
||||
|
||||
var _rgb = /^rgb\((\d{1,3}) *, *(\d{1,3}) *, *(\d{1,3})\)$/;
|
||||
|
||||
Color.prototype.rgb = function(value) {
|
||||
var match = null;
|
||||
if ((match = value.match(_rgb)) !== null) {
|
||||
this.r = Number(match[1]);
|
||||
this.g = Number(match[2]);
|
||||
this.b = Number(match[3]);
|
||||
}
|
||||
return match !== null;
|
||||
};
|
||||
|
||||
var _rgba = /^rgba\((\d{1,3}) *, *(\d{1,3}) *, *(\d{1,3}) *, *(\d+\.?\d*)\)$/;
|
||||
|
||||
Color.prototype.rgba = function(value) {
|
||||
var match = null;
|
||||
if ((match = value.match(_rgba)) !== null) {
|
||||
this.r = Number(match[1]);
|
||||
this.g = Number(match[2]);
|
||||
this.b = Number(match[3]);
|
||||
this.a = Number(match[4]);
|
||||
}
|
||||
return match !== null;
|
||||
};
|
||||
|
||||
Color.prototype.toString = function() {
|
||||
return this.a !== null && this.a !== 1 ?
|
||||
"rgba(" + [this.r, this.g, this.b, this.a].join(",") + ")" :
|
||||
"rgb(" + [this.r, this.g, this.b].join(",") + ")";
|
||||
};
|
||||
|
||||
Color.prototype.namedColor = function(value) {
|
||||
var color = colors[value.toLowerCase()];
|
||||
if (color) {
|
||||
this.r = color[0];
|
||||
this.g = color[1];
|
||||
this.b = color[2];
|
||||
} else if (value.toLowerCase() === "transparent") {
|
||||
this.r = this.g = this.b = this.a = 0;
|
||||
return true;
|
||||
}
|
||||
|
||||
return !!color;
|
||||
};
|
||||
|
||||
Color.prototype.isColor = true;
|
||||
|
||||
// JSON.stringify([].slice.call($$('.named-color-table tr'), 1).map(function(row) { return [row.childNodes[3].textContent, row.childNodes[5].textContent.trim().split(",").map(Number)] }).reduce(function(data, row) {data[row[0]] = row[1]; return data}, {}))
|
||||
var colors = {
|
||||
"aliceblue": [240, 248, 255],
|
||||
"antiquewhite": [250, 235, 215],
|
||||
"aqua": [0, 255, 255],
|
||||
"aquamarine": [127, 255, 212],
|
||||
"azure": [240, 255, 255],
|
||||
"beige": [245, 245, 220],
|
||||
"bisque": [255, 228, 196],
|
||||
"black": [0, 0, 0],
|
||||
"blanchedalmond": [255, 235, 205],
|
||||
"blue": [0, 0, 255],
|
||||
"blueviolet": [138, 43, 226],
|
||||
"brown": [165, 42, 42],
|
||||
"burlywood": [222, 184, 135],
|
||||
"cadetblue": [95, 158, 160],
|
||||
"chartreuse": [127, 255, 0],
|
||||
"chocolate": [210, 105, 30],
|
||||
"coral": [255, 127, 80],
|
||||
"cornflowerblue": [100, 149, 237],
|
||||
"cornsilk": [255, 248, 220],
|
||||
"crimson": [220, 20, 60],
|
||||
"cyan": [0, 255, 255],
|
||||
"darkblue": [0, 0, 139],
|
||||
"darkcyan": [0, 139, 139],
|
||||
"darkgoldenrod": [184, 134, 11],
|
||||
"darkgray": [169, 169, 169],
|
||||
"darkgreen": [0, 100, 0],
|
||||
"darkgrey": [169, 169, 169],
|
||||
"darkkhaki": [189, 183, 107],
|
||||
"darkmagenta": [139, 0, 139],
|
||||
"darkolivegreen": [85, 107, 47],
|
||||
"darkorange": [255, 140, 0],
|
||||
"darkorchid": [153, 50, 204],
|
||||
"darkred": [139, 0, 0],
|
||||
"darksalmon": [233, 150, 122],
|
||||
"darkseagreen": [143, 188, 143],
|
||||
"darkslateblue": [72, 61, 139],
|
||||
"darkslategray": [47, 79, 79],
|
||||
"darkslategrey": [47, 79, 79],
|
||||
"darkturquoise": [0, 206, 209],
|
||||
"darkviolet": [148, 0, 211],
|
||||
"deeppink": [255, 20, 147],
|
||||
"deepskyblue": [0, 191, 255],
|
||||
"dimgray": [105, 105, 105],
|
||||
"dimgrey": [105, 105, 105],
|
||||
"dodgerblue": [30, 144, 255],
|
||||
"firebrick": [178, 34, 34],
|
||||
"floralwhite": [255, 250, 240],
|
||||
"forestgreen": [34, 139, 34],
|
||||
"fuchsia": [255, 0, 255],
|
||||
"gainsboro": [220, 220, 220],
|
||||
"ghostwhite": [248, 248, 255],
|
||||
"gold": [255, 215, 0],
|
||||
"goldenrod": [218, 165, 32],
|
||||
"gray": [128, 128, 128],
|
||||
"green": [0, 128, 0],
|
||||
"greenyellow": [173, 255, 47],
|
||||
"grey": [128, 128, 128],
|
||||
"honeydew": [240, 255, 240],
|
||||
"hotpink": [255, 105, 180],
|
||||
"indianred": [205, 92, 92],
|
||||
"indigo": [75, 0, 130],
|
||||
"ivory": [255, 255, 240],
|
||||
"khaki": [240, 230, 140],
|
||||
"lavender": [230, 230, 250],
|
||||
"lavenderblush": [255, 240, 245],
|
||||
"lawngreen": [124, 252, 0],
|
||||
"lemonchiffon": [255, 250, 205],
|
||||
"lightblue": [173, 216, 230],
|
||||
"lightcoral": [240, 128, 128],
|
||||
"lightcyan": [224, 255, 255],
|
||||
"lightgoldenrodyellow": [250, 250, 210],
|
||||
"lightgray": [211, 211, 211],
|
||||
"lightgreen": [144, 238, 144],
|
||||
"lightgrey": [211, 211, 211],
|
||||
"lightpink": [255, 182, 193],
|
||||
"lightsalmon": [255, 160, 122],
|
||||
"lightseagreen": [32, 178, 170],
|
||||
"lightskyblue": [135, 206, 250],
|
||||
"lightslategray": [119, 136, 153],
|
||||
"lightslategrey": [119, 136, 153],
|
||||
"lightsteelblue": [176, 196, 222],
|
||||
"lightyellow": [255, 255, 224],
|
||||
"lime": [0, 255, 0],
|
||||
"limegreen": [50, 205, 50],
|
||||
"linen": [250, 240, 230],
|
||||
"magenta": [255, 0, 255],
|
||||
"maroon": [128, 0, 0],
|
||||
"mediumaquamarine": [102, 205, 170],
|
||||
"mediumblue": [0, 0, 205],
|
||||
"mediumorchid": [186, 85, 211],
|
||||
"mediumpurple": [147, 112, 219],
|
||||
"mediumseagreen": [60, 179, 113],
|
||||
"mediumslateblue": [123, 104, 238],
|
||||
"mediumspringgreen": [0, 250, 154],
|
||||
"mediumturquoise": [72, 209, 204],
|
||||
"mediumvioletred": [199, 21, 133],
|
||||
"midnightblue": [25, 25, 112],
|
||||
"mintcream": [245, 255, 250],
|
||||
"mistyrose": [255, 228, 225],
|
||||
"moccasin": [255, 228, 181],
|
||||
"navajowhite": [255, 222, 173],
|
||||
"navy": [0, 0, 128],
|
||||
"oldlace": [253, 245, 230],
|
||||
"olive": [128, 128, 0],
|
||||
"olivedrab": [107, 142, 35],
|
||||
"orange": [255, 165, 0],
|
||||
"orangered": [255, 69, 0],
|
||||
"orchid": [218, 112, 214],
|
||||
"palegoldenrod": [238, 232, 170],
|
||||
"palegreen": [152, 251, 152],
|
||||
"paleturquoise": [175, 238, 238],
|
||||
"palevioletred": [219, 112, 147],
|
||||
"papayawhip": [255, 239, 213],
|
||||
"peachpuff": [255, 218, 185],
|
||||
"peru": [205, 133, 63],
|
||||
"pink": [255, 192, 203],
|
||||
"plum": [221, 160, 221],
|
||||
"powderblue": [176, 224, 230],
|
||||
"purple": [128, 0, 128],
|
||||
"rebeccapurple": [102, 51, 153],
|
||||
"red": [255, 0, 0],
|
||||
"rosybrown": [188, 143, 143],
|
||||
"royalblue": [65, 105, 225],
|
||||
"saddlebrown": [139, 69, 19],
|
||||
"salmon": [250, 128, 114],
|
||||
"sandybrown": [244, 164, 96],
|
||||
"seagreen": [46, 139, 87],
|
||||
"seashell": [255, 245, 238],
|
||||
"sienna": [160, 82, 45],
|
||||
"silver": [192, 192, 192],
|
||||
"skyblue": [135, 206, 235],
|
||||
"slateblue": [106, 90, 205],
|
||||
"slategray": [112, 128, 144],
|
||||
"slategrey": [112, 128, 144],
|
||||
"snow": [255, 250, 250],
|
||||
"springgreen": [0, 255, 127],
|
||||
"steelblue": [70, 130, 180],
|
||||
"tan": [210, 180, 140],
|
||||
"teal": [0, 128, 128],
|
||||
"thistle": [216, 191, 216],
|
||||
"tomato": [255, 99, 71],
|
||||
"turquoise": [64, 224, 208],
|
||||
"violet": [238, 130, 238],
|
||||
"wheat": [245, 222, 179],
|
||||
"white": [255, 255, 255],
|
||||
"whitesmoke": [245, 245, 245],
|
||||
"yellow": [255, 255, 0],
|
||||
"yellowgreen": [154, 205, 50]
|
||||
};
|
||||
|
||||
module.exports = Color;
|
||||
153
src/core.js
153
src/core.js
@ -1,153 +0,0 @@
|
||||
var Support = require('./support');
|
||||
var CanvasRenderer = require('./renderers/canvas');
|
||||
var ImageLoader = require('./imageloader');
|
||||
var NodeParser = require('./nodeparser');
|
||||
var NodeContainer = require('./nodecontainer');
|
||||
var log = require('./log');
|
||||
var utils = require('./utils');
|
||||
var createWindowClone = require('./clone');
|
||||
var loadUrlDocument = require('./proxy').loadUrlDocument;
|
||||
var getBounds = utils.getBounds;
|
||||
|
||||
var html2canvasNodeAttribute = "data-html2canvas-node";
|
||||
var html2canvasCloneIndex = 0;
|
||||
|
||||
function html2canvas(nodeList, options) {
|
||||
var index = html2canvasCloneIndex++;
|
||||
options = options || {};
|
||||
if (options.logging) {
|
||||
window.html2canvas.logging = true;
|
||||
window.html2canvas.start = Date.now();
|
||||
}
|
||||
|
||||
options.async = typeof(options.async) === "undefined" ? true : options.async;
|
||||
options.allowTaint = typeof(options.allowTaint) === "undefined" ? false : options.allowTaint;
|
||||
options.removeContainer = typeof(options.removeContainer) === "undefined" ? true : options.removeContainer;
|
||||
options.javascriptEnabled = typeof(options.javascriptEnabled) === "undefined" ? false : options.javascriptEnabled;
|
||||
options.imageTimeout = typeof(options.imageTimeout) === "undefined" ? 10000 : options.imageTimeout;
|
||||
options.renderer = typeof(options.renderer) === "function" ? options.renderer : CanvasRenderer;
|
||||
options.strict = !!options.strict;
|
||||
|
||||
if (typeof(nodeList) === "string") {
|
||||
if (typeof(options.proxy) !== "string") {
|
||||
return Promise.reject("Proxy must be used when rendering url");
|
||||
}
|
||||
var width = options.width != null ? options.width : window.innerWidth;
|
||||
var height = options.height != null ? options.height : window.innerHeight;
|
||||
return loadUrlDocument(absoluteUrl(nodeList), options.proxy, document, width, height, options).then(function(container) {
|
||||
return renderWindow(container.contentWindow.document.documentElement, container, options, width, height);
|
||||
});
|
||||
}
|
||||
|
||||
var node = ((nodeList === undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0];
|
||||
node.setAttribute(html2canvasNodeAttribute + index, index);
|
||||
return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
|
||||
if (typeof(options.onrendered) === "function") {
|
||||
log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
|
||||
options.onrendered(canvas);
|
||||
}
|
||||
return canvas;
|
||||
});
|
||||
}
|
||||
|
||||
html2canvas.CanvasRenderer = CanvasRenderer;
|
||||
html2canvas.NodeContainer = NodeContainer;
|
||||
html2canvas.log = log;
|
||||
html2canvas.utils = utils;
|
||||
|
||||
var html2canvasExport = (typeof(document) === "undefined" || typeof(Object.create) !== "function" || typeof(document.createElement("canvas").getContext) !== "function") ? function() {
|
||||
return Promise.reject("No canvas support");
|
||||
} : html2canvas;
|
||||
|
||||
module.exports = html2canvasExport;
|
||||
|
||||
if (typeof(define) === 'function' && define.amd) {
|
||||
define('html2canvas', [], function() {
|
||||
return html2canvasExport;
|
||||
});
|
||||
}
|
||||
|
||||
function renderDocument(document, options, windowWidth, windowHeight, html2canvasIndex) {
|
||||
return createWindowClone(document, document, windowWidth, windowHeight, options, document.defaultView.pageXOffset, document.defaultView.pageYOffset).then(function(container) {
|
||||
log("Document cloned");
|
||||
var attributeName = html2canvasNodeAttribute + html2canvasIndex;
|
||||
var selector = "[" + attributeName + "='" + html2canvasIndex + "']";
|
||||
document.querySelector(selector).removeAttribute(attributeName);
|
||||
var clonedWindow = container.contentWindow;
|
||||
var node = clonedWindow.document.querySelector(selector);
|
||||
var oncloneHandler = (typeof(options.onclone) === "function") ? Promise.resolve(options.onclone(clonedWindow.document)) : Promise.resolve(true);
|
||||
return oncloneHandler.then(function() {
|
||||
return renderWindow(node, container, options, windowWidth, windowHeight);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderWindow(node, container, options, windowWidth, windowHeight) {
|
||||
var clonedWindow = container.contentWindow;
|
||||
var support = new Support(clonedWindow.document);
|
||||
var imageLoader = new ImageLoader(options, support);
|
||||
var bounds = getBounds(node);
|
||||
var width = options.type === "view" ? windowWidth : documentWidth(clonedWindow.document);
|
||||
var height = options.type === "view" ? windowHeight : documentHeight(clonedWindow.document);
|
||||
var renderer = new options.renderer(width, height, imageLoader, options, document);
|
||||
var parser = new NodeParser(node, renderer, support, imageLoader, options);
|
||||
return parser.ready.then(function() {
|
||||
log("Finished rendering");
|
||||
var canvas;
|
||||
|
||||
if (options.type === "view") {
|
||||
canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});
|
||||
} else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) {
|
||||
canvas = renderer.canvas;
|
||||
} else {
|
||||
canvas = crop(renderer.canvas, {width: options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: clonedWindow.pageXOffset, y: clonedWindow.pageYOffset});
|
||||
}
|
||||
|
||||
cleanupContainer(container, options);
|
||||
return canvas;
|
||||
});
|
||||
}
|
||||
|
||||
function cleanupContainer(container, options) {
|
||||
if (options.removeContainer) {
|
||||
container.parentNode.removeChild(container);
|
||||
log("Cleaned up container");
|
||||
}
|
||||
}
|
||||
|
||||
function crop(canvas, bounds) {
|
||||
var croppedCanvas = document.createElement("canvas");
|
||||
var x1 = Math.min(canvas.width - 1, Math.max(0, bounds.left));
|
||||
var x2 = Math.min(canvas.width, Math.max(1, bounds.left + bounds.width));
|
||||
var y1 = Math.min(canvas.height - 1, Math.max(0, bounds.top));
|
||||
var y2 = Math.min(canvas.height, Math.max(1, bounds.top + bounds.height));
|
||||
croppedCanvas.width = bounds.width;
|
||||
croppedCanvas.height = bounds.height;
|
||||
log("Cropping canvas at:", "left:", bounds.left, "top:", bounds.top, "width:", (x2-x1), "height:", (y2-y1));
|
||||
log("Resulting crop with width", bounds.width, "and height", bounds.height, " with x", x1, "and y", y1);
|
||||
croppedCanvas.getContext("2d").drawImage(canvas, x1, y1, x2-x1, y2-y1, bounds.x, bounds.y, x2-x1, y2-y1);
|
||||
return croppedCanvas;
|
||||
}
|
||||
|
||||
function documentWidth (doc) {
|
||||
return Math.max(
|
||||
Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth),
|
||||
Math.max(doc.body.offsetWidth, doc.documentElement.offsetWidth),
|
||||
Math.max(doc.body.clientWidth, doc.documentElement.clientWidth)
|
||||
);
|
||||
}
|
||||
|
||||
function documentHeight (doc) {
|
||||
return Math.max(
|
||||
Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight),
|
||||
Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight),
|
||||
Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
|
||||
);
|
||||
}
|
||||
|
||||
function absoluteUrl(url) {
|
||||
var link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.href = link.href;
|
||||
return link;
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
var log = require('./log');
|
||||
var smallImage = require('./utils').smallImage;
|
||||
|
||||
function DummyImageContainer(src) {
|
||||
this.src = src;
|
||||
log("DummyImageContainer for", src);
|
||||
if (!this.promise || !this.image) {
|
||||
log("Initiating DummyImageContainer");
|
||||
DummyImageContainer.prototype.image = new Image();
|
||||
var image = this.image;
|
||||
DummyImageContainer.prototype.promise = new Promise(function(resolve, reject) {
|
||||
image.onload = resolve;
|
||||
image.onerror = reject;
|
||||
image.src = smallImage();
|
||||
if (image.complete === true) {
|
||||
resolve(image);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = DummyImageContainer;
|
||||
Submodule src/fabric deleted from 791c74a82e
52
src/font.js
52
src/font.js
@ -1,52 +0,0 @@
|
||||
var smallImage = require('./utils').smallImage;
|
||||
|
||||
function Font(family, size) {
|
||||
var container = document.createElement('div'),
|
||||
img = document.createElement('img'),
|
||||
span = document.createElement('span'),
|
||||
sampleText = 'Hidden Text',
|
||||
baseline,
|
||||
middle;
|
||||
|
||||
container.style.visibility = "hidden";
|
||||
container.style.fontFamily = family;
|
||||
container.style.fontSize = size;
|
||||
container.style.margin = 0;
|
||||
container.style.padding = 0;
|
||||
|
||||
document.body.appendChild(container);
|
||||
|
||||
img.src = smallImage();
|
||||
img.width = 1;
|
||||
img.height = 1;
|
||||
|
||||
img.style.margin = 0;
|
||||
img.style.padding = 0;
|
||||
img.style.verticalAlign = "baseline";
|
||||
|
||||
span.style.fontFamily = family;
|
||||
span.style.fontSize = size;
|
||||
span.style.margin = 0;
|
||||
span.style.padding = 0;
|
||||
|
||||
span.appendChild(document.createTextNode(sampleText));
|
||||
container.appendChild(span);
|
||||
container.appendChild(img);
|
||||
baseline = (img.offsetTop - span.offsetTop) + 1;
|
||||
|
||||
container.removeChild(span);
|
||||
container.appendChild(document.createTextNode(sampleText));
|
||||
|
||||
container.style.lineHeight = "normal";
|
||||
img.style.verticalAlign = "super";
|
||||
|
||||
middle = (img.offsetTop-container.offsetTop) + 1;
|
||||
|
||||
document.body.removeChild(container);
|
||||
|
||||
this.baseline = baseline;
|
||||
this.lineWidth = 1;
|
||||
this.middle = middle;
|
||||
}
|
||||
|
||||
module.exports = Font;
|
||||
@ -1,14 +0,0 @@
|
||||
var Font = require('./font');
|
||||
|
||||
function FontMetrics() {
|
||||
this.data = {};
|
||||
}
|
||||
|
||||
FontMetrics.prototype.getMetrics = function(family, size) {
|
||||
if (this.data[family + "-" + size] === undefined) {
|
||||
this.data[family + "-" + size] = new Font(family, size);
|
||||
}
|
||||
return this.data[family + "-" + size];
|
||||
};
|
||||
|
||||
module.exports = FontMetrics;
|
||||
@ -1,31 +0,0 @@
|
||||
var utils = require('./utils');
|
||||
var getBounds = utils.getBounds;
|
||||
var loadUrlDocument = require('./proxy').loadUrlDocument;
|
||||
|
||||
function FrameContainer(container, sameOrigin, options) {
|
||||
this.image = null;
|
||||
this.src = container;
|
||||
var self = this;
|
||||
var bounds = getBounds(container);
|
||||
this.promise = (!sameOrigin ? this.proxyLoad(options.proxy, bounds, options) : new Promise(function(resolve) {
|
||||
if (container.contentWindow.document.URL === "about:blank" || container.contentWindow.document.documentElement == null) {
|
||||
container.contentWindow.onload = container.onload = function() {
|
||||
resolve(container);
|
||||
};
|
||||
} else {
|
||||
resolve(container);
|
||||
}
|
||||
})).then(function(container) {
|
||||
var html2canvas = require('./core');
|
||||
return html2canvas(container.contentWindow.document.documentElement, {type: 'view', width: container.width, height: container.height, proxy: options.proxy, javascriptEnabled: options.javascriptEnabled, removeContainer: options.removeContainer, allowTaint: options.allowTaint, imageTimeout: options.imageTimeout / 2});
|
||||
}).then(function(canvas) {
|
||||
return self.image = canvas;
|
||||
});
|
||||
}
|
||||
|
||||
FrameContainer.prototype.proxyLoad = function(proxy, bounds, options) {
|
||||
var container = this.src;
|
||||
return loadUrlDocument(container.src, proxy, container.ownerDocument, bounds.width, bounds.height, options);
|
||||
};
|
||||
|
||||
module.exports = FrameContainer;
|
||||
@ -1,17 +0,0 @@
|
||||
function GradientContainer(imageData) {
|
||||
this.src = imageData.value;
|
||||
this.colorStops = [];
|
||||
this.type = null;
|
||||
this.x0 = 0.5;
|
||||
this.y0 = 0.5;
|
||||
this.x1 = 0.5;
|
||||
this.y1 = 0.5;
|
||||
this.promise = Promise.resolve(true);
|
||||
}
|
||||
|
||||
GradientContainer.prototype.TYPES = {
|
||||
LINEAR: 1,
|
||||
RADIAL: 2
|
||||
};
|
||||
|
||||
module.exports = GradientContainer;
|
||||
@ -1,19 +0,0 @@
|
||||
function ImageContainer(src, cors) {
|
||||
this.src = src;
|
||||
this.image = new Image();
|
||||
var self = this;
|
||||
this.tainted = null;
|
||||
this.promise = new Promise(function(resolve, reject) {
|
||||
self.image.onload = resolve;
|
||||
self.image.onerror = reject;
|
||||
if (cors) {
|
||||
self.image.crossOrigin = "anonymous";
|
||||
}
|
||||
self.image.src = src;
|
||||
if (self.image.complete === true) {
|
||||
resolve(self.image);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = ImageContainer;
|
||||
@ -1,157 +0,0 @@
|
||||
var log = require('./log');
|
||||
var ImageContainer = require('./imagecontainer');
|
||||
var DummyImageContainer = require('./dummyimagecontainer');
|
||||
var ProxyImageContainer = require('./proxyimagecontainer');
|
||||
var FrameContainer = require('./framecontainer');
|
||||
var SVGContainer = require('./svgcontainer');
|
||||
var SVGNodeContainer = require('./svgnodecontainer');
|
||||
var LinearGradientContainer = require('./lineargradientcontainer');
|
||||
var WebkitGradientContainer = require('./webkitgradientcontainer');
|
||||
var bind = require('./utils').bind;
|
||||
|
||||
function ImageLoader(options, support) {
|
||||
this.link = null;
|
||||
this.options = options;
|
||||
this.support = support;
|
||||
this.origin = this.getOrigin(window.location.href);
|
||||
}
|
||||
|
||||
ImageLoader.prototype.findImages = function(nodes) {
|
||||
var images = [];
|
||||
nodes.reduce(function(imageNodes, container) {
|
||||
switch(container.node.nodeName) {
|
||||
case "IMG":
|
||||
return imageNodes.concat([{
|
||||
args: [container.node.src],
|
||||
method: "url"
|
||||
}]);
|
||||
case "svg":
|
||||
case "IFRAME":
|
||||
return imageNodes.concat([{
|
||||
args: [container.node],
|
||||
method: container.node.nodeName
|
||||
}]);
|
||||
}
|
||||
return imageNodes;
|
||||
}, []).forEach(this.addImage(images, this.loadImage), this);
|
||||
return images;
|
||||
};
|
||||
|
||||
ImageLoader.prototype.findBackgroundImage = function(images, container) {
|
||||
container.parseBackgroundImages().filter(this.hasImageBackground).forEach(this.addImage(images, this.loadImage), this);
|
||||
return images;
|
||||
};
|
||||
|
||||
ImageLoader.prototype.addImage = function(images, callback) {
|
||||
return function(newImage) {
|
||||
newImage.args.forEach(function(image) {
|
||||
if (!this.imageExists(images, image)) {
|
||||
images.splice(0, 0, callback.call(this, newImage));
|
||||
log('Added image #' + (images.length), typeof(image) === "string" ? image.substring(0, 100) : image);
|
||||
}
|
||||
}, this);
|
||||
};
|
||||
};
|
||||
|
||||
ImageLoader.prototype.hasImageBackground = function(imageData) {
|
||||
return imageData.method !== "none";
|
||||
};
|
||||
|
||||
ImageLoader.prototype.loadImage = function(imageData) {
|
||||
if (imageData.method === "url") {
|
||||
var src = imageData.args[0];
|
||||
if (this.isSVG(src) && !this.support.svg && !this.options.allowTaint) {
|
||||
return new SVGContainer(src);
|
||||
} else if (src.match(/data:image\/.*;base64,/i)) {
|
||||
return new ImageContainer(src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, ''), false);
|
||||
} else if (this.isSameOrigin(src) || this.options.allowTaint === true || this.isSVG(src)) {
|
||||
return new ImageContainer(src, false);
|
||||
} else if (this.support.cors && !this.options.allowTaint && this.options.useCORS) {
|
||||
return new ImageContainer(src, true);
|
||||
} else if (this.options.proxy) {
|
||||
return new ProxyImageContainer(src, this.options.proxy);
|
||||
} else {
|
||||
return new DummyImageContainer(src);
|
||||
}
|
||||
} else if (imageData.method === "linear-gradient") {
|
||||
return new LinearGradientContainer(imageData);
|
||||
} else if (imageData.method === "gradient") {
|
||||
return new WebkitGradientContainer(imageData);
|
||||
} else if (imageData.method === "svg") {
|
||||
return new SVGNodeContainer(imageData.args[0], this.support.svg);
|
||||
} else if (imageData.method === "IFRAME") {
|
||||
return new FrameContainer(imageData.args[0], this.isSameOrigin(imageData.args[0].src), this.options);
|
||||
} else {
|
||||
return new DummyImageContainer(imageData);
|
||||
}
|
||||
};
|
||||
|
||||
ImageLoader.prototype.isSVG = function(src) {
|
||||
return src.substring(src.length - 3).toLowerCase() === "svg" || SVGContainer.prototype.isInline(src);
|
||||
};
|
||||
|
||||
ImageLoader.prototype.imageExists = function(images, src) {
|
||||
return images.some(function(image) {
|
||||
return image.src === src;
|
||||
});
|
||||
};
|
||||
|
||||
ImageLoader.prototype.isSameOrigin = function(url) {
|
||||
return (this.getOrigin(url) === this.origin);
|
||||
};
|
||||
|
||||
ImageLoader.prototype.getOrigin = function(url) {
|
||||
var link = this.link || (this.link = document.createElement("a"));
|
||||
link.href = url;
|
||||
link.href = link.href; // IE9, LOL! - http://jsfiddle.net/niklasvh/2e48b/
|
||||
return link.protocol + link.hostname + link.port;
|
||||
};
|
||||
|
||||
ImageLoader.prototype.getPromise = function(container) {
|
||||
return this.timeout(container, this.options.imageTimeout)['catch'](function() {
|
||||
var dummy = new DummyImageContainer(container.src);
|
||||
return dummy.promise.then(function(image) {
|
||||
container.image = image;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
ImageLoader.prototype.get = function(src) {
|
||||
var found = null;
|
||||
return this.images.some(function(img) {
|
||||
return (found = img).src === src;
|
||||
}) ? found : null;
|
||||
};
|
||||
|
||||
ImageLoader.prototype.fetch = function(nodes) {
|
||||
this.images = nodes.reduce(bind(this.findBackgroundImage, this), this.findImages(nodes));
|
||||
this.images.forEach(function(image, index) {
|
||||
image.promise.then(function() {
|
||||
log("Succesfully loaded image #"+ (index+1), image);
|
||||
}, function(e) {
|
||||
log("Failed loading image #"+ (index+1), image, e);
|
||||
});
|
||||
});
|
||||
this.ready = Promise.all(this.images.map(this.getPromise, this));
|
||||
log("Finished searching images");
|
||||
return this;
|
||||
};
|
||||
|
||||
ImageLoader.prototype.timeout = function(container, timeout) {
|
||||
var timer;
|
||||
var promise = Promise.race([container.promise, new Promise(function(res, reject) {
|
||||
timer = setTimeout(function() {
|
||||
log("Timed out loading image", container);
|
||||
reject(container);
|
||||
}, timeout);
|
||||
})]).then(function(container) {
|
||||
clearTimeout(timer);
|
||||
return container;
|
||||
});
|
||||
promise['catch'](function() {
|
||||
clearTimeout(timer);
|
||||
});
|
||||
return promise;
|
||||
};
|
||||
|
||||
module.exports = ImageLoader;
|
||||
@ -1,82 +0,0 @@
|
||||
var GradientContainer = require('./gradientcontainer');
|
||||
var Color = require('./color');
|
||||
|
||||
var COLOR_STOP_REGEXP = /^\s*(.*)\s*(\d{1,3})?(%|px)?$/;
|
||||
|
||||
function LinearGradientContainer(imageData) {
|
||||
GradientContainer.apply(this, arguments);
|
||||
this.type = this.TYPES.LINEAR;
|
||||
|
||||
var hasDirection = imageData.args[0].match(this.stepRegExp) === null;
|
||||
|
||||
if (hasDirection) {
|
||||
imageData.args[0].split(" ").reverse().forEach(function(position) {
|
||||
switch(position) {
|
||||
case "left":
|
||||
this.x0 = 0;
|
||||
this.x1 = 1;
|
||||
break;
|
||||
case "top":
|
||||
this.y0 = 0;
|
||||
this.y1 = 1;
|
||||
break;
|
||||
case "right":
|
||||
this.x0 = 1;
|
||||
this.x1 = 0;
|
||||
break;
|
||||
case "bottom":
|
||||
this.y0 = 1;
|
||||
this.y1 = 0;
|
||||
break;
|
||||
case "to":
|
||||
var y0 = this.y0;
|
||||
var x0 = this.x0;
|
||||
this.y0 = this.y1;
|
||||
this.x0 = this.x1;
|
||||
this.x1 = x0;
|
||||
this.y1 = y0;
|
||||
break;
|
||||
}
|
||||
}, this);
|
||||
} else {
|
||||
this.y0 = 0;
|
||||
this.y1 = 1;
|
||||
}
|
||||
|
||||
this.colorStops = imageData.args.slice(hasDirection ? 1 : 0)
|
||||
.map(function(colorStop) { return colorStop.match(COLOR_STOP_REGEXP);})
|
||||
.filter(function(colorStopMatch) { return !!colorStopMatch;})
|
||||
.map(function(colorStopMatch) {
|
||||
return {
|
||||
color: new Color(colorStopMatch[1]),
|
||||
stop: colorStopMatch[3] === "%" ? colorStopMatch[2] / 100 : null
|
||||
};
|
||||
});
|
||||
|
||||
if (this.colorStops[0].stop === null) {
|
||||
this.colorStops[0].stop = 0;
|
||||
}
|
||||
|
||||
if (this.colorStops[this.colorStops.length - 1].stop === null) {
|
||||
this.colorStops[this.colorStops.length - 1].stop = 1;
|
||||
}
|
||||
|
||||
this.colorStops.forEach(function(colorStop, index) {
|
||||
if (colorStop.stop === null) {
|
||||
this.colorStops.slice(index).some(function(find, count) {
|
||||
if (find.stop !== null) {
|
||||
colorStop.stop = ((find.stop - this.colorStops[index - 1].stop) / (count + 1)) + this.colorStops[index - 1].stop;
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}, this);
|
||||
}
|
||||
}, this);
|
||||
}
|
||||
|
||||
LinearGradientContainer.prototype = Object.create(GradientContainer.prototype);
|
||||
|
||||
LinearGradientContainer.prototype.stepRegExp = /((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/;
|
||||
|
||||
module.exports = LinearGradientContainer;
|
||||
@ -1,5 +0,0 @@
|
||||
module.exports = function() {
|
||||
if (window.html2canvas.logging && window.console && window.console.log) {
|
||||
Function.prototype.bind.call(window.console.log, (window.console)).apply(window.console, [(Date.now() - window.html2canvas.start) + "ms", "html2canvas:"].concat([].slice.call(arguments, 0)));
|
||||
}
|
||||
};
|
||||
@ -1,296 +0,0 @@
|
||||
var Color = require('./color');
|
||||
var utils = require('./utils');
|
||||
var getBounds = utils.getBounds;
|
||||
var parseBackgrounds = utils.parseBackgrounds;
|
||||
var offsetBounds = utils.offsetBounds;
|
||||
|
||||
function NodeContainer(node, parent) {
|
||||
this.node = node;
|
||||
this.parent = parent;
|
||||
this.stack = null;
|
||||
this.bounds = null;
|
||||
this.borders = null;
|
||||
this.clip = [];
|
||||
this.backgroundClip = [];
|
||||
this.offsetBounds = null;
|
||||
this.visible = null;
|
||||
this.computedStyles = null;
|
||||
this.colors = {};
|
||||
this.styles = {};
|
||||
this.backgroundImages = null;
|
||||
this.transformData = null;
|
||||
this.transformMatrix = null;
|
||||
this.isPseudoElement = false;
|
||||
this.opacity = null;
|
||||
}
|
||||
|
||||
NodeContainer.prototype.cloneTo = function(stack) {
|
||||
stack.visible = this.visible;
|
||||
stack.borders = this.borders;
|
||||
stack.bounds = this.bounds;
|
||||
stack.clip = this.clip;
|
||||
stack.backgroundClip = this.backgroundClip;
|
||||
stack.computedStyles = this.computedStyles;
|
||||
stack.styles = this.styles;
|
||||
stack.backgroundImages = this.backgroundImages;
|
||||
stack.opacity = this.opacity;
|
||||
};
|
||||
|
||||
NodeContainer.prototype.getOpacity = function() {
|
||||
return this.opacity === null ? (this.opacity = this.cssFloat('opacity')) : this.opacity;
|
||||
};
|
||||
|
||||
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") &&
|
||||
(this.node.nodeName !== "INPUT" || this.node.getAttribute("type") !== "hidden")
|
||||
);
|
||||
};
|
||||
|
||||
NodeContainer.prototype.css = function(attribute) {
|
||||
if (!this.computedStyles) {
|
||||
this.computedStyles = this.isPseudoElement ? this.parent.computedStyle(this.before ? ":before" : ":after") : this.computedStyle(null);
|
||||
}
|
||||
|
||||
return this.styles[attribute] || (this.styles[attribute] = this.computedStyles[attribute]);
|
||||
};
|
||||
|
||||
NodeContainer.prototype.prefixedCss = function(attribute) {
|
||||
var prefixes = ["webkit", "moz", "ms", "o"];
|
||||
var value = this.css(attribute);
|
||||
if (value === undefined) {
|
||||
prefixes.some(function(prefix) {
|
||||
value = this.css(prefix + attribute.substr(0, 1).toUpperCase() + attribute.substr(1));
|
||||
return value !== undefined;
|
||||
}, this);
|
||||
}
|
||||
return value === undefined ? null : value;
|
||||
};
|
||||
|
||||
NodeContainer.prototype.computedStyle = function(type) {
|
||||
return this.node.ownerDocument.defaultView.getComputedStyle(this.node, type);
|
||||
};
|
||||
|
||||
NodeContainer.prototype.cssInt = function(attribute) {
|
||||
var value = parseInt(this.css(attribute), 10);
|
||||
return (isNaN(value)) ? 0 : value; // borders in old IE are throwing 'medium' for demo.html
|
||||
};
|
||||
|
||||
NodeContainer.prototype.color = function(attribute) {
|
||||
return this.colors[attribute] || (this.colors[attribute] = new Color(this.css(attribute)));
|
||||
};
|
||||
|
||||
NodeContainer.prototype.cssFloat = function(attribute) {
|
||||
var value = parseFloat(this.css(attribute));
|
||||
return (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;
|
||||
};
|
||||
|
||||
NodeContainer.prototype.parseClip = function() {
|
||||
var matches = this.css('clip').match(this.CLIP);
|
||||
if (matches) {
|
||||
return {
|
||||
top: parseInt(matches[1], 10),
|
||||
right: parseInt(matches[2], 10),
|
||||
bottom: parseInt(matches[3], 10),
|
||||
left: parseInt(matches[4], 10)
|
||||
};
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
NodeContainer.prototype.parseBackgroundImages = function() {
|
||||
return this.backgroundImages || (this.backgroundImages = parseBackgrounds(this.css("backgroundImage")));
|
||||
};
|
||||
|
||||
NodeContainer.prototype.cssList = function(property, index) {
|
||||
var value = (this.css(property) || '').split(',');
|
||||
value = value[index || 0] || value[0] || 'auto';
|
||||
value = value.trim().split(' ');
|
||||
if (value.length === 1) {
|
||||
value = [value[0], isPercentage(value[0]) ? 'auto' : value[0]];
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
NodeContainer.prototype.parseBackgroundSize = function(bounds, image, index) {
|
||||
var size = this.cssList("backgroundSize", index);
|
||||
var width, height;
|
||||
|
||||
if (isPercentage(size[0])) {
|
||||
width = bounds.width * parseFloat(size[0]) / 100;
|
||||
} else if (/contain|cover/.test(size[0])) {
|
||||
var targetRatio = bounds.width / bounds.height, currentRatio = image.width / image.height;
|
||||
return (targetRatio < currentRatio ^ size[0] === 'contain') ? {width: bounds.height * currentRatio, height: bounds.height} : {width: bounds.width, height: bounds.width / currentRatio};
|
||||
} else {
|
||||
width = parseInt(size[0], 10);
|
||||
}
|
||||
|
||||
if (size[0] === 'auto' && size[1] === 'auto') {
|
||||
height = image.height;
|
||||
} else if (size[1] === 'auto') {
|
||||
height = width / image.width * image.height;
|
||||
} else if (isPercentage(size[1])) {
|
||||
height = bounds.height * parseFloat(size[1]) / 100;
|
||||
} else {
|
||||
height = parseInt(size[1], 10);
|
||||
}
|
||||
|
||||
if (size[0] === 'auto') {
|
||||
width = height / image.height * image.width;
|
||||
}
|
||||
|
||||
return {width: width, height: height};
|
||||
};
|
||||
|
||||
NodeContainer.prototype.parseBackgroundPosition = function(bounds, image, index, backgroundSize) {
|
||||
var position = this.cssList('backgroundPosition', index);
|
||||
var left, top;
|
||||
|
||||
if (isPercentage(position[0])){
|
||||
left = (bounds.width - (backgroundSize || image).width) * (parseFloat(position[0]) / 100);
|
||||
} else {
|
||||
left = parseInt(position[0], 10);
|
||||
}
|
||||
|
||||
if (position[1] === 'auto') {
|
||||
top = left / image.width * image.height;
|
||||
} else if (isPercentage(position[1])){
|
||||
top = (bounds.height - (backgroundSize || image).height) * parseFloat(position[1]) / 100;
|
||||
} else {
|
||||
top = parseInt(position[1], 10);
|
||||
}
|
||||
|
||||
if (position[0] === 'auto') {
|
||||
left = top / image.height * image.width;
|
||||
}
|
||||
|
||||
return {left: left, top: top};
|
||||
};
|
||||
|
||||
NodeContainer.prototype.parseBackgroundRepeat = function(index) {
|
||||
return this.cssList("backgroundRepeat", index)[0];
|
||||
};
|
||||
|
||||
NodeContainer.prototype.parseTextShadows = function() {
|
||||
var textShadow = this.css("textShadow");
|
||||
var results = [];
|
||||
|
||||
if (textShadow && textShadow !== 'none') {
|
||||
var shadows = textShadow.match(this.TEXT_SHADOW_PROPERTY);
|
||||
for (var i = 0; shadows && (i < shadows.length); i++) {
|
||||
var s = shadows[i].match(this.TEXT_SHADOW_VALUES);
|
||||
results.push({
|
||||
color: new Color(s[0]),
|
||||
offsetX: s[1] ? parseFloat(s[1].replace('px', '')) : 0,
|
||||
offsetY: s[2] ? parseFloat(s[2].replace('px', '')) : 0,
|
||||
blur: s[3] ? s[3].replace('px', '') : 0
|
||||
});
|
||||
}
|
||||
}
|
||||
return results;
|
||||
};
|
||||
|
||||
NodeContainer.prototype.parseTransform = function() {
|
||||
if (!this.transformData) {
|
||||
if (this.hasTransform()) {
|
||||
var offset = this.parseBounds();
|
||||
var origin = this.prefixedCss("transformOrigin").split(" ").map(removePx).map(asFloat);
|
||||
origin[0] += offset.left;
|
||||
origin[1] += offset.top;
|
||||
this.transformData = {
|
||||
origin: origin,
|
||||
matrix: this.parseTransformMatrix()
|
||||
};
|
||||
} else {
|
||||
this.transformData = {
|
||||
origin: [0, 0],
|
||||
matrix: [1, 0, 0, 1, 0, 0]
|
||||
};
|
||||
}
|
||||
}
|
||||
return this.transformData;
|
||||
};
|
||||
|
||||
NodeContainer.prototype.parseTransformMatrix = function() {
|
||||
if (!this.transformMatrix) {
|
||||
var transform = this.prefixedCss("transform");
|
||||
var matrix = transform ? parseMatrix(transform.match(this.MATRIX_PROPERTY)) : null;
|
||||
this.transformMatrix = matrix ? matrix : [1, 0, 0, 1, 0, 0];
|
||||
}
|
||||
return this.transformMatrix;
|
||||
};
|
||||
|
||||
NodeContainer.prototype.parseBounds = function() {
|
||||
return this.bounds || (this.bounds = this.hasTransform() ? offsetBounds(this.node) : getBounds(this.node));
|
||||
};
|
||||
|
||||
NodeContainer.prototype.hasTransform = function() {
|
||||
return this.parseTransformMatrix().join(",") !== "1,0,0,1,0,0" || (this.parent && this.parent.hasTransform());
|
||||
};
|
||||
|
||||
NodeContainer.prototype.getValue = function() {
|
||||
var value = this.node.value || "";
|
||||
if (this.node.tagName === "SELECT") {
|
||||
value = selectionValue(this.node);
|
||||
} else if (this.node.type === "password") {
|
||||
value = Array(value.length + 1).join('\u2022'); // jshint ignore:line
|
||||
}
|
||||
return value.length === 0 ? (this.node.placeholder || "") : value;
|
||||
};
|
||||
|
||||
NodeContainer.prototype.MATRIX_PROPERTY = /(matrix|matrix3d)\((.+)\)/;
|
||||
NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
|
||||
NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;
|
||||
NodeContainer.prototype.CLIP = /^rect\((\d+)px,? (\d+)px,? (\d+)px,? (\d+)px\)$/;
|
||||
|
||||
function selectionValue(node) {
|
||||
var option = node.options[node.selectedIndex || 0];
|
||||
return option ? (option.text || "") : "";
|
||||
}
|
||||
|
||||
function parseMatrix(match) {
|
||||
if (match && match[1] === "matrix") {
|
||||
return match[2].split(",").map(function(s) {
|
||||
return parseFloat(s.trim());
|
||||
});
|
||||
} else if (match && match[1] === "matrix3d") {
|
||||
var matrix3d = match[2].split(",").map(function(s) {
|
||||
return parseFloat(s.trim());
|
||||
});
|
||||
return [matrix3d[0], matrix3d[1], matrix3d[4], matrix3d[5], matrix3d[12], matrix3d[13]];
|
||||
}
|
||||
}
|
||||
|
||||
function isPercentage(value) {
|
||||
return value.toString().indexOf("%") !== -1;
|
||||
}
|
||||
|
||||
function removePx(str) {
|
||||
return str.replace("px", "");
|
||||
}
|
||||
|
||||
function asFloat(str) {
|
||||
return parseFloat(str);
|
||||
}
|
||||
|
||||
module.exports = NodeContainer;
|
||||
@ -1,869 +0,0 @@
|
||||
var log = require('./log');
|
||||
var punycode = require('punycode');
|
||||
var NodeContainer = require('./nodecontainer');
|
||||
var TextContainer = require('./textcontainer');
|
||||
var PseudoElementContainer = require('./pseudoelementcontainer');
|
||||
var FontMetrics = require('./fontmetrics');
|
||||
var Color = require('./color');
|
||||
var StackingContext = require('./stackingcontext');
|
||||
var utils = require('./utils');
|
||||
var bind = utils.bind;
|
||||
var getBounds = utils.getBounds;
|
||||
var parseBackgrounds = utils.parseBackgrounds;
|
||||
var offsetBounds = utils.offsetBounds;
|
||||
|
||||
function NodeParser(element, renderer, support, imageLoader, options) {
|
||||
log("Starting NodeParser");
|
||||
this.renderer = renderer;
|
||||
this.options = options;
|
||||
this.range = null;
|
||||
this.support = support;
|
||||
this.renderQueue = [];
|
||||
this.stack = new StackingContext(true, 1, element.ownerDocument, null);
|
||||
var parent = new NodeContainer(element, null);
|
||||
if (options.background) {
|
||||
renderer.rectangle(0, 0, renderer.width, renderer.height, new Color(options.background));
|
||||
}
|
||||
if (element === element.ownerDocument.documentElement) {
|
||||
// http://www.w3.org/TR/css3-background/#special-backgrounds
|
||||
var canvasBackground = new NodeContainer(parent.color('backgroundColor').isTransparent() ? element.ownerDocument.body : element.ownerDocument.documentElement, null);
|
||||
renderer.rectangle(0, 0, renderer.width, renderer.height, canvasBackground.color('backgroundColor'));
|
||||
}
|
||||
parent.visibile = parent.isElementVisible();
|
||||
this.createPseudoHideStyles(element.ownerDocument);
|
||||
this.disableAnimations(element.ownerDocument);
|
||||
this.nodes = flatten([parent].concat(this.getChildren(parent)).filter(function(container) {
|
||||
return container.visible = container.isElementVisible();
|
||||
}).map(this.getPseudoElements, this));
|
||||
this.fontMetrics = new FontMetrics();
|
||||
log("Fetched nodes, total:", this.nodes.length);
|
||||
log("Calculate overflow clips");
|
||||
this.calculateOverflowClips();
|
||||
log("Start fetching images");
|
||||
this.images = imageLoader.fetch(this.nodes.filter(isElement));
|
||||
this.ready = this.images.ready.then(bind(function() {
|
||||
log("Images loaded, starting parsing");
|
||||
log("Creating stacking contexts");
|
||||
this.createStackingContexts();
|
||||
log("Sorting stacking contexts");
|
||||
this.sortStackingContexts(this.stack);
|
||||
this.parse(this.stack);
|
||||
log("Render queue created with " + this.renderQueue.length + " items");
|
||||
return new Promise(bind(function(resolve) {
|
||||
if (!options.async) {
|
||||
this.renderQueue.forEach(this.paint, this);
|
||||
resolve();
|
||||
} else if (typeof(options.async) === "function") {
|
||||
options.async.call(this, this.renderQueue, resolve);
|
||||
} else if (this.renderQueue.length > 0){
|
||||
this.renderIndex = 0;
|
||||
this.asyncRenderer(this.renderQueue, resolve);
|
||||
} else {
|
||||
resolve();
|
||||
}
|
||||
}, this));
|
||||
}, this));
|
||||
}
|
||||
|
||||
NodeParser.prototype.calculateOverflowClips = function() {
|
||||
this.nodes.forEach(function(container) {
|
||||
if (isElement(container)) {
|
||||
if (isPseudoElement(container)) {
|
||||
container.appendToDOM();
|
||||
}
|
||||
container.borders = this.parseBorders(container);
|
||||
var clip = (container.css('overflow') === "hidden") ? [container.borders.clip] : [];
|
||||
var cssClip = container.parseClip();
|
||||
if (cssClip && ["absolute", "fixed"].indexOf(container.css('position')) !== -1) {
|
||||
clip.push([["rect",
|
||||
container.bounds.left + cssClip.left,
|
||||
container.bounds.top + cssClip.top,
|
||||
cssClip.right - cssClip.left,
|
||||
cssClip.bottom - cssClip.top
|
||||
]]);
|
||||
}
|
||||
container.clip = hasParentClip(container) ? container.parent.clip.concat(clip) : clip;
|
||||
container.backgroundClip = (container.css('overflow') !== "hidden") ? container.clip.concat([container.borders.clip]) : container.clip;
|
||||
if (isPseudoElement(container)) {
|
||||
container.cleanDOM();
|
||||
}
|
||||
} else if (isTextNode(container)) {
|
||||
container.clip = hasParentClip(container) ? container.parent.clip : [];
|
||||
}
|
||||
if (!isPseudoElement(container)) {
|
||||
container.bounds = null;
|
||||
}
|
||||
}, this);
|
||||
};
|
||||
|
||||
function hasParentClip(container) {
|
||||
return container.parent && container.parent.clip.length;
|
||||
}
|
||||
|
||||
NodeParser.prototype.asyncRenderer = function(queue, resolve, asyncTimer) {
|
||||
asyncTimer = asyncTimer || Date.now();
|
||||
this.paint(queue[this.renderIndex++]);
|
||||
if (queue.length === this.renderIndex) {
|
||||
resolve();
|
||||
} else if (asyncTimer + 20 > Date.now()) {
|
||||
this.asyncRenderer(queue, resolve, asyncTimer);
|
||||
} else {
|
||||
setTimeout(bind(function() {
|
||||
this.asyncRenderer(queue, resolve);
|
||||
}, this), 0);
|
||||
}
|
||||
};
|
||||
|
||||
NodeParser.prototype.createPseudoHideStyles = function(document) {
|
||||
this.createStyles(document, '.' + PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_BEFORE + ':before { content: "" !important; display: none !important; }' +
|
||||
'.' + PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_AFTER + ':after { content: "" !important; display: none !important; }');
|
||||
};
|
||||
|
||||
NodeParser.prototype.disableAnimations = function(document) {
|
||||
this.createStyles(document, '* { -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; animation: none !important; ' +
|
||||
'-webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important;}');
|
||||
};
|
||||
|
||||
NodeParser.prototype.createStyles = function(document, styles) {
|
||||
var hidePseudoElements = document.createElement('style');
|
||||
hidePseudoElements.innerHTML = styles;
|
||||
document.body.appendChild(hidePseudoElements);
|
||||
};
|
||||
|
||||
NodeParser.prototype.getPseudoElements = function(container) {
|
||||
var nodes = [[container]];
|
||||
if (container.node.nodeType === Node.ELEMENT_NODE) {
|
||||
var before = this.getPseudoElement(container, ":before");
|
||||
var after = this.getPseudoElement(container, ":after");
|
||||
|
||||
if (before) {
|
||||
nodes.push(before);
|
||||
}
|
||||
|
||||
if (after) {
|
||||
nodes.push(after);
|
||||
}
|
||||
}
|
||||
return flatten(nodes);
|
||||
};
|
||||
|
||||
function toCamelCase(str) {
|
||||
return str.replace(/(\-[a-z])/g, function(match){
|
||||
return match.toUpperCase().replace('-','');
|
||||
});
|
||||
}
|
||||
|
||||
NodeParser.prototype.getPseudoElement = function(container, type) {
|
||||
var style = container.computedStyle(type);
|
||||
if(!style || !style.content || style.content === "none" || style.content === "-moz-alt-content" || style.display === "none") {
|
||||
return null;
|
||||
}
|
||||
|
||||
var content = stripQuotes(style.content);
|
||||
var isImage = content.substr(0, 3) === 'url';
|
||||
var pseudoNode = document.createElement(isImage ? 'img' : 'html2canvaspseudoelement');
|
||||
var pseudoContainer = new PseudoElementContainer(pseudoNode, container, type);
|
||||
|
||||
for (var i = style.length-1; i >= 0; i--) {
|
||||
var property = toCamelCase(style.item(i));
|
||||
pseudoNode.style[property] = style[property];
|
||||
}
|
||||
|
||||
pseudoNode.className = PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_BEFORE + " " + PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_AFTER;
|
||||
|
||||
if (isImage) {
|
||||
pseudoNode.src = parseBackgrounds(content)[0].args[0];
|
||||
return [pseudoContainer];
|
||||
} else {
|
||||
var text = document.createTextNode(content);
|
||||
pseudoNode.appendChild(text);
|
||||
return [pseudoContainer, new TextContainer(text, pseudoContainer)];
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
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 && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
|
||||
}, this));
|
||||
};
|
||||
|
||||
NodeParser.prototype.newStackingContext = function(container, hasOwnStacking) {
|
||||
var stack = new StackingContext(hasOwnStacking, container.getOpacity(), container.node, container.parent);
|
||||
container.cloneTo(stack);
|
||||
var parentStack = hasOwnStacking ? stack.getParentStack(this) : stack.parent.stack;
|
||||
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) || container.hasTransform())) {
|
||||
this.newStackingContext(container, true);
|
||||
} else if (isElement(container) && ((isPositioned(container) && zIndex0(container)) || isInlineBlock(container) || isFloating(container))) {
|
||||
this.newStackingContext(container, false);
|
||||
} else {
|
||||
container.assignStack(container.parent.stack);
|
||||
}
|
||||
}, this);
|
||||
};
|
||||
|
||||
NodeParser.prototype.isBodyWithTransparentRoot = function(container) {
|
||||
return container.node.nodeName === "BODY" && container.parent.color('backgroundColor').isTransparent();
|
||||
};
|
||||
|
||||
NodeParser.prototype.isRootElement = function(container) {
|
||||
return container.parent === null;
|
||||
};
|
||||
|
||||
NodeParser.prototype.sortStackingContexts = function(stack) {
|
||||
stack.contexts.sort(zIndexSort(stack.contexts.slice(0)));
|
||||
stack.contexts.forEach(this.sortStackingContexts, this);
|
||||
};
|
||||
|
||||
NodeParser.prototype.parseTextBounds = function(container) {
|
||||
return function(text, index, textList) {
|
||||
if (container.parent.css("textDecoration").substr(0, 4) !== "none" || text.trim().length !== 0) {
|
||||
if (this.support.rangeBounds && !container.parent.hasTransform()) {
|
||||
var offset = textList.slice(0, index).join("").length;
|
||||
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.parent.hasTransform());
|
||||
container.node = replacementNode;
|
||||
return bounds;
|
||||
}
|
||||
} else if(!this.support.rangeBounds || container.parent.hasTransform()){
|
||||
container.node = container.node.splitText(text.length);
|
||||
}
|
||||
return {};
|
||||
};
|
||||
};
|
||||
|
||||
NodeParser.prototype.getWrapperBounds = function(node, transform) {
|
||||
var wrapper = node.ownerDocument.createElement('html2canvaswrapper');
|
||||
var parent = node.parentNode,
|
||||
backupText = node.cloneNode(true);
|
||||
|
||||
wrapper.appendChild(node.cloneNode(true));
|
||||
parent.replaceChild(wrapper, node);
|
||||
var bounds = transform ? offsetBounds(wrapper) : 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 ClearTransform() {}
|
||||
|
||||
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);
|
||||
var descendantNonFloats = descendantElements.filter(not(isFloating));
|
||||
var nonInlineNonPositionedDescendants = descendantNonFloats.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 = descendantNonFloats.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(descendantNonFloats.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).
|
||||
negativeZindex.concat(nonInlineNonPositionedDescendants).concat(nonPositionedFloats)
|
||||
.concat(inFlow).concat(stackLevel0).concat(text).concat(positiveZindex).forEach(function(container) {
|
||||
this.renderQueue.push(container);
|
||||
if (isStackingContext(container)) {
|
||||
this.parse(container);
|
||||
this.renderQueue.push(new ClearTransform());
|
||||
}
|
||||
}, this);
|
||||
};
|
||||
|
||||
NodeParser.prototype.paint = function(container) {
|
||||
try {
|
||||
if (container instanceof ClearTransform) {
|
||||
this.renderer.ctx.restore();
|
||||
} else if (isTextNode(container)) {
|
||||
if (isPseudoElement(container.parent)) {
|
||||
container.parent.appendToDOM();
|
||||
}
|
||||
this.paintText(container);
|
||||
if (isPseudoElement(container.parent)) {
|
||||
container.parent.cleanDOM();
|
||||
}
|
||||
} else {
|
||||
this.paintNode(container);
|
||||
}
|
||||
} catch(e) {
|
||||
log(e);
|
||||
if (this.options.strict) {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
NodeParser.prototype.paintNode = function(container) {
|
||||
if (isStackingContext(container)) {
|
||||
this.renderer.setOpacity(container.opacity);
|
||||
this.renderer.ctx.save();
|
||||
if (container.hasTransform()) {
|
||||
this.renderer.setTransform(container.parseTransform());
|
||||
}
|
||||
}
|
||||
|
||||
if (container.node.nodeName === "INPUT" && container.node.type === "checkbox") {
|
||||
this.paintCheckbox(container);
|
||||
} else if (container.node.nodeName === "INPUT" && container.node.type === "radio") {
|
||||
this.paintRadio(container);
|
||||
} else {
|
||||
this.paintElement(container);
|
||||
}
|
||||
};
|
||||
|
||||
NodeParser.prototype.paintElement = function(container) {
|
||||
var bounds = container.parseBounds();
|
||||
this.renderer.clip(container.backgroundClip, function() {
|
||||
this.renderer.renderBackground(container, bounds, container.borders.borders.map(getWidth));
|
||||
}, this);
|
||||
|
||||
this.renderer.clip(container.clip, function() {
|
||||
this.renderer.renderBorders(container.borders.borders);
|
||||
}, this);
|
||||
|
||||
this.renderer.clip(container.backgroundClip, function() {
|
||||
switch (container.node.nodeName) {
|
||||
case "svg":
|
||||
case "IFRAME":
|
||||
var imgContainer = this.images.get(container.node);
|
||||
if (imgContainer) {
|
||||
this.renderer.renderImage(container, bounds, container.borders, imgContainer);
|
||||
} else {
|
||||
log("Error loading <" + container.node.nodeName + ">", container.node);
|
||||
}
|
||||
break;
|
||||
case "IMG":
|
||||
var imageContainer = this.images.get(container.node.src);
|
||||
if (imageContainer) {
|
||||
this.renderer.renderImage(container, bounds, container.borders, imageContainer);
|
||||
} else {
|
||||
log("Error loading <img>", container.node.src);
|
||||
}
|
||||
break;
|
||||
case "CANVAS":
|
||||
this.renderer.renderImage(container, bounds, container.borders, {image: container.node});
|
||||
break;
|
||||
case "SELECT":
|
||||
case "INPUT":
|
||||
case "TEXTAREA":
|
||||
this.paintFormValue(container);
|
||||
break;
|
||||
}
|
||||
}, this);
|
||||
};
|
||||
|
||||
NodeParser.prototype.paintCheckbox = function(container) {
|
||||
var b = container.parseBounds();
|
||||
|
||||
var size = Math.min(b.width, b.height);
|
||||
var bounds = {width: size - 1, height: size - 1, top: b.top, left: b.left};
|
||||
var r = [3, 3];
|
||||
var radius = [r, r, r, r];
|
||||
var borders = [1,1,1,1].map(function(w) {
|
||||
return {color: new Color('#A5A5A5'), width: w};
|
||||
});
|
||||
|
||||
var borderPoints = calculateCurvePoints(bounds, radius, borders);
|
||||
|
||||
this.renderer.clip(container.backgroundClip, function() {
|
||||
this.renderer.rectangle(bounds.left + 1, bounds.top + 1, bounds.width - 2, bounds.height - 2, new Color("#DEDEDE"));
|
||||
this.renderer.renderBorders(calculateBorders(borders, bounds, borderPoints, radius));
|
||||
if (container.node.checked) {
|
||||
this.renderer.font(new Color('#424242'), 'normal', 'normal', 'bold', (size - 3) + "px", 'arial');
|
||||
this.renderer.text("\u2714", bounds.left + size / 6, bounds.top + size - 1);
|
||||
}
|
||||
}, this);
|
||||
};
|
||||
|
||||
NodeParser.prototype.paintRadio = function(container) {
|
||||
var bounds = container.parseBounds();
|
||||
|
||||
var size = Math.min(bounds.width, bounds.height) - 2;
|
||||
|
||||
this.renderer.clip(container.backgroundClip, function() {
|
||||
this.renderer.circleStroke(bounds.left + 1, bounds.top + 1, size, new Color('#DEDEDE'), 1, new Color('#A5A5A5'));
|
||||
if (container.node.checked) {
|
||||
this.renderer.circle(Math.ceil(bounds.left + size / 4) + 1, Math.ceil(bounds.top + size / 4) + 1, Math.floor(size / 2), new Color('#424242'));
|
||||
}
|
||||
}, this);
|
||||
};
|
||||
|
||||
NodeParser.prototype.paintFormValue = function(container) {
|
||||
var value = container.getValue();
|
||||
if (value.length > 0) {
|
||||
var document = container.node.ownerDocument;
|
||||
var wrapper = document.createElement('html2canvaswrapper');
|
||||
var properties = ['lineHeight', 'textAlign', 'fontFamily', 'fontWeight', 'fontSize', 'color',
|
||||
'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom',
|
||||
'width', 'height', 'borderLeftStyle', 'borderTopStyle', 'borderLeftWidth', 'borderTopWidth',
|
||||
'boxSizing', 'whiteSpace', 'wordWrap'];
|
||||
|
||||
properties.forEach(function(property) {
|
||||
try {
|
||||
wrapper.style[property] = container.css(property);
|
||||
} catch(e) {
|
||||
// Older IE has issues with "border"
|
||||
log("html2canvas: Parse: Exception caught in renderFormValue: " + e.message);
|
||||
}
|
||||
});
|
||||
var bounds = container.parseBounds();
|
||||
wrapper.style.position = "fixed";
|
||||
wrapper.style.left = bounds.left + "px";
|
||||
wrapper.style.top = bounds.top + "px";
|
||||
wrapper.textContent = value;
|
||||
document.body.appendChild(wrapper);
|
||||
this.paintText(new TextContainer(wrapper.firstChild, container));
|
||||
document.body.removeChild(wrapper);
|
||||
}
|
||||
};
|
||||
|
||||
NodeParser.prototype.paintText = function(container) {
|
||||
container.applyTextTransform();
|
||||
var characters = punycode.ucs2.decode(container.node.data);
|
||||
var textList = (!this.options.letterRendering || noLetterSpacing(container)) && !hasUnicode(container.node.data) ? getWords(characters) : characters.map(function(character) {
|
||||
return punycode.ucs2.encode([character]);
|
||||
});
|
||||
|
||||
var weight = container.parent.fontWeight();
|
||||
var size = container.parent.css('fontSize');
|
||||
var family = container.parent.css('fontFamily');
|
||||
var shadows = container.parent.parseTextShadows();
|
||||
|
||||
this.renderer.font(container.parent.color('color'), container.parent.css('fontStyle'), container.parent.css('fontVariant'), weight, size, family);
|
||||
if (shadows.length) {
|
||||
// TODO: support multiple text shadows
|
||||
this.renderer.fontShadow(shadows[0].color, shadows[0].offsetX, shadows[0].offsetY, shadows[0].blur);
|
||||
} else {
|
||||
this.renderer.clearShadow();
|
||||
}
|
||||
|
||||
this.renderer.clip(container.parent.clip, function() {
|
||||
textList.map(this.parseTextBounds(container), this).forEach(function(bounds, index) {
|
||||
if (bounds) {
|
||||
this.renderer.text(textList[index], bounds.left, bounds.bottom);
|
||||
this.renderTextDecoration(container.parent, bounds, this.fontMetrics.getMetrics(family, size));
|
||||
}
|
||||
}, this);
|
||||
}, this);
|
||||
};
|
||||
|
||||
NodeParser.prototype.renderTextDecoration = function(container, bounds, metrics) {
|
||||
switch(container.css("textDecoration").split(" ")[0]) {
|
||||
case "underline":
|
||||
// Draws a line at the baseline of the font
|
||||
// TODO As some browsers display the line as more than 1px if the font-size is big, need to take that into account both in position and size
|
||||
this.renderer.rectangle(bounds.left, Math.round(bounds.top + metrics.baseline + metrics.lineWidth), bounds.width, 1, container.color("color"));
|
||||
break;
|
||||
case "overline":
|
||||
this.renderer.rectangle(bounds.left, Math.round(bounds.top), bounds.width, 1, container.color("color"));
|
||||
break;
|
||||
case "line-through":
|
||||
// TODO try and find exact position for line-through
|
||||
this.renderer.rectangle(bounds.left, Math.ceil(bounds.top + metrics.middle + metrics.lineWidth), bounds.width, 1, container.color("color"));
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
var borderColorTransforms = {
|
||||
inset: [
|
||||
["darken", 0.60],
|
||||
["darken", 0.10],
|
||||
["darken", 0.10],
|
||||
["darken", 0.60]
|
||||
]
|
||||
};
|
||||
|
||||
NodeParser.prototype.parseBorders = function(container) {
|
||||
var nodeBounds = container.parseBounds();
|
||||
var radius = getBorderRadiusData(container);
|
||||
var borders = ["Top", "Right", "Bottom", "Left"].map(function(side, index) {
|
||||
var style = container.css('border' + side + 'Style');
|
||||
var color = container.color('border' + side + 'Color');
|
||||
if (style === "inset" && color.isBlack()) {
|
||||
color = new Color([255, 255, 255, color.a]); // this is wrong, but
|
||||
}
|
||||
var colorTransform = borderColorTransforms[style] ? borderColorTransforms[style][index] : null;
|
||||
return {
|
||||
width: container.cssInt('border' + side + 'Width'),
|
||||
color: colorTransform ? color[colorTransform[0]](colorTransform[1]) : color,
|
||||
args: null
|
||||
};
|
||||
});
|
||||
var borderPoints = calculateCurvePoints(nodeBounds, radius, borders);
|
||||
|
||||
return {
|
||||
clip: this.parseBackgroundClip(container, borderPoints, borders, radius, nodeBounds),
|
||||
borders: calculateBorders(borders, nodeBounds, borderPoints, radius)
|
||||
};
|
||||
};
|
||||
|
||||
function calculateBorders(borders, nodeBounds, borderPoints, radius) {
|
||||
return 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 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] < width / 2 ? borderRadius[0][0] : width / 2,
|
||||
tlv = borderRadius[0][1] < height / 2 ? borderRadius[0][1] : height / 2,
|
||||
trh = borderRadius[1][0] < width / 2 ? borderRadius[1][0] : width / 2,
|
||||
trv = borderRadius[1][1] < height / 2 ? borderRadius[1][1] : height / 2,
|
||||
brh = borderRadius[2][0] < width / 2 ? borderRadius[2][0] : width / 2,
|
||||
brv = borderRadius[2][1] < height / 2 ? borderRadius[2][1] : height / 2,
|
||||
blh = borderRadius[3][0] < width / 2 ? borderRadius[3][0] : width / 2,
|
||||
blv = borderRadius[3][1] < height / 2 ? borderRadius[3][1] : height / 2;
|
||||
|
||||
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), 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), 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 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 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")));
|
||||
}
|
||||
|
||||
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 renderableNode(node) {
|
||||
return (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE);
|
||||
}
|
||||
|
||||
function isPositionedForStacking(container) {
|
||||
var position = container.css("position");
|
||||
var zIndex = (["absolute", "relative", "fixed"].indexOf(position) !== -1) ? container.css("zIndex") : "auto";
|
||||
return zIndex !== "auto";
|
||||
}
|
||||
|
||||
function isPositioned(container) {
|
||||
return container.css("position") !== "static";
|
||||
}
|
||||
|
||||
function isFloating(container) {
|
||||
return container.css("float") !== "none";
|
||||
}
|
||||
|
||||
function isInlineBlock(container) {
|
||||
return ["inline-block", "inline-table"].indexOf(container.css("display")) !== -1;
|
||||
}
|
||||
|
||||
function not(callback) {
|
||||
var context = this;
|
||||
return function() {
|
||||
return !callback.apply(context, arguments);
|
||||
};
|
||||
}
|
||||
|
||||
function isElement(container) {
|
||||
return container.node.nodeType === Node.ELEMENT_NODE;
|
||||
}
|
||||
|
||||
function isPseudoElement(container) {
|
||||
return container.isPseudoElement === true;
|
||||
}
|
||||
|
||||
function isTextNode(container) {
|
||||
return container.node.nodeType === Node.TEXT_NODE;
|
||||
}
|
||||
|
||||
function zIndexSort(contexts) {
|
||||
return function(a, b) {
|
||||
return (a.cssInt("zIndex") + (contexts.indexOf(a) / contexts.length)) - (b.cssInt("zIndex") + (contexts.indexOf(b) / contexts.length));
|
||||
};
|
||||
}
|
||||
|
||||
function hasOpacity(container) {
|
||||
return container.getOpacity() < 1;
|
||||
}
|
||||
|
||||
function asInt(value) {
|
||||
return parseInt(value, 10);
|
||||
}
|
||||
|
||||
function getWidth(border) {
|
||||
return border.width;
|
||||
}
|
||||
|
||||
function nonIgnoredElement(nodeContainer) {
|
||||
return (nodeContainer.node.nodeType !== Node.ELEMENT_NODE || ["SCRIPT", "HEAD", "TITLE", "OBJECT", "BR", "OPTION"].indexOf(nodeContainer.node.nodeName) === -1);
|
||||
}
|
||||
|
||||
function flatten(arrays) {
|
||||
return [].concat.apply([], arrays);
|
||||
}
|
||||
|
||||
function stripQuotes(content) {
|
||||
var first = content.substr(0, 1);
|
||||
return (first === content.substr(content.length - 1) && first.match(/'|"/)) ? content.substr(1, content.length - 2) : content;
|
||||
}
|
||||
|
||||
function getWords(characters) {
|
||||
var words = [], i = 0, onWordBoundary = false, word;
|
||||
while(characters.length) {
|
||||
if (isWordBoundary(characters[i]) === onWordBoundary) {
|
||||
word = characters.splice(0, i);
|
||||
if (word.length) {
|
||||
words.push(punycode.ucs2.encode(word));
|
||||
}
|
||||
onWordBoundary =! onWordBoundary;
|
||||
i = 0;
|
||||
} else {
|
||||
i++;
|
||||
}
|
||||
|
||||
if (i >= characters.length) {
|
||||
word = characters.splice(0, i);
|
||||
if (word.length) {
|
||||
words.push(punycode.ucs2.encode(word));
|
||||
}
|
||||
}
|
||||
}
|
||||
return words;
|
||||
}
|
||||
|
||||
function isWordBoundary(characterCode) {
|
||||
return [
|
||||
32, // <space>
|
||||
13, // \r
|
||||
10, // \n
|
||||
9, // \t
|
||||
45 // -
|
||||
].indexOf(characterCode) !== -1;
|
||||
}
|
||||
|
||||
function hasUnicode(string) {
|
||||
return (/[^\u0000-\u00ff]/).test(string);
|
||||
}
|
||||
|
||||
module.exports = NodeParser;
|
||||
88
src/plugins/jquery.plugin.html2canvas.js
Normal file
88
src/plugins/jquery.plugin.html2canvas.js
Normal file
@ -0,0 +1,88 @@
|
||||
|
||||
/*
|
||||
* jQuery helper plugin for examples and tests
|
||||
*/
|
||||
|
||||
(function( $ ){
|
||||
$.fn.html2canvas = function(options) {
|
||||
|
||||
var date = new Date();
|
||||
var message,
|
||||
timeoutTimer,
|
||||
timer = date.getTime();
|
||||
|
||||
var object = $.extend({},{
|
||||
logging: false,
|
||||
proxyUrl: "http://html2canvas.appspot.com/", // running html2canvas-python proxy
|
||||
ready: function(renderer) {
|
||||
|
||||
var finishTime = new Date();
|
||||
// console.log((finishTime.getTime()-timer)/1000);
|
||||
|
||||
|
||||
document.body.appendChild(renderer.canvas);
|
||||
|
||||
|
||||
|
||||
var canvas = $(renderer.canvas);
|
||||
canvas.css('position','absolute')
|
||||
.css('left',0).css('top',0);
|
||||
|
||||
|
||||
|
||||
// $('body').append(canvas);
|
||||
$(canvas).siblings().toggle();
|
||||
|
||||
throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)/1000) + " seconds<br />Total of "+renderer.numDraws+" draws performed",4000);
|
||||
|
||||
|
||||
$(window).click(function(){
|
||||
if (!canvas.is(':visible')){
|
||||
$(canvas).toggle().siblings().toggle();
|
||||
throwMessage("Canvas Render visible");
|
||||
} else{
|
||||
$(canvas).siblings().toggle();
|
||||
$(canvas).toggle();
|
||||
throwMessage("Canvas Render hidden");
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
},options)
|
||||
|
||||
new html2canvas(this.get(0), object);
|
||||
|
||||
|
||||
function throwMessage(msg,duration){
|
||||
|
||||
window.clearTimeout(timeoutTimer);
|
||||
timeoutTimer = window.setTimeout(function(){
|
||||
message.fadeOut(function(){
|
||||
message.remove();
|
||||
});
|
||||
},duration || 2000);
|
||||
$(message).remove();
|
||||
message = $('<div />').html(msg).css({
|
||||
margin:0,
|
||||
padding:10,
|
||||
background: "#000",
|
||||
opacity:0.7,
|
||||
position:"fixed",
|
||||
top:10,
|
||||
right:10,
|
||||
fontFamily: 'Tahoma' ,
|
||||
color:'#fff',
|
||||
fontSize:12,
|
||||
borderRadius:12,
|
||||
width:'auto',
|
||||
height:'auto',
|
||||
textAlign:'center',
|
||||
textDecoration:'none'
|
||||
}).hide().fadeIn().appendTo('body');
|
||||
}
|
||||
|
||||
};
|
||||
})( jQuery );
|
||||
|
||||
95
src/proxy.js
95
src/proxy.js
@ -1,95 +0,0 @@
|
||||
var XHR = require('./xhr');
|
||||
var utils = require('./utils');
|
||||
var log = require('./log');
|
||||
var createWindowClone = require('./clone');
|
||||
var decode64 = utils.decode64;
|
||||
|
||||
function Proxy(src, proxyUrl, document) {
|
||||
var supportsCORS = ('withCredentials' in new XMLHttpRequest());
|
||||
if (!proxyUrl) {
|
||||
return Promise.reject("No proxy configured");
|
||||
}
|
||||
var callback = createCallback(supportsCORS);
|
||||
var url = createProxyUrl(proxyUrl, src, callback);
|
||||
|
||||
return supportsCORS ? XHR(url) : (jsonp(document, url, callback).then(function(response) {
|
||||
return decode64(response.content);
|
||||
}));
|
||||
}
|
||||
var proxyCount = 0;
|
||||
|
||||
function ProxyURL(src, proxyUrl, document) {
|
||||
var supportsCORSImage = ('crossOrigin' in new Image());
|
||||
var callback = createCallback(supportsCORSImage);
|
||||
var url = createProxyUrl(proxyUrl, src, callback);
|
||||
return (supportsCORSImage ? Promise.resolve(url) : jsonp(document, url, callback).then(function(response) {
|
||||
return "data:" + response.type + ";base64," + response.content;
|
||||
}));
|
||||
}
|
||||
|
||||
function jsonp(document, url, callback) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
var s = document.createElement("script");
|
||||
var cleanup = function() {
|
||||
delete window.html2canvas.proxy[callback];
|
||||
document.body.removeChild(s);
|
||||
};
|
||||
window.html2canvas.proxy[callback] = function(response) {
|
||||
cleanup();
|
||||
resolve(response);
|
||||
};
|
||||
s.src = url;
|
||||
s.onerror = function(e) {
|
||||
cleanup();
|
||||
reject(e);
|
||||
};
|
||||
document.body.appendChild(s);
|
||||
});
|
||||
}
|
||||
|
||||
function createCallback(useCORS) {
|
||||
return !useCORS ? "html2canvas_" + Date.now() + "_" + (++proxyCount) + "_" + Math.round(Math.random() * 100000) : "";
|
||||
}
|
||||
|
||||
function createProxyUrl(proxyUrl, src, callback) {
|
||||
return proxyUrl + "?url=" + encodeURIComponent(src) + (callback.length ? "&callback=html2canvas.proxy." + callback : "");
|
||||
}
|
||||
|
||||
function documentFromHTML(src) {
|
||||
return function(html) {
|
||||
var parser = new DOMParser(), doc;
|
||||
try {
|
||||
doc = parser.parseFromString(html, "text/html");
|
||||
} catch(e) {
|
||||
log("DOMParser not supported, falling back to createHTMLDocument");
|
||||
doc = document.implementation.createHTMLDocument("");
|
||||
try {
|
||||
doc.open();
|
||||
doc.write(html);
|
||||
doc.close();
|
||||
} catch(ee) {
|
||||
log("createHTMLDocument write not supported, falling back to document.body.innerHTML");
|
||||
doc.body.innerHTML = html; // ie9 doesnt support writing to documentElement
|
||||
}
|
||||
}
|
||||
|
||||
var b = doc.querySelector("base");
|
||||
if (!b || !b.href.host) {
|
||||
var base = doc.createElement("base");
|
||||
base.href = src;
|
||||
doc.head.insertBefore(base, doc.head.firstChild);
|
||||
}
|
||||
|
||||
return doc;
|
||||
};
|
||||
}
|
||||
|
||||
function loadUrlDocument(src, proxy, document, width, height, options) {
|
||||
return new Proxy(src, proxy, window.document).then(documentFromHTML(src)).then(function(doc) {
|
||||
return createWindowClone(doc, document, width, height, options, 0, 0);
|
||||
});
|
||||
}
|
||||
|
||||
exports.Proxy = Proxy;
|
||||
exports.ProxyURL = ProxyURL;
|
||||
exports.loadUrlDocument = loadUrlDocument;
|
||||
@ -1,21 +0,0 @@
|
||||
var ProxyURL = require('./proxy').ProxyURL;
|
||||
|
||||
function ProxyImageContainer(src, proxy) {
|
||||
var link = document.createElement("a");
|
||||
link.href = src;
|
||||
src = link.href;
|
||||
this.src = src;
|
||||
this.image = new Image();
|
||||
var self = this;
|
||||
this.promise = new Promise(function(resolve, reject) {
|
||||
self.image.crossOrigin = "Anonymous";
|
||||
self.image.onload = resolve;
|
||||
self.image.onerror = reject;
|
||||
|
||||
new ProxyURL(src, proxy, document).then(function(url) {
|
||||
self.image.src = url;
|
||||
})['catch'](reject);
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = ProxyImageContainer;
|
||||
@ -1,38 +0,0 @@
|
||||
var NodeContainer = require('./nodecontainer');
|
||||
|
||||
function PseudoElementContainer(node, parent, type) {
|
||||
NodeContainer.call(this, node, parent);
|
||||
this.isPseudoElement = true;
|
||||
this.before = type === ":before";
|
||||
}
|
||||
|
||||
PseudoElementContainer.prototype.cloneTo = function(stack) {
|
||||
PseudoElementContainer.prototype.cloneTo.call(this, stack);
|
||||
stack.isPseudoElement = true;
|
||||
stack.before = this.before;
|
||||
};
|
||||
|
||||
PseudoElementContainer.prototype = Object.create(NodeContainer.prototype);
|
||||
|
||||
PseudoElementContainer.prototype.appendToDOM = function() {
|
||||
if (this.before) {
|
||||
this.parent.node.insertBefore(this.node, this.parent.node.firstChild);
|
||||
} else {
|
||||
this.parent.node.appendChild(this.node);
|
||||
}
|
||||
this.parent.node.className += " " + this.getHideClass();
|
||||
};
|
||||
|
||||
PseudoElementContainer.prototype.cleanDOM = function() {
|
||||
this.node.parentNode.removeChild(this.node);
|
||||
this.parent.node.className = this.parent.node.className.replace(this.getHideClass(), "");
|
||||
};
|
||||
|
||||
PseudoElementContainer.prototype.getHideClass = function() {
|
||||
return this["PSEUDO_HIDE_ELEMENT_CLASS_" + (this.before ? "BEFORE" : "AFTER")];
|
||||
};
|
||||
|
||||
PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_BEFORE = "___html2canvas___pseudoelement_before";
|
||||
PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_AFTER = "___html2canvas___pseudoelement_after";
|
||||
|
||||
module.exports = PseudoElementContainer;
|
||||
108
src/renderer.js
108
src/renderer.js
@ -1,108 +0,0 @@
|
||||
var log = require('./log');
|
||||
|
||||
function Renderer(width, height, images, options, document) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.images = images;
|
||||
this.options = options;
|
||||
this.document = document;
|
||||
}
|
||||
|
||||
Renderer.prototype.renderImage = function(container, bounds, borderData, imageContainer) {
|
||||
var paddingLeft = container.cssInt('paddingLeft'),
|
||||
paddingTop = container.cssInt('paddingTop'),
|
||||
paddingRight = container.cssInt('paddingRight'),
|
||||
paddingBottom = container.cssInt('paddingBottom'),
|
||||
borders = borderData.borders;
|
||||
|
||||
var width = bounds.width - (borders[1].width + borders[3].width + paddingLeft + paddingRight);
|
||||
var height = bounds.height - (borders[0].width + borders[2].width + paddingTop + paddingBottom);
|
||||
this.drawImage(
|
||||
imageContainer,
|
||||
0,
|
||||
0,
|
||||
imageContainer.image.width || width,
|
||||
imageContainer.image.height || height,
|
||||
bounds.left + paddingLeft + borders[3].width,
|
||||
bounds.top + paddingTop + borders[0].width,
|
||||
width,
|
||||
height
|
||||
);
|
||||
};
|
||||
|
||||
Renderer.prototype.renderBackground = function(container, bounds, borderData) {
|
||||
if (bounds.height > 0 && bounds.width > 0) {
|
||||
this.renderBackgroundColor(container, bounds);
|
||||
this.renderBackgroundImage(container, bounds, borderData);
|
||||
}
|
||||
};
|
||||
|
||||
Renderer.prototype.renderBackgroundColor = function(container, bounds) {
|
||||
var color = container.color("backgroundColor");
|
||||
if (!color.isTransparent()) {
|
||||
this.rectangle(bounds.left, bounds.top, bounds.width, bounds.height, color);
|
||||
}
|
||||
};
|
||||
|
||||
Renderer.prototype.renderBorders = function(borders) {
|
||||
borders.forEach(this.renderBorder, this);
|
||||
};
|
||||
|
||||
Renderer.prototype.renderBorder = function(data) {
|
||||
if (!data.color.isTransparent() && data.args !== null) {
|
||||
this.drawShape(data.args, data.color);
|
||||
}
|
||||
};
|
||||
|
||||
Renderer.prototype.renderBackgroundImage = function(container, bounds, borderData) {
|
||||
var backgroundImages = container.parseBackgroundImages();
|
||||
backgroundImages.reverse().forEach(function(backgroundImage, index, arr) {
|
||||
switch(backgroundImage.method) {
|
||||
case "url":
|
||||
var image = this.images.get(backgroundImage.args[0]);
|
||||
if (image) {
|
||||
this.renderBackgroundRepeating(container, bounds, image, arr.length - (index+1), borderData);
|
||||
} else {
|
||||
log("Error loading background-image", backgroundImage.args[0]);
|
||||
}
|
||||
break;
|
||||
case "linear-gradient":
|
||||
case "gradient":
|
||||
var gradientImage = this.images.get(backgroundImage.value);
|
||||
if (gradientImage) {
|
||||
this.renderBackgroundGradient(gradientImage, bounds, borderData);
|
||||
} else {
|
||||
log("Error loading background-image", backgroundImage.args[0]);
|
||||
}
|
||||
break;
|
||||
case "none":
|
||||
break;
|
||||
default:
|
||||
log("Unknown background-image type", backgroundImage.args[0]);
|
||||
}
|
||||
}, this);
|
||||
};
|
||||
|
||||
Renderer.prototype.renderBackgroundRepeating = function(container, bounds, imageContainer, index, borderData) {
|
||||
var size = container.parseBackgroundSize(bounds, imageContainer.image, index);
|
||||
var position = container.parseBackgroundPosition(bounds, imageContainer.image, index, size);
|
||||
var repeat = container.parseBackgroundRepeat(index);
|
||||
switch (repeat) {
|
||||
case "repeat-x":
|
||||
case "repeat no-repeat":
|
||||
this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + borderData[3], bounds.top + position.top + borderData[0], 99999, size.height, borderData);
|
||||
break;
|
||||
case "repeat-y":
|
||||
case "no-repeat repeat":
|
||||
this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + borderData[0], size.width, 99999, borderData);
|
||||
break;
|
||||
case "no-repeat":
|
||||
this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + position.top + borderData[0], size.width, size.height, borderData);
|
||||
break;
|
||||
default:
|
||||
this.renderBackgroundRepeat(imageContainer, position, size, {top: bounds.top, left: bounds.left}, borderData[3], borderData[0]);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = Renderer;
|
||||
@ -1,181 +0,0 @@
|
||||
var Renderer = require('../renderer');
|
||||
var LinearGradientContainer = require('../lineargradientcontainer');
|
||||
var log = require('../log');
|
||||
|
||||
function CanvasRenderer(width, height) {
|
||||
Renderer.apply(this, arguments);
|
||||
this.canvas = this.options.canvas || this.document.createElement("canvas");
|
||||
if (!this.options.canvas) {
|
||||
this.canvas.width = width;
|
||||
this.canvas.height = height;
|
||||
}
|
||||
this.ctx = this.canvas.getContext("2d");
|
||||
this.taintCtx = this.document.createElement("canvas").getContext("2d");
|
||||
this.ctx.textBaseline = "bottom";
|
||||
this.variables = {};
|
||||
log("Initialized CanvasRenderer with size", width, "x", height);
|
||||
}
|
||||
|
||||
CanvasRenderer.prototype = Object.create(Renderer.prototype);
|
||||
|
||||
CanvasRenderer.prototype.setFillStyle = function(fillStyle) {
|
||||
this.ctx.fillStyle = typeof(fillStyle) === "object" && !!fillStyle.isColor ? fillStyle.toString() : fillStyle;
|
||||
return this.ctx;
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.rectangle = function(left, top, width, height, color) {
|
||||
this.setFillStyle(color).fillRect(left, top, width, height);
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.circle = function(left, top, size, color) {
|
||||
this.setFillStyle(color);
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(left + size / 2, top + size / 2, size / 2, 0, Math.PI*2, true);
|
||||
this.ctx.closePath();
|
||||
this.ctx.fill();
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.circleStroke = function(left, top, size, color, stroke, strokeColor) {
|
||||
this.circle(left, top, size, color);
|
||||
this.ctx.strokeStyle = strokeColor.toString();
|
||||
this.ctx.stroke();
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.drawShape = function(shape, color) {
|
||||
this.shape(shape);
|
||||
this.setFillStyle(color).fill();
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.taints = function(imageContainer) {
|
||||
if (imageContainer.tainted === null) {
|
||||
this.taintCtx.drawImage(imageContainer.image, 0, 0);
|
||||
try {
|
||||
this.taintCtx.getImageData(0, 0, 1, 1);
|
||||
imageContainer.tainted = false;
|
||||
} catch(e) {
|
||||
this.taintCtx = document.createElement("canvas").getContext("2d");
|
||||
imageContainer.tainted = true;
|
||||
}
|
||||
}
|
||||
|
||||
return imageContainer.tainted;
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.drawImage = function(imageContainer, sx, sy, sw, sh, dx, dy, dw, dh) {
|
||||
if (!this.taints(imageContainer) || this.options.allowTaint) {
|
||||
this.ctx.drawImage(imageContainer.image, sx, sy, sw, sh, dx, dy, dw, dh);
|
||||
}
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.clip = function(shapes, callback, context) {
|
||||
this.ctx.save();
|
||||
shapes.filter(hasEntries).forEach(function(shape) {
|
||||
this.shape(shape).clip();
|
||||
}, this);
|
||||
callback.call(context);
|
||||
this.ctx.restore();
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.shape = function(shape) {
|
||||
this.ctx.beginPath();
|
||||
shape.forEach(function(point, index) {
|
||||
if (point[0] === "rect") {
|
||||
this.ctx.rect.apply(this.ctx, point.slice(1));
|
||||
} else {
|
||||
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(" ").split(",")[0];
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.fontShadow = function(color, offsetX, offsetY, blur) {
|
||||
this.setVariable("shadowColor", color.toString())
|
||||
.setVariable("shadowOffsetY", offsetX)
|
||||
.setVariable("shadowOffsetX", offsetY)
|
||||
.setVariable("shadowBlur", blur);
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.clearShadow = function() {
|
||||
this.setVariable("shadowColor", "rgba(0,0,0,0)");
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.setOpacity = function(opacity) {
|
||||
this.ctx.globalAlpha = opacity;
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.setTransform = function(transform) {
|
||||
this.ctx.translate(transform.origin[0], transform.origin[1]);
|
||||
this.ctx.transform.apply(this.ctx, transform.matrix);
|
||||
this.ctx.translate(-transform.origin[0], -transform.origin[1]);
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.setVariable = function(property, value) {
|
||||
if (this.variables[property] !== value) {
|
||||
this.variables[property] = this.ctx[property] = value;
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.text = function(text, left, bottom) {
|
||||
this.ctx.fillText(text, left, bottom);
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.backgroundRepeatShape = function(imageContainer, backgroundPosition, size, bounds, left, top, width, height, borderData) {
|
||||
var shape = [
|
||||
["line", Math.round(left), Math.round(top)],
|
||||
["line", Math.round(left + width), Math.round(top)],
|
||||
["line", Math.round(left + width), Math.round(height + top)],
|
||||
["line", Math.round(left), Math.round(height + top)]
|
||||
];
|
||||
this.clip([shape], function() {
|
||||
this.renderBackgroundRepeat(imageContainer, backgroundPosition, size, bounds, borderData[3], borderData[0]);
|
||||
}, this);
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.renderBackgroundRepeat = function(imageContainer, backgroundPosition, size, bounds, borderLeft, borderTop) {
|
||||
var offsetX = Math.round(bounds.left + backgroundPosition.left + borderLeft), offsetY = Math.round(bounds.top + backgroundPosition.top + borderTop);
|
||||
this.setFillStyle(this.ctx.createPattern(this.resizeImage(imageContainer, size), "repeat"));
|
||||
this.ctx.translate(offsetX, offsetY);
|
||||
this.ctx.fill();
|
||||
this.ctx.translate(-offsetX, -offsetY);
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.renderBackgroundGradient = function(gradientImage, bounds) {
|
||||
if (gradientImage instanceof LinearGradientContainer) {
|
||||
var gradient = this.ctx.createLinearGradient(
|
||||
bounds.left + bounds.width * gradientImage.x0,
|
||||
bounds.top + bounds.height * gradientImage.y0,
|
||||
bounds.left + bounds.width * gradientImage.x1,
|
||||
bounds.top + bounds.height * gradientImage.y1);
|
||||
gradientImage.colorStops.forEach(function(colorStop) {
|
||||
gradient.addColorStop(colorStop.stop, colorStop.color.toString());
|
||||
});
|
||||
this.rectangle(bounds.left, bounds.top, bounds.width, bounds.height, gradient);
|
||||
}
|
||||
};
|
||||
|
||||
CanvasRenderer.prototype.resizeImage = function(imageContainer, size) {
|
||||
var image = imageContainer.image;
|
||||
if(image.width === size.width && image.height === size.height) {
|
||||
return image;
|
||||
}
|
||||
|
||||
var ctx, canvas = document.createElement('canvas');
|
||||
canvas.width = size.width;
|
||||
canvas.height = size.height;
|
||||
ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, size.width, size.height );
|
||||
return canvas;
|
||||
};
|
||||
|
||||
function hasEntries(array) {
|
||||
return array.length > 0;
|
||||
}
|
||||
|
||||
module.exports = CanvasRenderer;
|
||||
@ -1,18 +0,0 @@
|
||||
var NodeContainer = require('./nodecontainer');
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
module.exports = StackingContext;
|
||||
@ -1,51 +0,0 @@
|
||||
function Support(document) {
|
||||
this.rangeBounds = this.testRangeBounds(document);
|
||||
this.cors = this.testCORS();
|
||||
this.svg = this.testSVG();
|
||||
}
|
||||
|
||||
Support.prototype.testRangeBounds = function(document) {
|
||||
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;
|
||||
};
|
||||
|
||||
Support.prototype.testCORS = function() {
|
||||
return typeof((new Image()).crossOrigin) !== "undefined";
|
||||
};
|
||||
|
||||
Support.prototype.testSVG = function() {
|
||||
var img = new Image();
|
||||
var canvas = document.createElement("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
img.src = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>";
|
||||
|
||||
try {
|
||||
ctx.drawImage(img, 0, 0);
|
||||
canvas.toDataURL();
|
||||
} catch(e) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
module.exports = Support;
|
||||
@ -1,52 +0,0 @@
|
||||
var XHR = require('./xhr');
|
||||
var decode64 = require('./utils').decode64;
|
||||
|
||||
function SVGContainer(src) {
|
||||
this.src = src;
|
||||
this.image = null;
|
||||
var self = this;
|
||||
|
||||
this.promise = this.hasFabric().then(function() {
|
||||
return (self.isInline(src) ? Promise.resolve(self.inlineFormatting(src)) : XHR(src));
|
||||
}).then(function(svg) {
|
||||
return new Promise(function(resolve) {
|
||||
window.html2canvas.svg.fabric.loadSVGFromString(svg, self.createCanvas.call(self, resolve));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
SVGContainer.prototype.hasFabric = function() {
|
||||
return !window.html2canvas.svg || !window.html2canvas.svg.fabric ? Promise.reject(new Error("html2canvas.svg.js is not loaded, cannot render svg")) : Promise.resolve();
|
||||
};
|
||||
|
||||
SVGContainer.prototype.inlineFormatting = function(src) {
|
||||
return (/^data:image\/svg\+xml;base64,/.test(src)) ? this.decode64(this.removeContentType(src)) : this.removeContentType(src);
|
||||
};
|
||||
|
||||
SVGContainer.prototype.removeContentType = function(src) {
|
||||
return src.replace(/^data:image\/svg\+xml(;base64)?,/,'');
|
||||
};
|
||||
|
||||
SVGContainer.prototype.isInline = function(src) {
|
||||
return (/^data:image\/svg\+xml/i.test(src));
|
||||
};
|
||||
|
||||
SVGContainer.prototype.createCanvas = function(resolve) {
|
||||
var self = this;
|
||||
return function (objects, options) {
|
||||
var canvas = new window.html2canvas.svg.fabric.StaticCanvas('c');
|
||||
self.image = canvas.lowerCanvasEl;
|
||||
canvas
|
||||
.setWidth(options.width)
|
||||
.setHeight(options.height)
|
||||
.add(window.html2canvas.svg.fabric.util.groupSVGElements(objects, options))
|
||||
.renderAll();
|
||||
resolve(canvas.lowerCanvasEl);
|
||||
};
|
||||
};
|
||||
|
||||
SVGContainer.prototype.decode64 = function(str) {
|
||||
return (typeof(window.atob) === "function") ? window.atob(str) : decode64(str);
|
||||
};
|
||||
|
||||
module.exports = SVGContainer;
|
||||
@ -1,25 +0,0 @@
|
||||
var SVGContainer = require('./svgcontainer');
|
||||
|
||||
function SVGNodeContainer(node, _native) {
|
||||
this.src = node;
|
||||
this.image = null;
|
||||
var self = this;
|
||||
|
||||
this.promise = _native ? new Promise(function(resolve, reject) {
|
||||
self.image = new Image();
|
||||
self.image.onload = resolve;
|
||||
self.image.onerror = reject;
|
||||
self.image.src = "data:image/svg+xml," + (new XMLSerializer()).serializeToString(node);
|
||||
if (self.image.complete === true) {
|
||||
resolve(self.image);
|
||||
}
|
||||
}) : this.hasFabric().then(function() {
|
||||
return new Promise(function(resolve) {
|
||||
window.html2canvas.svg.fabric.parseSVGDocument(node, self.createCanvas.call(self, resolve));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
SVGNodeContainer.prototype = Object.create(SVGContainer.prototype);
|
||||
|
||||
module.exports = SVGNodeContainer;
|
||||
@ -1,33 +0,0 @@
|
||||
var NodeContainer = require('./nodecontainer');
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = TextContainer;
|
||||
169
src/utils.js
169
src/utils.js
@ -1,169 +0,0 @@
|
||||
exports.smallImage = function smallImage() {
|
||||
return "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
|
||||
};
|
||||
|
||||
exports.bind = function(callback, context) {
|
||||
return function() {
|
||||
return callback.apply(context, arguments);
|
||||
};
|
||||
};
|
||||
|
||||
/*
|
||||
* base64-arraybuffer
|
||||
* https://github.com/niklasvh/base64-arraybuffer
|
||||
*
|
||||
* Copyright (c) 2012 Niklas von Hertzen
|
||||
* Licensed under the MIT license.
|
||||
*/
|
||||
|
||||
exports.decode64 = function(base64) {
|
||||
var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
|
||||
var len = base64.length, i, encoded1, encoded2, encoded3, encoded4, byte1, byte2, byte3;
|
||||
|
||||
var output = "";
|
||||
|
||||
for (i = 0; i < len; i+=4) {
|
||||
encoded1 = chars.indexOf(base64[i]);
|
||||
encoded2 = chars.indexOf(base64[i+1]);
|
||||
encoded3 = chars.indexOf(base64[i+2]);
|
||||
encoded4 = chars.indexOf(base64[i+3]);
|
||||
|
||||
byte1 = (encoded1 << 2) | (encoded2 >> 4);
|
||||
byte2 = ((encoded2 & 15) << 4) | (encoded3 >> 2);
|
||||
byte3 = ((encoded3 & 3) << 6) | encoded4;
|
||||
if (encoded3 === 64) {
|
||||
output += String.fromCharCode(byte1);
|
||||
} else if (encoded4 === 64 || encoded4 === -1) {
|
||||
output += String.fromCharCode(byte1, byte2);
|
||||
} else{
|
||||
output += String.fromCharCode(byte1, byte2, byte3);
|
||||
}
|
||||
}
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
exports.getBounds = function(node) {
|
||||
if (node.getBoundingClientRect) {
|
||||
var clientRect = node.getBoundingClientRect();
|
||||
var width = node.offsetWidth == null ? clientRect.width : node.offsetWidth;
|
||||
return {
|
||||
top: clientRect.top,
|
||||
bottom: clientRect.bottom || (clientRect.top + clientRect.height),
|
||||
right: clientRect.left + width,
|
||||
left: clientRect.left,
|
||||
width: width,
|
||||
height: node.offsetHeight == null ? clientRect.height : node.offsetHeight
|
||||
};
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
exports.offsetBounds = function(node) {
|
||||
var parent = node.offsetParent ? exports.offsetBounds(node.offsetParent) : {top: 0, left: 0};
|
||||
|
||||
return {
|
||||
top: node.offsetTop + parent.top,
|
||||
bottom: node.offsetTop + node.offsetHeight + parent.top,
|
||||
right: node.offsetLeft + parent.left + node.offsetWidth,
|
||||
left: node.offsetLeft + parent.left,
|
||||
width: node.offsetWidth,
|
||||
height: node.offsetHeight
|
||||
};
|
||||
};
|
||||
|
||||
exports.parseBackgrounds = function(backgroundImage) {
|
||||
var whitespace = ' \r\n\t',
|
||||
method, definition, prefix, prefix_i, block, results = [],
|
||||
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,
|
||||
image: null
|
||||
});
|
||||
}
|
||||
args = [];
|
||||
method = prefix = definition = block = '';
|
||||
};
|
||||
args = [];
|
||||
method = prefix = definition = block = '';
|
||||
backgroundImage.split("").forEach(function(c) {
|
||||
if (mode === 0 && whitespace.indexOf(c) > -1) {
|
||||
return;
|
||||
}
|
||||
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;
|
||||
return;
|
||||
} else {
|
||||
numParen++;
|
||||
}
|
||||
break;
|
||||
case ')':
|
||||
if (quote) {
|
||||
break;
|
||||
} else if(mode === 1) {
|
||||
if(numParen === 0) {
|
||||
mode = 0;
|
||||
block += c;
|
||||
appendResult();
|
||||
return;
|
||||
} else {
|
||||
numParen--;
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case ',':
|
||||
if (quote) {
|
||||
break;
|
||||
} else if(mode === 0) {
|
||||
appendResult();
|
||||
return;
|
||||
} else if (mode === 1) {
|
||||
if (numParen === 0 && !method.match(/^url$/i)) {
|
||||
args.push(definition);
|
||||
definition = '';
|
||||
block += c;
|
||||
return;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
block += c;
|
||||
if (mode === 0) {
|
||||
method += c;
|
||||
} else {
|
||||
definition += c;
|
||||
}
|
||||
});
|
||||
|
||||
appendResult();
|
||||
return results;
|
||||
};
|
||||
@ -1,10 +0,0 @@
|
||||
var GradientContainer = require('./gradientcontainer');
|
||||
|
||||
function WebkitGradientContainer(imageData) {
|
||||
GradientContainer.apply(this, arguments);
|
||||
this.type = (imageData.args[0] === "linear") ? this.TYPES.LINEAR : this.TYPES.RADIAL;
|
||||
}
|
||||
|
||||
WebkitGradientContainer.prototype = Object.create(GradientContainer.prototype);
|
||||
|
||||
module.exports = WebkitGradientContainer;
|
||||
22
src/xhr.js
22
src/xhr.js
@ -1,22 +0,0 @@
|
||||
function XHR(url) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url);
|
||||
|
||||
xhr.onload = function() {
|
||||
if (xhr.status === 200) {
|
||||
resolve(xhr.responseText);
|
||||
} else {
|
||||
reject(new Error(xhr.statusText));
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
reject(new Error("Network Error"));
|
||||
};
|
||||
|
||||
xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = XHR;
|
||||
@ -1,16 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>frame 1</title>
|
||||
<style>
|
||||
body {
|
||||
background: green;
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
this is the content of frame1
|
||||
</body>
|
||||
</html>
|
||||
@ -1,46 +0,0 @@
|
||||
<?xml version="1.0"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="252.89000pt" width="493.28000pt" version="1.0" y="0.00000000" x="0.00000000" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient id="lg0">
|
||||
<stop style="stop-color:#ff0000;stop-opacity:1.0000000" offset="0.00000000"/>
|
||||
<stop style="stop-color:#00ff00;stop-opacity:1.0000000" offset="0.50000000"/>
|
||||
<stop style="stop-color:#0000ff;stop-opacity:1.0000000" offset="1.0000000"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="lg1">
|
||||
<stop style="stop-color:#ff0000;stop-opacity:0.27450982" offset="0.00000000"/>
|
||||
<stop style="stop-color:#ff0000;stop-opacity:1.0000000" offset="1.0000000"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="rd0" fx="550.28571" fy="155.11731" xlink:href="#lg1" gradientUnits="userSpaceOnUse" cy="155.11731" cx="550.28571" gradientTransform="matrix(0.652228,-1.522906,1.403595,0.601129,-26.34767,869.2927)" r="127.00000"/>
|
||||
<radialGradient id="rd1" fx="492.85715" fy="379.50504" xlink:href="#lg3" gradientUnits="userSpaceOnUse" cy="379.50504" cx="492.85715" gradientTransform="matrix(0.944964,4.150569e-2,-4.340623e-2,0.988234,43.59757,-15.99113)" r="184.96443"/>
|
||||
<radialGradient id="rd2" fx="449.12918" fy="345.23175" xlink:href="#lg2" gradientUnits="userSpaceOnUse" cy="345.23175" cx="449.12918" gradientTransform="matrix(1.06455,-4.457048e-3,4.186833e-3,1.000012,-30.43703,1.997764)" r="184.96443"/>
|
||||
<linearGradient id="lg2">
|
||||
<stop style="stop-color:#fa4;stop-opacity:1" offset="0"/>
|
||||
<stop style="stop-color:#c3791f;stop-opacity:1" offset="0.5"/>
|
||||
<stop style="stop-color:#935000;stop-opacity:1" offset="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="lg3">
|
||||
<stop style="stop-color:black;stop-opacity:1" offset="0"/>
|
||||
<stop style="stop-color:black;stop-opacity:1" offset="0.5"/>
|
||||
<stop style="stop-color:black;stop-opacity:1" offset="0.75"/>
|
||||
<stop style="stop-color:black;stop-opacity:0.72164947" offset="0.875"/>
|
||||
<stop style="stop-color:black;stop-opacity:0.50515461" offset="0.9375"/>
|
||||
<stop style="stop-color:black;stop-opacity:0.3298969" offset="0.96875"/>
|
||||
<stop style="stop-color:black;stop-opacity:0" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M300 252.36218C300 307.59065 255.22847 352.36218 200 352.36218 144.77153 352.36218 100 307.59065 100 252.36218 100 197.13371 144.77153 152.36218 200 152.36218 255.22847 152.36218 300 197.13371 300 252.36218L300 252.36218z" style="fill:#00ffff;fill-opacity:0.49999997;fill-rule:evenodd;stroke:#00ffff;stroke-width:4.0000000;stroke-linecap:butt;stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000" transform="translate(-91.79890,-143.8324)"/>
|
||||
<path d="M500 252.36218C500 307.59065 455.22847 352.36218 400 352.36218 344.77153 352.36218 300 307.59065 300 252.36218 300 197.13371 344.77153 152.36218 400 152.36218 455.22847 152.36218 500 197.13371 500 252.36218L500 252.36218z" style="fill:#ffff00;fill-opacity:0.49999997;fill-rule:evenodd;stroke:#ffff00;stroke-width:4.0000000;stroke-linecap:butt;stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000" transform="translate(-242.7989,-42.83241)"/>
|
||||
<path d="M400 452.36218C400 507.59065 355.22847 552.36218 300 552.36218 244.77153 552.36218 200 507.59065 200 452.36218 200 397.13371 244.77153 352.36218 300 352.36218 355.22847 352.36218 400 397.13371 400 452.36218L400 452.36218z" style="fill:#ff00ff;fill-opacity:0.49999997;fill-rule:evenodd;stroke:#ff00ff;stroke-width:4.0000000;stroke-linecap:butt;stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000" transform="translate(-90.79890,-342.8324)"/>
|
||||
<rect style="fill:url(#rd0);fill-opacity:1.0000000;fill-rule:evenodd;stroke:#000;stroke-width:4.0000000;stroke-linecap:butt;stroke-miterlimit:4.0000000;stroke-dasharray:8.0000000 4.0000000;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000" rx="41.428570" ry="41.428570" transform="translate(6.201104,5.167586)" width="250.00000" y="2.3621826" x="351.00000" height="150.00000"/>
|
||||
<text style="font-size:72px;font-style:oblique;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125.00000%;writing-mode:lr;text-anchor:start;fill:#fff;fill-opacity:0.49999997;stroke:#000;stroke-width:3.0000000;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.0000000;stroke-dasharray:6.0000000 3.0000000;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000;font-family:Bitstream Vera Sans" xml:space="preserve" transform="translate(6.201104,5.167586)" y="101.34265" x="398.91016"><tspan y="101.34265" x="398.91016">SVG</tspan></text>
|
||||
<g transform="matrix(0.403355,0.000000,0.000000,0.403355,284.7118,53.56855)">
|
||||
<path style="fill:url(#rd1);fill-opacity:1.0000000;stroke:none;stroke-width:4.0000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.0000000;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000" d="M675.82158 379.50504A182.96443 182.96443 0 1 0 309.89272 379.50504 182.96443 182.96443 0 1 0 675.82158 379.50504z" transform="translate(25.71677,42.14162)"/>
|
||||
<path style="fill:url(#rd2);fill-opacity:1.0000000;stroke:none;stroke-width:4.0000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.0000000;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000" d="M675.82158 379.50504A182.96443 182.96443 0 1 0 309.89272 379.50504 182.96443 182.96443 0 1 0 675.82158 379.50504z" transform="translate(3.000000,1.000000)"/>
|
||||
<path style="color:#000;fill:#000;fill-opacity:1.0000000;fill-rule:nonzero;stroke:none;stroke-width:4.0000000;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.0000000;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000;marker:none" d="M448.21432 203.83901C450.36313 204.6315 453.75174 205.94795 456.34375 207.71875 458.93576 209.48955 460.70727 211.5991 460.84375 214 461.1565 219.5018 462.73056 224.22855 456.3125 234.21875 449.89444 244.20895 435.16134 259.07637 402.75 282.4375 341.89198 326.30215 327.69756 419.11497 324.82774 445.4561L327.9384 453.22053C327.9384 453.22053 336.06337 335.44254 405.09375 285.6875 437.69027 262.19289 452.72065 247.17079 459.65625 236.375 466.59185 225.57921 465.12192 218.64356 464.84375 213.75 464.60642 209.57479 461.69349 206.55518 458.59375 204.4375 457.315 203.56388 455.94644 202.87002 454.65334 202.2368L448.21432 203.83901z"/>
|
||||
<path style="color:#000;fill:#000;fill-opacity:1.0000000;fill-rule:nonzero;stroke:none;stroke-width:4.0000000;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.0000000;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000;marker:none" d="M509.01528 198.02937C499.53358 209.87282 477.91722 245.5091 465.15625 336.75 449.39628 449.43374 450.70852 546.83082 450.91598 557.84038L454.9375 558.75C454.9375 558.75 452.43678 456.60195 469.125 337.28125 482.74755 239.88008 506.43369 206.85787 513.90048 198.46178 513.90048 198.46178 509.01528 198.02937 509.01528 198.02937z"/>
|
||||
<path style="color:#000;fill:#000;fill-opacity:1.0000000;fill-rule:nonzero;stroke:none;stroke-width:4.0000000;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.0000000;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000;marker:none" d="M556.6875 211.625C547.0438 211.8095 537.01703 214.51544 529.96875 222.90625 520.74474 233.88721 520.91652 245.76284 524.5 256.1875 528.08348 266.61216 534.88069 275.92531 538.96875 282.875 541.20112 286.67003 547.45814 295.57779 555.4375 309.1875 563.41686 322.79721 573.02573 340.97669 581.71875 362.78125 599.10479 406.39038 612.72572 464.47037 601.9375 529.59375 601.9375 529.59375 606.5655 526.08172 606.5655 526.08172 616.26061 461.73706 602.63933 404.42832 585.4375 361.28125 576.65129 339.24295 566.92996 320.8949 558.875 307.15625 550.82004 293.4176 544.35231 284.15204 542.40625 280.84375 538.13746 273.5868 531.59217 264.50677 528.28125 254.875 524.97033 245.24323 524.70586 235.41118 533.03125 225.5 541.18293 215.79562 554.20308 214.66443 565.5625 216.125 576.92192 217.58557 586.26153 221.51972 586.26153 221.51972 586.26153 221.51972 568.49535 212.55885 568.49535 212.55885 567.63548 212.41794 566.98202 212.27046 566.09375 212.15625 563.09277 211.77039 559.90207 211.5635 556.6875 211.625z"/>
|
||||
<path style="color:#000;fill:#000;fill-opacity:1.0000000;fill-rule:nonzero;stroke:none;stroke-width:4.0000000;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.0000000;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000;marker:none" d="M458.15625 224.96875C424.33124 226.01594 399.1972 233.81099 381.5 242.40625 376.05652 245.05007 371.36415 247.88263 367.2855 250.51507 362.72383 255.08465 357.48708 260.80582 350.5625 269.40625 350.5625 269.40625 360.3001 257.14641 383.25 246 406.1999 234.85359 442.22471 224.97829 494.53125 230.375 599.18056 241.17215 643.20884 296.98475 675.71875 347 675.71875 347 673.37503 336.37355 673.37503 336.37355 641.03129 288.32441 594.99108 236.69798 494.9375 226.375 481.69006 225.0082 469.43125 224.61969 458.15625 224.96875z"/>
|
||||
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
98
tests/background.html
Normal file
98
tests/background.html
Normal file
@ -0,0 +1,98 @@
|
||||
<!--
|
||||
* @author Niklas von Hertzen <niklas at hertzen.com>
|
||||
* @created 15.7.2011
|
||||
* @website http://hertzen.com
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Background attribute tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<link href="#" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="../external/jquery-1.6.2.min.js"></script>
|
||||
<script type="text/javascript" src="../build/html2canvas.js"></script>
|
||||
<script type="text/javascript" src="../build/jquery.plugin.html2canvas.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(window).ready(function() {
|
||||
|
||||
$('body').html2canvas({
|
||||
logging:true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.small div{
|
||||
width:100px;
|
||||
height:100px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
.medium div{
|
||||
width:200px;
|
||||
height:200px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
.small, .medium{
|
||||
clear:both;
|
||||
}
|
||||
|
||||
div{
|
||||
display:block;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="medium">
|
||||
<div style="background:url(image.jpg);"></div>
|
||||
<div style="background:url(image.jpg) repeat-x;"></div>
|
||||
<div style="background:url(image.jpg) repeat-y;"></div>
|
||||
<div style="background:url(image.jpg) no-repeat;"></div>
|
||||
</div>
|
||||
<div class="small">
|
||||
<div style="background:url(image.jpg);"></div>
|
||||
<div style="background:url(image.jpg) repeat-x;"></div>
|
||||
<div style="background:url(image.jpg) repeat-y;"></div>
|
||||
<div style="background:url(image.jpg) no-repeat;"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="medium">
|
||||
<div style="background:url(image.jpg) center center;"></div>
|
||||
<div style="background:url(image.jpg) repeat-x center center;"></div>
|
||||
<div style="background:url(image.jpg) repeat-y center center;"></div>
|
||||
<div style="background:url(image.jpg) no-repeat center center;"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="small">
|
||||
<div style="background:url(image.jpg) center center;"></div>
|
||||
<div style="background:url(image.jpg) repeat-x center center;"></div>
|
||||
<div style="background:url(image.jpg) repeat-y center center;"></div>
|
||||
<div style="background:url(image.jpg) no-repeat center center;"></div>
|
||||
</div>
|
||||
|
||||
<div class="medium">
|
||||
<div style="background:url(image.jpg) 50px 50px;"></div>
|
||||
<div style="background:url(image.jpg) repeat-x 50px 50px;"></div>
|
||||
<div style="background:url(image.jpg) repeat-y 50px 50px;"></div>
|
||||
<div style="background:url(image.jpg) no-repeat 50px 50px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="medium">
|
||||
|
||||
<div style="background:url(image.jpg) no-repeat -15% 25px;"></div>
|
||||
<div style="background-image:url(image.jpg), url(image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 100px 100px;"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
120
tests/borders.html
Normal file
120
tests/borders.html
Normal file
@ -0,0 +1,120 @@
|
||||
<!--
|
||||
* @author Niklas von Hertzen <niklas at hertzen.com>
|
||||
* @created 15.7.2011
|
||||
* @website http://hertzen.com
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>z-index tests #2</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<link href="#" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="../external/jquery-1.6.2.min.js"></script>
|
||||
<script type="text/javascript" src="../build/html2canvas.js"></script>
|
||||
<script type="text/javascript" src="../build/jquery.plugin.html2canvas.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(window).ready(function() {
|
||||
|
||||
$('body').html2canvas({
|
||||
logging:true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
div { font: 12px Arial; }
|
||||
|
||||
span.bold { font-weight: bold; }
|
||||
|
||||
#div2 { z-index: 2; }
|
||||
#div3 { z-index: 1; }
|
||||
#div4 { z-index: 10; }
|
||||
|
||||
#div1,#div3 {
|
||||
height: 80px;
|
||||
position: relative;
|
||||
border: 1px dashed #669966;
|
||||
background-color: #ccffcc;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
#div2 {
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
top: 20px;
|
||||
left: 170px;
|
||||
border: 1px dashed #990000;
|
||||
background-color: #ffdddd;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#div4 {
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 70px;
|
||||
top: 65px;
|
||||
left: 50px;
|
||||
border: 1px dashed #000099;
|
||||
background-color: #ddddff;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#div5{
|
||||
border: 1px dashed #669966;
|
||||
background-color: #ccffcc;
|
||||
padding-left: 5px;
|
||||
position:relative;
|
||||
margin-bottom:-15px;
|
||||
height:50px;
|
||||
margin-top:10px;
|
||||
|
||||
}
|
||||
|
||||
#div6{
|
||||
border: 1px dashed #000099;
|
||||
background-color: #ddddff;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
|
||||
}
|
||||
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
|
||||
<br />
|
||||
|
||||
<div id="div1">
|
||||
<br /><span class="bold">DIV #1</span>
|
||||
<br />position: relative;
|
||||
<div id="div2">
|
||||
<br /><span class="bold">DIV #2</span>
|
||||
<br />position: absolute;
|
||||
<br />z-index: 2;
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div id="div3">
|
||||
<br /><span class="bold">DIV #3</span>
|
||||
<br />position: relative;
|
||||
<br />z-index: 1;
|
||||
<div id="div4">
|
||||
<br /><span class="bold">DIV #4</span>
|
||||
<br />position: absolute;
|
||||
<br />z-index: 10;
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="div5"><br />DIV #5<br />position:relative;<br /></div>
|
||||
|
||||
<div id ="div6"><br />DIV #6<br />position:static;<br /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,141 +0,0 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>The Second Acid Test</title>
|
||||
<style type="text/css">
|
||||
/* section numbers refer to CSS2.1 */
|
||||
|
||||
/* page setup */
|
||||
html { font: 12px sans-serif; margin: 0; padding: 0; overflow: hidden; /* hides scrollbars on viewport, see 11.1.1:3 */ background: white; color: red; }
|
||||
body { margin: 0; padding: 0; }
|
||||
|
||||
/* introduction message */
|
||||
.intro { font: 2em sans-serif; margin: 3.5em 2em; padding: 0.5em; border: solid thin; background: white; color: black; position: relative; z-index: 2; /* should cover the black and red bars that are fixed-positioned */ }
|
||||
.intro * { font: inherit; margin: 0; padding: 0; }
|
||||
.intro h1 { font-size: 1em; font-weight: bolder; margin: 0; padding: 0; }
|
||||
.intro :link { color: blue; }
|
||||
.intro :visited { color: purple; }
|
||||
|
||||
/* picture setup */
|
||||
#top { margin: 100em 3em 0; padding: 2em 0 0 .5em; text-align: left; font: 2em/24px sans-serif; color: navy; white-space: pre; } /* "Hello World!" text */
|
||||
.picture { position: relative; border: 1em solid transparent; margin: 0 0 100em 3em; } /* containing block for face */
|
||||
.picture { background: red; } /* overriden by preferred stylesheet below */
|
||||
|
||||
/* top line of face (scalp): fixed positioning and min/max height/width */
|
||||
.picture p { position: fixed; margin: 0; padding: 0; border: 0; top: 9em; left: 11em; width: 140%; max-width: 4em; height: 8px; min-height: 1em; max-height: 2mm; /* min-height overrides max-height, see 10.7 */ background: black; border-bottom: 0.5em yellow solid; }
|
||||
|
||||
/* bits that shouldn't be part of the top line (and shouldn't be visible at all): HTML parsing, "+" combinator, stacking order */
|
||||
.picture p.bad { border-bottom: red solid; /* shouldn't matter, because the "p + table + p" rule below should match it too, thus hiding it */ }
|
||||
.picture p + p { background: maroon; z-index: 1; } /* shouldn't match anything */
|
||||
.picture p + table + p { margin-top: 3em; /* should end up under the absolutely positioned table below, and thus not be visible */ }
|
||||
|
||||
/* second line of face: attribute selectors, float positioning */
|
||||
[class~=one].first.one { position: absolute; top: 0; margin: 36px 0 0 60px; padding: 0; border: black 2em; border-style: none solid; /* shrink wraps around float */ }
|
||||
[class~=one][class~=first] [class=second\ two][class="second two"] { float: right; width: 48px; height: 12px; background: yellow; margin: 0; padding: 0; } /* only content of abs pos block */
|
||||
|
||||
/* third line of face: width and overflow */
|
||||
.forehead { margin: 4em; width: 8em; border-left: solid black 1em; border-right: solid black 1em; background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC); /* that's a 1x1 yellow pixel PNG */ }
|
||||
.forehead * { width: 12em; line-height: 1em; }
|
||||
|
||||
/* class selectors headache */
|
||||
.two.error.two { background: maroon; } /* shouldn't match */
|
||||
.forehead.error.forehead { background: red; } /* shouldn't match */
|
||||
[class=second two] { background: red; } /* this should be ignored (invalid selector -- grammar says it only accepts IDENTs or STRINGs) */
|
||||
|
||||
/* fourth and fifth lines of face, with eyes: paint order test (see appendix E) and fixed backgrounds */
|
||||
/* the two images are identical: 2-by-2 squares with the top left
|
||||
and bottom right pixels set to yellow and the other two set to
|
||||
transparent. Since they are offset by one pixel from each other,
|
||||
the second one paints exactly over the transparent parts of the
|
||||
first one, thus creating a solid yellow block. */
|
||||
.eyes { position: absolute; top: 5em; left: 3em; margin: 0; padding: 0; background: red; }
|
||||
#eyes-a { height: 0; line-height: 2em; text-align: right; } /* contents should paint top-most because they're inline */
|
||||
#eyes-a object { display: inline; vertical-align: bottom; }
|
||||
#eyes-a object[type] { width: 7.5em; height: 2.5em; } /* should have no effect since that object should fallback to being inline (height/width don't apply to inlines) */
|
||||
#eyes-a object object object { border-right: solid 1em black; padding: 0 12px 0 11px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAABnRSTlMAAAAAAABupgeRAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAAEUlEQVR42mP4%2F58BCv7%2FZwAAHfAD%2FabwPj4AAAAASUVORK5CYII%3D) fixed 1px 0; }
|
||||
#eyes-b { float: left; width: 10em; height: 2em; background: fixed url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAABnRSTlMAAAAAAABupgeRAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAAEUlEQVR42mP4%2F58BCv7%2FZwAAHfAD%2FabwPj4AAAAASUVORK5CYII%3D); border-left: solid 1em black; border-right: solid 1em red; } /* should paint in the middle layer because it is a float */
|
||||
#eyes-c { display: block; background: red; border-left: 2em solid yellow; width: 10em; height: 2em; } /* should paint bottom most because it is a block */
|
||||
|
||||
/* lines six to nine, with nose: auto margins */
|
||||
.nose { float: left; margin: -2em 2em -1em; border: solid 1em black; border-top: 0; min-height: 80%; height: 60%; max-height: 3em; /* percentages become auto (see 10.5 and 10.7) and intrinsic height is more than 3em, so 3em wins */ padding: 0; width: 12em; }
|
||||
.nose > div { padding: 1em 1em 3em; height: 0; background: yellow; }
|
||||
.nose div div { width: 2em; height: 2em; background: red; margin: auto; }
|
||||
.nose :hover div { border-color: blue; }
|
||||
.nose div:hover :before { border-bottom-color: inherit; }
|
||||
.nose div:hover :after { border-top-color: inherit; }
|
||||
.nose div div:before { display: block; border-style: none solid solid; border-color: red yellow black yellow; border-width: 1em; content: ''; height: 0; }
|
||||
.nose div :after { display: block; border-style: solid solid none; border-color: black yellow red yellow; border-width: 1em; content: ''; height: 0; }
|
||||
|
||||
/* between lines nine and ten: margin collapsing with 'float' and 'clear' */
|
||||
.empty { margin: 6.25em; height: 10%; /* computes to auto which makes it empty per 8.3.1:7 (own margins) */ }
|
||||
.empty div { margin: 0 2em -6em 4em; }
|
||||
.smile { margin: 5em 3em; clear: both; /* clearance is negative (see 8.3.1 and 9.5.1) */ }
|
||||
|
||||
/* line ten and eleven: containing block for abs pos */
|
||||
.smile div { margin-top: 0.25em; background: black; width: 12em; height: 2em; position: relative; bottom: -1em; }
|
||||
.smile div div { position: absolute; top: 0; right: 1em; width: auto; height: 0; margin: 0; border: yellow solid 1em; }
|
||||
|
||||
/* smile (over lines ten and eleven): backgrounds behind borders, inheritance of 'float', nested floats, negative heights */
|
||||
.smile div div span { display: inline; margin: -1em 0 0 0; border: solid 1em transparent; border-style: none solid; float: right; background: black; height: 1em; }
|
||||
.smile div div span em { float: inherit; border-top: solid yellow 1em; border-bottom: solid black 1em; } /* zero-height block; width comes from (zero-height) child. */
|
||||
.smile div div span em strong { width: 6em; display: block; margin-bottom: -1em; /* should have no effect, since parent has top&bottom borders, so this margin doesn't collapse */ }
|
||||
|
||||
/* line twelve: line-height */
|
||||
.chin { margin: -4em 4em 0; width: 8em; line-height: 1em; border-left: solid 1em black; border-right: solid 1em black; background: yellow url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAFSDNYfAAAAaklEQVR42u3XQQrAIAwAQeP%2F%2F6wf8CJBJTK9lnQ7FpHGaOurt1I34nfH9pMMZAZ8BwMGEvvh%2BBsJCAgICLwIOA8EBAQEBAQEBAQEBK79H5RfIQAAAAAAAAAAAAAAAAAAAAAAAAAAAID%2FABMSqAfj%2FsLmvAAAAABJRU5ErkJggg%3D%3D) /* 64x64 red square */ no-repeat fixed /* shouldn't be visible unless the smiley is moved to the top left of the viewport */; }
|
||||
.chin div { display: inline; font: 2px/4px serif; }
|
||||
|
||||
/* line thirteen: cascade and selector tests */
|
||||
.parser-container div { color: maroon; border: solid; color: orange; } /* setup */
|
||||
div.parser-container * { border-color: black; /* overrides (implied) border-color on previous line */ } /* setup */
|
||||
* div.parser { border-width: 0 2em; /* overrides (implied) declarations on earlier line */ } /* setup */
|
||||
|
||||
/* line thirteen continued: parser tests */
|
||||
.parser { /* comment parsing test -- comment ends before the end of this line, the backslash should have no effect: \*/ }
|
||||
.parser { margin: 0 5em 1em; padding: 0 1em; width: 2em; height: 1em; error: \}; background: yellow; } /* setup with parsing test */
|
||||
* html .parser { background: gray; }
|
||||
\.parser { padding: 2em; }
|
||||
.parser { m\argin: 2em; };
|
||||
.parser { height: 3em; }
|
||||
.parser { width: 200; }
|
||||
.parser { border: 5em solid red ! error; }
|
||||
.parser { background: red pink; }
|
||||
|
||||
/* line fourteen (last line of face): table */
|
||||
ul { display: table; padding: 0; margin: -1em 7em 0; background: red; }
|
||||
ul li { padding: 0; margin: 0; }
|
||||
ul li.first-part { display: table-cell; height: 1em; width: 1em; background: black; }
|
||||
ul li.second-part { display: table; height: 1em; width: 1em; background: black; } /* anonymous table cell wraps around this */
|
||||
ul li.third-part { display: table-cell; height: 0.5em; /* gets stretched to fit row */ width: 1em; background: black; }
|
||||
ul li.fourth-part { list-style: none; height: 1em; width: 1em; background: black; } /* anonymous table cell wraps around this */
|
||||
|
||||
/* bits that shouldn't appear: inline alignment in cells */
|
||||
.image-height-test { height: 10px; overflow: hidden; font: 20em serif; } /* only the area between the top of the line box and the top of the image should be visible */
|
||||
table { margin: 0; border-spacing: 0; }
|
||||
td { padding: 0; }
|
||||
|
||||
</style>
|
||||
<link rel="appendix stylesheet" href="data:text/css,.picture%20%7B%20background%3A%20none%3B%20%7D"> <!-- this stylesheet should be applied by default -->
|
||||
<script type="text/javascript" src="../test.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="margin: 70px;"></div>
|
||||
<div class="picture">
|
||||
<p><table><tr><td></table><p class="bad"> <!-- <table> closes <p> per the HTML4 DTD -->
|
||||
<blockquote class="first one"><address class="second two"></address></blockquote>
|
||||
<div class="forehead"><div> </div></div>
|
||||
<div class="eyes"><div id="eyes-a"><object data="data:application/x-unknown,ERROR"><object data="http://www.damowmow.com/404/" type="text/html"><object data="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAFy7sgCAAAGsUlEQVRo3u2ZbWwcZxHHf3s%2B7LNbO3ZjXBtowprGODRX0qpNQCjmJKuVKhMl1P2AkCwhFOIKkCBSm9IXavGFKAixIAECwkmWo5MrhRI3Ub40IEwQgp6aIDg3Cd6eEqyIHEteah%2B1E69vhw%2BZtTaX8704ZzkKjHS6271nZ56ZZ%2BY%2F%2F%2BdZKF%2FCwYshx3EkkggLsD1v4FQkEZZYLCbAKyG9%2Ba9EIsG6hnUAf8x74K3aUC3j4%2BM54HcsR2oAIomwZOezkv%2FnSHpYNh%2BNCmAE7xv94zvFdd1bHsjMZmQkPSxAJP%2B%2FfuBLwK54PC7JZFKAVJmzXLBt2w%2FMvcDLwIb8QS8CeJ4nkURYIomw7J%2FYJ8BvSiiXptGGxWds2%2Fa9%2Bnaxh%2BYAD%2Bgt04NDgABTpQY2cvvSFLzw86gWeBVwC8SzlOSv2YeBPfmDBoBHgKmR9LBEEmHZfDTqGykqfkUE0nA78BzQGfSgUeP3wNeTXwXg7MwZDhw4UHL6ra2ti79%2FOvljgG8AZ4H64Lhm4MvAocxsRppGG%2FxcXihlwLIs6R%2FfKV2HO%2F26uA94pdDYUKUZUU7W1RQYXA98Gnhaf5%2FXWX0HeAHYoQonqa4sZSOsSWMCWeC9Yko%2BCQwBe4E6oNc0Tc91XTl1%2BaTsn9gnI%2Blhyc5nZWxsrBIkKSbl2tiic3tW53YDEwOKaoFBrcOfqKee53lG9xsPMjV784r%2F4lO%2FpPvyJ9iyZcuvFSaXK5XYeAZ4CDgGvB3MS4B54LQuWYPeuy4iRFsevsXqpuYoqVQKIH2bK1CuDQNo11o4XUzh%2FcDWYIe1LEtyuZx4niee54njOGKapgfsqlL%2Bl2OjEXg8nxrc1dJ0h3hbtL%2BGCtz7KPBF4CuBe9uB15VafE8hr9qylI3HgG8C2%2FK7VyHZoJj7MrBRm30qFotJMpkU27YlHo%2F7Ha5a%2BV%2FKRkSJ4KuKRLVLKapTjB1SzAVIjY2NSXY%2BKyPpYdk%2FsU9OXT4pruv6BdZbBQfKsVGnvWlIe1VB6VQO8JxC1vZYLCbZ%2BaxsPhpdZDyRRFhG0sPiOE6ldKBg2lRg4xF1YCDIIIKN7DGgD3gH%2BBXwejKZfPrs2tPs%2FvPN2bKuYR1nd7xLKBSSJeqoXKnERjPwNWAG%2BLn2rZuM%2B4Tpml6vaWlp4eLcxVusZq5lCgVgOVKJjRqdX86ffL4D5wIoZACnTpw4wRMdT96i%2FImOJxERAs4uVyqxUacF%2FPdiCj%2BjdRBRGFtwXVdG0sPSdbhTmkYbpH98p2RmM2JZlig1vl0GWo4NQ%2Fn%2Bs5pKRXfwjweaxy7TND3HcRZbfC6X8xVPVQlGy7WxVWlO5XRXFXm6EZmrQuSXYyPE3SiVoEhE6Wyr0u2rumO6zv%2B21AFdQAswC1wCMuUCXCmyWQus103Qg8qlDO0lxwOb%2Fl4FiK3AB3VS%2FuKKLtK%2FgbeAnwG%2FvUODuRw%2FFrR0H1UC75fwu8oJ%2FhFsW5VIG%2FBUgEIN6Y65O4AHu4Ap0zQ9y7LEcZyb9lRBUHQcRyzL8unZVBW5bFWAvAp%2BhDQ2g4F47dUYtlU6obXA54DnVdFLekjUGGifh4AFy7LEdV3xj3X9I66m0QZpGm2QrsOd0j%2B%2BU0bSw5KZzYjrun6HWlAd961i4FfCj0aN1Usau%2Bc1lmuXPFwvAEumUut7tQQvAb%2FXb%2FT0bCAej9cODg7yt%2Bm%2F8q2%2F7OUHZ76PnZ1k2p0mJzlykmPancbOTnL0whHs7CQfb%2B5mx2d3sH79%2BtCRI0c6FeaOr9ICrIQfLvA%2B8BGNXxi4R6HrisJVUWrxAVW2oMFf0Aczim8o3kV6enowDIPjF9%2Fk%2BMU3S3rrjzMMg56eHr%2BxP7qKFbASfojG6kpeDGs1tiW53RxwWT%2Bin5q8w4xpQK5evQpAR30H7ZH2khNvj7TTUd8BgD4rqmu1ZKX8qNeY%2BfHz4zlXDgT5E8tpCTUq7XSBC4Euv8227TV9fX1E73%2BYtvo27BmbS9cvFVTY3bSRFza9yOcf6Gfmygy7d%2B%2Fm%2FPnzF4DvrsBLhnJlJfwIKXxv1PheAE4qK6p4H9AGbNKTuhngBPBPXYRe4IemaT5kWZbR19fHNbmGnZ1k4r3U4glDR30Hm5qjbGjsImJEOHbsGHv27JFz5869o0eFq01Jq%2BmHAXwI6FFKagMTgHM7GzFDS%2BoeLSMv7zjzC9x4Y7gxFovVDAwMEI1GaWlpWSzRVCrFwYMH%2FXfxZ4AfAa8B%2F7lDaGg1%2FQgp43lfK0yqtRMuJa3ceKe5DfgYsCYAZ2ngD8CfAkzqTpW7xY%2F%2FSznyX%2FVeUb2kVmX4AAAAAElFTkSuQmCC">ERROR</object></object></object></div><div id="eyes-b"></div><div id="eyes-c"></div></div> <!-- that's a PNG with 8bit alpha containing two eyes -->
|
||||
<div class="nose"><div><div></div></div></div>
|
||||
<div class="empty"><div></div></div>
|
||||
<div class="smile"><div><div><span><em><strong></strong></em></span></div></div></div>
|
||||
<div class="chin"><div> </div></div>
|
||||
<div class="parser-container"><div class="parser"><!-- ->ERROR<!- --></div></div> <!-- two dashes is what delimits a comment, so the text "->ERROR<!-" earlier on this line is actually part of a comment -->
|
||||
<ul>
|
||||
<li class="first-part"></li>
|
||||
<li class="second-part"></li>
|
||||
<li class="third-part"></li>
|
||||
<li class="fourth-part"></li>
|
||||
</ul>
|
||||
<div class="image-height-test"><table><tr><td><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAFSDNYfAAAAaklEQVR42u3XQQrAIAwAQeP%2F%2F6wf8CJBJTK9lnQ7FpHGaOurt1I34nfH9pMMZAZ8BwMGEvvh%2BBsJCAgICLwIOA8EBAQEBAQEBAQEBK79H5RfIQAAAAAAAAAAAAAAAAAAAAAAAAAAAID%2FABMSqAfj%2FsLmvAAAAABJRU5ErkJggg%3D%3D" alt=""></td></tr></table></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,66 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Background attribute tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style>
|
||||
html {
|
||||
background-color: red;
|
||||
}
|
||||
body {
|
||||
background-color: lime;
|
||||
}
|
||||
.small div{
|
||||
width:100px;
|
||||
height:100px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
.medium div{
|
||||
width:200px;
|
||||
height:200px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:20px solid transparent;
|
||||
border-width: 10px 20px 30px 40px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.small, .medium{
|
||||
clear:both;
|
||||
}
|
||||
|
||||
div{
|
||||
display:block;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="medium">
|
||||
<div style="background:url(../../assets/image.jpg);background-clip: border-box;"></div>
|
||||
<div style="background:url(../../assets/image.jpg);background-clip: padding-box;"></div>
|
||||
<div style="background:url(../../assets/image.jpg);background-clip: content-box;"></div>
|
||||
<div style="background:url(../../assets/image.jpg);"></div>
|
||||
</div>
|
||||
|
||||
<div class="medium">
|
||||
<div style="background:url(../../assets/image.jpg);background-clip: border-box; background-repeat: no-repeat;"></div>
|
||||
<div style="background:url(../../assets/image.jpg);background-clip: padding-box; background-repeat: repeat-y;"></div>
|
||||
<div style="background:url(../../assets/image.jpg);background-clip: content-box; background-repeat: repeat-x;"></div>
|
||||
<div style="background:url(../../assets/image.jpg); background-repeat: no-repeat;"></div>
|
||||
</div>
|
||||
|
||||
<div class="medium">
|
||||
<div style="background-clip: border-box;"></div>
|
||||
<div style="background-clip: padding-box;"></div>
|
||||
<div style="background-clip: content-box;"></div>
|
||||
<div style=""></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,52 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Background attribute tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style>
|
||||
html {
|
||||
background-color: red;
|
||||
}
|
||||
body {
|
||||
background-color: lime;
|
||||
}
|
||||
.small div{
|
||||
width:100px;
|
||||
height:100px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
.medium div{
|
||||
width:200px;
|
||||
height:200px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
.small, .medium{
|
||||
clear:both;
|
||||
}
|
||||
|
||||
div{
|
||||
display:block;
|
||||
}
|
||||
|
||||
.encoded {
|
||||
background:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCABLAEsDAREAAhEBAxEB/8QAHAAAAgMBAQEBAAAAAAAAAAAABQcEBggCAwAJ/8QANxAAAgECBQEHAQUIAwEAAAAAAQIDBBEABQYSITEHExQiQVFhcTKBkbHBCCNCUnLR4fAWYqLx/8QAGwEAAQUBAQAAAAAAAAAAAAAAAQIDBAUGAAf/xAAzEQACAgECAwQHCAMAAAAAAAAAAQIDEQQhEjFBIlFhcRMUgZGhsdEFFSNCUsHh8DKi8f/aAAwDAQACEQMRAD8AxREirbfKlv6rYxDz0R6mmj2eohpqrLKmGVTJTVsEpG65sHF8dBSakpLmn8hq5pxTXRo0DlaCn1dB7eJZfxxD0b/FiyFqVmmQ1Yo/KMaRFBIj5tCTFSG3SsgP/sf3x0t0JTJtLTlJa0FSP31+R/0TCcYG8nM0Q9sLAQJoRzgnECoiFjggB7RC5wsSZHTLaGCQpJBSq68EbQ1sUjst72bdU1dy9x1mlPQJlNQY0p+9Rd67YwDcG/HGBVK12JPOPMF1darbUVt4GgoazdmeW1YNxKaea/8AUoJxVafsTj4P9xm5cVcvJjjhljjlRZDtBPt1xqlzMu3tsNjSulMrziigkVUkUOHK9RcdD8Ys6owcStsnJMsFV2ZUrxVDRqQ0luSL9P8AH5YcdUWhtWtC91T2e1mWRPUQx740BLKt7/X6YhTqcd0S4WKWxQZhiOPA+ccYICAy3Y4UAyXS/uwFXLGFv5kX++KCWHu5m6i3y4SbI7y0k0bZbZHQqTtT2/qw3FRUk1P5/QVJtxa4X8PqNHIanxmndMzg+Z6KEc+6kqfyxG4MXuPiyFJ4qcn3F5o9RGrzPbI5aRz6np7D2GLpSbfiZ9xWMD20Fq5MlgpF72PdNIyGE8OFFvMPjn7/ALsWlE3FIrbYcTH5keaw11MtnVz063xZqWSvccMkZhRwT08m4KRY3BwibSW4uCeTJ+qKA5PnuYURBXuZmVQ/Xbe6n8CMVTWGWXQATOCCLjBAQXbzHphQkyTS5XE1HTXpttTtPfB5bruvxt+LdcUc7e08PY3dcez2luTIsm3GwjhF+OW/xhl3eLHuHwLpo1pn0lkrRh5no2qICkSGRmZJSQAo6khhxhmxS9azFc8P3kLsqiUZeQ3dPafhmrFkU7HUh3Exsyi9269LeuL2Me0ZWUsIM6p7EKjtkzTLXi1XVaWaEvfwSkmqJZdq7Qy9LdSeOeD6WlSRAm8YbNDN2f6ry6lpqXRGq6RqjLXjapgzaiM3i4woPdK6sCpYXs3NuOuJXBjkR3JNbjRy+KvkpF8bEaaV1tYi5/8AuI0k2tx1NLkYQ/aB1XmucdrGeHLNQ5jl+X07ikjiptiITGNrNfaSSWvyTf7gMUt2olGxxjyRe0Uw9GnOOWxXyVuoVLM+rc7kBvYeIC2/BcNeszew+qK1+UGTVmdGRj/yjPV+PGH+2HVqJ94PRV/pQtos+1SPs0WVi/S5kP64S9PpespfAlLUaz9Efj9QtkEmuc/roaajgycB2AaRo5NsY9WJB6DHeraVvCcm/Z9BM9Vq4rMlFL2/Dc0dp7L4dO5eKWl6k7pJtoVpGtyxA6dOgxIqpVawipuvldLMgtRzIjbDJsBYeW32sSlAiNkLtI7Y6nRkMcOWGeKYKqrMsO8Ru91Qkeo3bfKP1wpN8XDEXCtSWWGv2Le1nXk2qJn1VXjNVrHWJJpy3euIRtLcKAFAO0X6k8Di+Jzmk4xiQ5UWRUnYsGvO23thyvs60bUVIq0GcV1O4yykU3ldyNvegeiITck8XFuThOqvhRXxN7vkDSUTvsUUtlzPzdzqecS940zOzkvI7HlmuSxPyeuMfF5e/M1/CkerKFiaZQZIiN19wJ+oGE5T2Ow2QGkhc7u7fn6YWmDhYMnyDLGBanrp43JG8TQhx09CtrYs5aaPSTIEPtKf54L2PHzyXrRmVQZTlJZFQyyctIqlbj0HOHKqvRrfdkbUah3yzyXcWnK6lK4Ps+0h2snqDiXFZITeA/leTSV1ZGii537DZbgAjn64kRhljbkkhqt+zkmo6ekLx0s61ZNJJT1se5GABNn4IN/0BxIlpctSi8MajqOcZLKG32e9immtA6berly+nVqaF3ip4dyxR2UndybliR1J4Fhh6FSj2p7sZna32Y8jM+faKzjU2YNmWZ54tZmFSAZJ54mdiB0A6WUDoBYYoZ6C62XHZYm34MtofaNNceCFbS80B6jskrWRQmb0e8g3D07gLb7zfCPuufSa9zF/elfWD96Kzn2iZ8mjqFmmjd46hoN5tGsjKBu2BjubhlPAsAet8Vl+mlTlt9f7jr+xa1aiNuMLpn+9Clyaan3tt7vbfjzjEbLJWUUxqqxBtdR6e+NJgy/IZmlKiTMdPpO8RiuWsL/aAPUYUlsBvvO8glmi1LHGEURzAhh6gAXGFxW4mT2HbpOhTxSSOGWNrbghBJ+behxOgiLKRobSWo6fJKGE11YYYmO9TI/mP8J2jkkm1uP1xNTSW5F3b2CGp9UxHTGZVCkmnaMokbdTu8vP44alPIBCxkKFHJsStwfS5FsN5AfSSkpMyXEaAFiebLwCfxOCAomrshgGofFzw0UVPVoHlqJgu+NhZJG5IFhwbnnzcemKfVVQVnHJJZ69f748zQaO6cqlFNvG2Onev+chT1MEwqZfDyQdxuOwVDhZAL9CPjpjOvbkzQLxFk8TpIA6kpe7WHpjTYMrnI49KVVHmGX0cdOsnhwLI5Ujc3sB1Nr9elz64dSBkFZ+9To7PaatqwsNNFUhWk3G0YY28xP8PNyfS+OinGRzawa07E4IaySCaVVeOQdOoBHS/vixqIFnMtnb8tatHpxcpjgepjqHlKzOYwU2bSoYA26g9PTBtWcYG4y4XuU4Z9mE+TJl88cMUJ2FlDFzcG9gbDi+GEmFyT5AWSInvFFyFJHHXp/nBE5PHLA0Ek9M7EtNEYw59T8/76YMe46W+5W9dd+cm76IWMDhZbRxuAkg2tuDgggMFuBzyeuIesjmviXTwT2fmWOhklY4Pr5815Cxly+GRwxy+lclQdypMoPA5spKj7iR7YoJVtPHAv8AZfLK9xpI2Jr/ACfwItT2YTToVjCsTx5W639Mah0dxkVbgjZVojV+nqhXyeKOeON9yxzuFHwASeAOTb3OBGqaFemj1Gpn2VVuudD51kdRkcFDPWqIvE1dTG7qLLd1CX5JDDn64kcDwMuxE3sNoNWdnarltd3FZRx37mYVQOxFAsGH2r9eelrYEISiGVkZLI3M/wBRTallp5p9qLGuyNAb2FuTf5OHWskdsATRb1L2Fgf9/XCcHZIrRHxJHsdxHryPyIwMCiPLAwa9gHS4t7m/GOwcQ66natgqaSQeWqjaJSSP4hcG5vYggdQbH3wmUOOLj3jlcuCal3CIqWplqJAaWGNtxJSSdkYH1upVbG/wMZnixtlL2r+PkazhT33+P8jGy5iViYnzWBv841hjwplh3RwX9SXPyS2OQcBNpWpYZWiO096E6X8u61vwxyE9AplEjLPmLBjdQFHwOOMFdRL5BOjdmijJJJAU/wC/gMcgs6pnLIpJuTUAH6XtgndWjwy1Qc1qeP5fzwFzO6EOR28dSDcfPVhW56j93x+eB1CBdXVEtLmmWiJzGDOQbH03DCJbNBXJiU1zUyUGtc+p6dzDBFXzqkacBQJDYDGV1F9kLpxi9k38zbaaqE6ISkt2kf/Z");
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="medium">
|
||||
<div class="encoded"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,135 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Background attribute tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style>
|
||||
html {
|
||||
background-color: red;
|
||||
}
|
||||
.small div{
|
||||
width:100px;
|
||||
height:100px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
.medium div{
|
||||
width:200px;
|
||||
height:200px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
.small, .medium{
|
||||
clear:both;
|
||||
}
|
||||
|
||||
div{
|
||||
display:block;
|
||||
}
|
||||
|
||||
.linearGradient {
|
||||
/*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 0, 0)), to(rgb(0, 0, 255)));*/
|
||||
background: -webkit-linear-gradient(top left, #f00, #00f, #BADA55, rgba(0, 0, 255,0.5));
|
||||
background: -moz-linear-gradient(top right, #f00, #00f, #BADA55, rgba(0, 0, 255,0.5));
|
||||
}
|
||||
|
||||
.linearGradient2 {
|
||||
background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(252, 252, 252)), to(rgb(232, 232, 232)));
|
||||
}
|
||||
|
||||
.linearGradient3 {
|
||||
/* FF 3.6+ */
|
||||
background: -moz-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||
/* Chrome,Safari4+ */
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(#ff0000), color-stop(#ffff00), color-stop(#00ff00));
|
||||
/* Chrome 10+, Safari 5.1+ */
|
||||
background: -webkit-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||
/* Opera 11.10+ */
|
||||
background: -o-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||
/* IE 10+ */
|
||||
background: -ms-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||
/* W3C */
|
||||
background: linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||
}
|
||||
|
||||
.linearGradient4 {
|
||||
/* FF 3.6+ */
|
||||
background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||
/* Chrome, Safari 4+ */
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b));
|
||||
/* Chrome 10+, Safari 5.1+ */
|
||||
background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||
/* Opera 11.10+ */
|
||||
background: -o-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||
/* IE10+ */
|
||||
background: -ms-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||
/* W3C */
|
||||
background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||
}
|
||||
|
||||
.linearGradient5 {
|
||||
/* FF 3.6+ */
|
||||
background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||
/* Chrome, Safari 4+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0b7a1), color-stop(50%, #8c3310), color-stop(51%, #752201), color-stop(100%, #bf6e4e));
|
||||
/* Chrome 10+, Safari 5.1+ */
|
||||
background: -webkit-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||
/* Opera 11.10+ */
|
||||
background: -o-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||
/* IE 10+ */
|
||||
background: -ms-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||
/* W3C */
|
||||
background: linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||
}
|
||||
|
||||
.linearGradient6 {
|
||||
/* FF 3.6+ */
|
||||
background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6, #26558b 100%);
|
||||
/* Chrome 10+, Safari 5.1+ */
|
||||
background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6, #26558b 100%);
|
||||
/* Opera 11.10+ */
|
||||
background: -o-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6, #26558b 100%);
|
||||
/* IE10+ */
|
||||
background: -ms-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6, #26558b 100%);
|
||||
/* W3C */
|
||||
background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6, #26558b 100%);
|
||||
}
|
||||
.linearGradient7 {
|
||||
background: #cce5f4;
|
||||
background: -moz-linear-gradient(top, #cce5f4 0%, #00263c 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cce5f4), color-stop(100%, #00263c));
|
||||
background: -webkit-linear-gradient(top, #cce5f4 0%, #00263c 100%);
|
||||
background: -o-linear-gradient(top, #cce5f4 0%, #00263c 100%);
|
||||
background: -ms-linear-gradient(top, #cce5f4 0%, #00263c 100%);
|
||||
background: linear-gradient(to bottom, #cce5f4 0%, #00263c 100%);
|
||||
}
|
||||
|
||||
.linearGradient8 {
|
||||
background: linear-gradient(to top left, #fff 0%, #00263c 100%);
|
||||
}
|
||||
|
||||
.linearGradient9 {
|
||||
background: linear-gradient(to top left, white 0%, black 100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="medium">
|
||||
<div class="linearGradient"> </div>
|
||||
<div class="linearGradient2"> </div>
|
||||
<div class="linearGradient3"> </div>
|
||||
<div class="linearGradient4"> </div>
|
||||
<div class="linearGradient5"> </div>
|
||||
<div class="linearGradient6"> </div>
|
||||
<div class="linearGradient7"> </div>
|
||||
<div class="linearGradient8"> </div>
|
||||
<div class="linearGradient9"> </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,50 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Background attribute tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style>
|
||||
html {
|
||||
background-color: red;
|
||||
}
|
||||
body {
|
||||
background-color: lime;
|
||||
}
|
||||
.small div{
|
||||
width:100px;
|
||||
height:100px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
.medium div{
|
||||
width:200px;
|
||||
height:200px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
.small, .medium{
|
||||
clear:both;
|
||||
}
|
||||
|
||||
div{
|
||||
display:block;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="medium">
|
||||
<div style="background-image:url(../../assets/image.jpg), url(../../assets/image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 100px 130px;"></div>
|
||||
<div style="background-image:url(../../assets/image.jpg), url(../../assets/image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 20px -20px;"></div>
|
||||
<div style="background-image:url(../../assets/image.jpg), url(../../assets/image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 450px 100px;"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,66 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Background attribute tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style>
|
||||
html {
|
||||
background-color: red;
|
||||
}
|
||||
body {
|
||||
background-color: lime;
|
||||
}
|
||||
.small div{
|
||||
width:100px;
|
||||
height:100px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
.medium div{
|
||||
width:200px;
|
||||
height:200px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
.small, .medium{
|
||||
clear:both;
|
||||
}
|
||||
|
||||
div{
|
||||
display:block;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="medium">
|
||||
<div style='background:url("../../assets/image.jpg") center center;'></div>
|
||||
<div style="background:url('../../assets/image.jpg') repeat-x center center;"></div>
|
||||
<div style="background:url(../../assets/image.jpg) repeat-y center center;"></div>
|
||||
<div style="background:url(../../assets/image.jpg) no-repeat center center;"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="small">
|
||||
<div style="background:url(../../assets/image.jpg) center center;"></div>
|
||||
<div style="background:url(../../assets/image.jpg) repeat-x center center;"></div>
|
||||
<div style="background:url(../../assets/image.jpg) repeat-y center center;"></div>
|
||||
<div style="background:url(../../assets/image.jpg) no-repeat center center;"></div>
|
||||
</div>
|
||||
|
||||
<div class="medium">
|
||||
<div style="background:url(../../assets/image.jpg) -15% 25px;"></div>
|
||||
<div style="background:url(../../assets/image.jpg) repeat-x 50px 50px;"></div>
|
||||
<div style="background:url(../../assets/image.jpg) repeat-y 50px 50px;"></div>
|
||||
<div style="background:url(../../assets/image.jpg) no-repeat 50px 50px;"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,161 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Background attribute tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style>
|
||||
html {
|
||||
background-color: red;
|
||||
}
|
||||
body {
|
||||
background-color: lime;
|
||||
}
|
||||
.small div{
|
||||
width:100px;
|
||||
height:100px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
.medium div{
|
||||
width:200px;
|
||||
height:200px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
.small, .medium{
|
||||
clear:both;
|
||||
}
|
||||
|
||||
div{
|
||||
display:block;
|
||||
}
|
||||
|
||||
.radialGradient {
|
||||
/* FF 3.6+ */
|
||||
background: -moz-radial-gradient(center, ellipse cover, #959595 0%, #0d0d0d 48%, #2f7bd8 50%, #0a0a0a 64%, #4e4e4e 80%, #383838 87%, #1b1b1b 100%);
|
||||
/* Chrome, Safari 4+ */
|
||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#959595), color-stop(48%,#0d0d0d), color-stop(50%,#2f7bd8), color-stop(64%,#0a0a0a), color-stop(80%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b));
|
||||
/* Chrome 10+, Safari 5.1+ */
|
||||
background: -webkit-radial-gradient(center, ellipse cover, #959595 0%, #0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
|
||||
/* Opera 12+ */
|
||||
background: -o-radial-gradient(center, ellipse cover, #959595 0%, #0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
|
||||
/* IE 10+ */
|
||||
background: -ms-radial-gradient(center, ellipse cover, #959595 0%,#0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
|
||||
/* W3C */
|
||||
background: radial-gradient(center, ellipse cover, #959595 0%,#0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
|
||||
}
|
||||
|
||||
.radialGradient2 {
|
||||
/* thx to https://twitter.com/#!/markjmclaren/status/13067366701 */
|
||||
|
||||
background-color: #FFF;
|
||||
|
||||
background-image:
|
||||
-webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
|
||||
-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
|
||||
-webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
|
||||
-webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));
|
||||
|
||||
background-image:
|
||||
-moz-radial-gradient(42px 42px, circle farthest-corner, #A7D30C 0%, #A7D30C 3%, rgba(1,159,98,0) 11%),
|
||||
-moz-radial-gradient(45px 45px, circle farthest-corner, #019F62 0%, #019F62 13%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 100%),
|
||||
|
||||
-moz-radial-gradient(102px 102px, circle farthest-corner, #ff5f98 0%, #ff5f98 15%, rgba(255,1,136,0) 27%),
|
||||
-moz-radial-gradient(105px 105px, circle farthest-corner, #FF0188 0%, #FF0188 28%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 100%),
|
||||
|
||||
-moz-radial-gradient(92px 12px, circle farthest-corner, #00c9ff 0%, #00c9ff 10%, rgba(0,181,226,0) 26%),
|
||||
-moz-radial-gradient(95px 15px, circle farthest-corner, #00b5e2 0%, #00b5e2 28%, rgba(255,255,255,0) 31%, rgba(255,255,255,0) 100%),
|
||||
|
||||
-moz-radial-gradient(0px 150px, circle farthest-corner, #f4f201 0%, #f4f201 25%, rgba(228,199,0,0) 45%),
|
||||
-moz-radial-gradient(0px 150px, circle farthest-corner, #e4c700 0%, #e4c700 47%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
|
||||
}
|
||||
|
||||
.radialGradient3 {
|
||||
background: -moz-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -webkit-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -o-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -ms-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
}
|
||||
|
||||
.radialGradient4 {
|
||||
background: -moz-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -webkit-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -o-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -ms-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
}
|
||||
.radialGradient5 {
|
||||
background: -moz-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -webkit-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -o-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -ms-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%)
|
||||
}
|
||||
.radialGradient6 {
|
||||
background: -moz-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -webkit-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -o-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -ms-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
}
|
||||
.radialGradient7 {
|
||||
background: -moz-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -webkit-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -o-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -ms-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
}
|
||||
.radialGradient8 {
|
||||
background: -moz-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -webkit-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -o-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -ms-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
}
|
||||
.radialGradient9 {
|
||||
background: -moz-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -webkit-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -o-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -ms-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
}
|
||||
.radialGradient10 {
|
||||
background: -moz-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -webkit-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -o-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -ms-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
}
|
||||
.radialGradient11 {
|
||||
background: -moz-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -webkit-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -o-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -ms-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="medium">
|
||||
<div class="radialGradient"> </div>
|
||||
<div class="radialGradient2"> </div>
|
||||
<div class="radialGradient3"> </div>
|
||||
<div class="radialGradient4"> </div>
|
||||
<div class="radialGradient5"> </div>
|
||||
<div class="radialGradient6"> </div>
|
||||
<div class="radialGradient7"> </div>
|
||||
<div class="radialGradient8"> </div>
|
||||
<div class="radialGradient9"> </div>
|
||||
<div class="radialGradient10"> </div>
|
||||
<div class="radialGradient11"> </div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,57 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Background attribute tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style>
|
||||
html {
|
||||
background-color: red;
|
||||
}
|
||||
body {
|
||||
background-color: lime;
|
||||
}
|
||||
.small div{
|
||||
width:100px;
|
||||
height:100px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
.medium div{
|
||||
width:200px;
|
||||
height:200px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
.small, .medium{
|
||||
clear:both;
|
||||
}
|
||||
|
||||
div{
|
||||
display:block;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="medium">
|
||||
<div style="background:url(../../assets/image.jpg);"></div>
|
||||
<div style="background:url(../../assets/image.jpg) repeat-x;"></div>
|
||||
<div style="background:url(../../assets/image.jpg) repeat-y;"></div>
|
||||
<div style="background:url(../../assets/image.jpg) no-repeat;"></div>
|
||||
</div>
|
||||
<div class="small">
|
||||
<div style="background:url(../../assets/image.jpg);"></div>
|
||||
<div style="background:url(../../assets/image.jpg) repeat-x;"></div>
|
||||
<div style="background:url(../../assets/image.jpg) repeat-y;"></div>
|
||||
<div style="background:url(../../assets/image.jpg) no-repeat;"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,61 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Background size tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style>
|
||||
.horizontal div, .vertical div {
|
||||
display: block;
|
||||
background:url("../../assets/image.jpg") center center;
|
||||
}
|
||||
|
||||
.vertical {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.horizontal div {
|
||||
width: 400px; height: 100px;
|
||||
}
|
||||
|
||||
.vertical div {
|
||||
width: 200px; height: 200px;
|
||||
}
|
||||
|
||||
.container {
|
||||
float: left;
|
||||
border: 1px solid black;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
background-image: url(../../assets/image.jpg);
|
||||
background-size: 34px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container"></div>
|
||||
<div class="container" style="background-repeat: repeat-y"></div>
|
||||
<div class="container" style="background-repeat: repeat-x"></div>
|
||||
<div class="container" style="background-size: 150% auto"></div>
|
||||
<div class="horizontal">
|
||||
<div style='background-size: cover;'></div>
|
||||
<div style='background-size: contain;'></div>
|
||||
<div style='background-size: auto 100%;'></div>
|
||||
<div style='background-size: auto;'></div>
|
||||
</div>
|
||||
|
||||
<div class="vertical">
|
||||
<div style='background-size: cover;'></div>
|
||||
<div style='background-size: contain;'></div>
|
||||
<div style='background-size: auto 100%;'></div>
|
||||
<div style='background-size: auto;'></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,47 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Borders tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
background:#6F428C;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
border-width: 1px;
|
||||
border-color: #00b5e2;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
border-width: 3px;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
border-width: 50px;
|
||||
border-color: green;
|
||||
}
|
||||
|
||||
html {
|
||||
background: #3a84c3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1"> </div>
|
||||
<div class="box2"> </div>
|
||||
<div class="box3"> </div>
|
||||
<div class="box4"> </div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,47 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Borders tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
background:#6F428C;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
border-width: 1px;
|
||||
border-color: #00b5e2;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
border-width: 3px;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
border-width: 50px;
|
||||
border-color: green;
|
||||
}
|
||||
|
||||
html {
|
||||
background: #3a84c3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1"> </div>
|
||||
<div class="box2"> </div>
|
||||
<div class="box3"> </div>
|
||||
<div class="box4"> </div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,47 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Borders tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
background:#6F428C;
|
||||
border-style:double;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
border-width: 1px;
|
||||
border-color: #00b5e2;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
border-width: 3px;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
border-width: 50px;
|
||||
border-color: green;
|
||||
}
|
||||
|
||||
html {
|
||||
background: #3a84c3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1"> </div>
|
||||
<div class="box2"> </div>
|
||||
<div class="box3"> </div>
|
||||
<div class="box4"> </div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,58 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Borders tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
background:#6F428C;
|
||||
border-style: inset;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
border-width: 1px;
|
||||
border-color: #00b5e2;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
border-width: 3px;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
border-width: 50px;
|
||||
border-color: green;
|
||||
}
|
||||
|
||||
.box5 {
|
||||
border-width: 50px;
|
||||
border-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
input {
|
||||
border-width: 50px;
|
||||
}
|
||||
|
||||
html {
|
||||
background: #3a84c3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1"> </div>
|
||||
<div class="box2"> </div>
|
||||
<div class="box3"> </div>
|
||||
<div class="box4"> </div>
|
||||
<div class="box5"> </div>
|
||||
<input type="text" />
|
||||
</body>
|
||||
</html>
|
||||
@ -1,80 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Borders tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
background:#6F428C;
|
||||
border-style: solid;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
border-width: 1px;
|
||||
border-left-color: #00b5e2;
|
||||
border-top-color: red;
|
||||
border-right-color: green;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
border-width: 3px;
|
||||
border-left-color: #00b5e2;
|
||||
border-top-color: red;
|
||||
border-right-color: green;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
border-width: 10px;
|
||||
border-left-color: transparent;
|
||||
border-top-color: red;
|
||||
border-right-color: green;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
border-width: 50px;
|
||||
border-left-color: transparent;
|
||||
border-top-color: red;
|
||||
border-top-width: 10px;
|
||||
border-right-color: green;
|
||||
border-bottom-right-radius: 190px;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.box5 {
|
||||
margin: 100px;
|
||||
border-width: 50px;
|
||||
border-left-color: transparent;
|
||||
border-top-color: red;
|
||||
border-top-width: 10px;
|
||||
border-right-color: green;
|
||||
border-radius: 25px;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.box6 {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
border-radius: 200px;
|
||||
}
|
||||
|
||||
html {
|
||||
background: #3a84c3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="box1"> </div>
|
||||
<div class="box2"> </div>
|
||||
<div class="box3"> </div>
|
||||
<div class="box4"> </div>
|
||||
<div class="box5"> </div>
|
||||
<div class="box6"> </div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,47 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Borders tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
background:#6F428C;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
border-width: 1px;
|
||||
border-color: #00b5e2;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
border-width: 3px;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
border-width: 50px;
|
||||
border-color: green;
|
||||
}
|
||||
|
||||
html {
|
||||
background: #3a84c3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1"> </div>
|
||||
<div class="box2"> </div>
|
||||
<div class="box3"> </div>
|
||||
<div class="box4"> </div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,22 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Inline text in the top element</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../test.js"></script>
|
||||
<style>
|
||||
span {
|
||||
color:blue;
|
||||
}
|
||||
p {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
Some inline text <span> followed by text in span </span> followed by more inline text.
|
||||
<p>Then a block level element.</p>
|
||||
Then more inline text.
|
||||
</body>
|
||||
</html>
|
||||
@ -1,43 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Inline text in the top element</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../test.js"></script>
|
||||
<style>
|
||||
span {
|
||||
color:blue;
|
||||
}
|
||||
p {
|
||||
background-color: green;
|
||||
}
|
||||
div {
|
||||
background: red;
|
||||
border: 5px solid blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div style="clip: rect(0px, 400px, 50px, 200px); ">Some inline text <span> followed by text in span </span> followed by more inline text.
|
||||
<p>Then a block level element.</p>
|
||||
Then more inline text.</div>
|
||||
|
||||
<div style="clip: rect(0px, 400px, 50px, 200px); position: relative; ">Some inline text <span> followed by text in span </span> followed by more inline text.
|
||||
<p>Then a block level element.</p>
|
||||
Then more inline text.</div>
|
||||
|
||||
<div style="clip: rect(0px, 400px, 50px, 200px); position: fixed; ">Some inline text <span> followed by text in span </span> followed by more inline text.
|
||||
<p>Then a block level element.</p>
|
||||
Then more inline text.</div>
|
||||
|
||||
<div style="clip: rect(0px, 400px, 50px, 200px); position: absolute; top: 250px; left: 500px;">Some inline text <span> followed by text in span </span> followed by more inline text.
|
||||
<p>Then a block level element.</p>
|
||||
Then more inline text.</div>
|
||||
</body>
|
||||
|
||||
<div style="clip: rect(0px, 400px, 50px, 200px); position: absolute; top: 500px;">Some inline text <span> followed by text in span </span> followed by more inline text.
|
||||
<p>Then a block level element.</p>
|
||||
Then more inline text.</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>cross-origin iframe test</title>
|
||||
<script>
|
||||
var h2cOptions = {proxy: "http://localhost:8082"};
|
||||
</script>
|
||||
<script type="text/javascript" src="../test.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<iframe src="http://hertzen.com/" width="800" height="800"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>google maps</title>
|
||||
<script>
|
||||
var dontRun = true;
|
||||
</script>
|
||||
<script type="text/javascript" src="../test.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
|
||||
<style>
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
body, html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<h2>Google maps</h2>
|
||||
<div id="map"></div>
|
||||
<script>
|
||||
var mapOptions = { zoom: 13, center: new google.maps.LatLng(60.1656623, 24.9477731) };
|
||||
var map = new google.maps.Map(document.querySelector('#map'), mapOptions);
|
||||
google.maps.event.addListenerOnce(map, 'idle', function(){
|
||||
if (typeof(window.run) === "function") {
|
||||
window.run();
|
||||
} else {
|
||||
dontRun = undefined;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,10 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>iframe test</title>
|
||||
<script type="text/javascript" src="../test.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<iframe src="/tests/assets/iframe/frame1.html" width="500" height="500"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,17 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>External content tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
|
||||
<base href="http://www.google.com/" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>External image</h1>
|
||||
<img src="http://www.google.com/logos/2011/gregormendel11-hp.jpg" style="border:5px solid black;" />
|
||||
|
||||
<h1>External image (using <base> href)</h1>
|
||||
<img src="/logos/2011/gregormendel11-res.jpg" />
|
||||
</body>
|
||||
</html>
|
||||
@ -1,27 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Image tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<script type="text/javascript">
|
||||
function setUp() {
|
||||
if ($('#testcanvas')[0].getContext) {
|
||||
var ctx = $('#testcanvas')[0].getContext('2d');
|
||||
|
||||
ctx.fillStyle = "rgb(200,0,0)";
|
||||
ctx.fillRect (10, 10, 55, 50);
|
||||
|
||||
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
|
||||
ctx.fillRect (30, 30, 55, 50);
|
||||
} else {
|
||||
$('#testcanvas').remove();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="testcanvas" style="width:700px;height:300px;"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,15 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>External content tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script>
|
||||
h2cOptions = {useCORS: true, proxy: null};
|
||||
</script>
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>External image (CORS)</h1>
|
||||
<img src="http://localhost:8081/tests/assets/image2.jpg" />
|
||||
</body>
|
||||
</html>
|
||||
@ -1,16 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Image tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
Image without src attribute, should not crash:
|
||||
<img style="width:50px;height:50px;border:1px solid red;display:block;" />
|
||||
Image with broken src attribute, should not crash:
|
||||
<img src="404" style="width:50px;height:50px;border:1px solid red;display:block;" />
|
||||
<img src="404_2" style="width:50px;height:50px;border:1px solid red;display:block;" />
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,27 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Image tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<img src="../../assets/image.jpg" />
|
||||
<img src="../../assets/image.jpg" style="width:50px;height:400px;" />
|
||||
<img src="../../assets/image.jpg" style="width:500px;" />
|
||||
<img src="../../assets/image.jpg" style="width:100px;border-radius:50px;" />
|
||||
<img src="../../assets/image.jpg" style="width:500px;height:40px;" />
|
||||
|
||||
|
||||
<img src="../../assets/image.jpg" style="padding:20px;border:5px solid black;" />
|
||||
|
||||
<img src="../../assets/image.jpg" style="padding-bottom:20px;border-top:5px solid black;clear:both;" />
|
||||
|
||||
|
||||
<img src="../../assets/image.jpg" style="padding-top:20px;border-top:5px solid black;clear:both;width:50px;" />
|
||||
<img src="../../assets/image.jpg" style="padding-top:20px;border-top:5px solid black;clear:both;width:50px;height:25px;" />
|
||||
|
||||
<img src="../../assets/image.jpg" style="width:0px;height:0px;border:1px solid black" />
|
||||
<img src="../../assets/image.jpg" style="width:0px;height:0px;" />
|
||||
</body>
|
||||
</html>
|
||||
@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Base64 svg</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../../test.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
Inline svg image: <br />
|
||||
<img width="200" height="200" src="data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjMwNiIgaGVpZ2h0PSIyOTYiPjxkZWZzIGlkPSJkZWZzNCIgLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTYyLjQ2OTk1LC00NzcuMjg2MykiIGlkPSJsYXllcjEiPjxwYXRoIGQ9Im0gMzE0LjE1NzQ1LDQ4MS42OTU1OCBjIC01OS4yMDA4OSwwLjUzNzc0IC0xMTQuODA5NzksMzYuNzIyMTkgLTEzNy4zMTI1LDk1LjM0Mzc1IC0yOS4zOTEyOSw3Ni41NjY5MyA4LjgzOTMyLDE2Mi40NTI0NiA4NS40MDYyNSwxOTEuODQzNzUgbCAzNC4wMzEyNSwtODguNjg3NSBjIC0yMC4wNjc4LC03LjcxMzU4IC0zNC4zMTI1LC0yNy4xNTMyNCAtMzQuMzEyNSwtNDkuOTM3NSAwLC0yOS41NDcyMyAyMy45NTI3NywtNTMuNSA1My41LC01My41IDI5LjU0NzIzLDAgNTMuNSwyMy45NTI3NyA1My41LDUzLjUgMCwyMi43ODQyNiAtMTQuMjQ0Nyw0Mi4yMjM5MiAtMzQuMzEyNSw0OS45Mzc1IGwgMzQuMDMxMjUsODguNjg3NSBjIDM5LjI5MDg1LC0xNS4wODIzNCA3MC4zMjM5LC00Ni4xMTU0IDg1LjQwNjI1LC04NS40MDYyNSAyOS4zOTEyOSwtNzYuNTY2OTMgLTguODM5MzIsLTE2Mi40ODM3MSAtODUuNDA2MjUsLTE5MS44NzUgLTE3Ljk0NTM3LC02Ljg4ODU5IC0zNi40MDg1MywtMTAuMDcwODcgLTU0LjUzMTI1LC05LjkwNjI1IHoiIGlkPSJwYXRoMjgzMCIgc3R5bGU9ImZpbGw6IzQwYWE1NDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzIwNTUyYTtzdHJva2Utd2lkdGg6Ny45OTk5OTk1MjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1vcGFjaXR5OjE7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAvPjwvZz48L3N2Zz4=" /></div>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user