diff --git a/.npmignore b/.npmignore index c32fc8c..45a3c29 100644 --- a/.npmignore +++ b/.npmignore @@ -1,12 +1,15 @@ build/ +docs/ examples/ scripts/ src/ tests/ +www/ .github/ *.iml .babelrc .idea/ +.editorconfig .npmignore .eslintrc .travis.yml diff --git a/bower.json b/bower.json deleted file mode 100644 index 10cc54b..0000000 --- a/bower.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "name": "html2canvas", - "description": "Screenshots with JavaScript", - "main": "dist/html2canvas.js", - "ignore": [ - "tests", - ".travis.yml" - ] -} diff --git a/www/package-lock.json b/www/package-lock.json index 1003504..f87f82c 100644 --- a/www/package-lock.json +++ b/www/package-lock.json @@ -4894,6 +4894,14 @@ "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.2.tgz", "integrity": "sha1-nSLgyjKsyVs/RbjVtPb73AWv/VU=" }, + "html2canvas": { + "version": "1.0.0-alpha.3", + "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-alpha.3.tgz", + "integrity": "sha1-0QeAa+W1kuRr0iI7B3KTgaBIGzo=", + "requires": { + "punycode": "2.1.0" + } + }, "htmlparser2": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.3.0.tgz", diff --git a/www/package.json b/www/package.json index f60ddc9..828dbb8 100644 --- a/www/package.json +++ b/www/package.json @@ -18,6 +18,7 @@ "gatsby-source-filesystem": "^1.5.9", "gatsby-transformer-remark": "^1.7.23", "gzip-size": "^4.1.0", + "html2canvas": "1.0.0-alpha.3", "mkdirp": "^0.5.1", "typography": "^0.16.6", "typography-theme-github": "^0.15.10" diff --git a/www/src/components/example.css b/www/src/components/example.css new file mode 100644 index 0000000..e69de29 diff --git a/www/src/components/example.js b/www/src/components/example.js new file mode 100644 index 0000000..54fac83 --- /dev/null +++ b/www/src/components/example.js @@ -0,0 +1,201 @@ +import React, {Component} from 'react'; +import './example.css'; +import icon from '../images/ic_camera_alt_black_24px.svg'; +import close from '../images/ic_close_black_24px.svg'; +import html2canvas from 'html2canvas'; + +class CanvasContainer extends Component { + constructor(props) { + super(props); + this.state = {open: false, complete: false}; + } + + componentDidMount() { + if (this.container) { + this.container.appendChild(this.props.canvas); + setTimeout(() => { + this.props.canvas.style.opacity = '1'; + this.props.canvas.style.transform = 'scale(0.8)'; + }, 10); + } + } + + render() { + return ( +
(this.container = container)} + onClick={() => this.props.onClose()} + > + +
+ ); + } +} + +export default class Example extends Component { + constructor(props) { + super(props); + this.state = {open: false, canvas: null}; + } + + render() { + return ( +
+ {this.state.canvas + ? this.setState({canvas: null})} + /> + : null} +
+
+
this.setState(({open}) => ({open: !open}))} + > + +
+
+
+
+

Try out html2canvas

+

+ Test out html2canvas by rendering the viewport from the current + page. +

+
{ + html2canvas(document.body, { + allowTaint: true, + width: window.innerWidth, + height: window.innerHeight, + scrollX: window.pageXOffset, + scrollY: window.pageYOffset, + x: window.pageXOffset, + y: window.pageYOffset + }) + .then(canvas => { + this.setState({canvas}); + + canvas.style.position = 'fixed'; + canvas.style.top = '0'; + canvas.style.left = '0'; + canvas.style.opacity = '0'; + canvas.style.transform = 'scale(0)'; + canvas.style.zIndex = '99999999'; + canvas.style.transition = + 'transform 0.3s cubic-bezier(0.42, 0, 0.58, 1),opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1)'; + }) + .catch(e => { + console.log(e); + }); + }} + > + Capture +
+
+
+
+
+ ); + } +} diff --git a/www/src/images/ic_camera_alt_black_24px.svg b/www/src/images/ic_camera_alt_black_24px.svg new file mode 100644 index 0000000..7d28ebc --- /dev/null +++ b/www/src/images/ic_camera_alt_black_24px.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/www/src/images/ic_close_black_24px.svg b/www/src/images/ic_close_black_24px.svg new file mode 100644 index 0000000..4bc46d3 --- /dev/null +++ b/www/src/images/ic_close_black_24px.svg @@ -0,0 +1,4 @@ + + + + diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js index 7977bfa..66d7039 100644 --- a/www/src/layouts/index.js +++ b/www/src/layouts/index.js @@ -3,11 +3,13 @@ import PropTypes from 'prop-types'; import Helmet from 'react-helmet'; require('prismjs/themes/prism-solarizedlight.css'); import './index.css'; +import Example from '../components/example'; const TemplateWrapper = ({children}) =>
{children()} +
; TemplateWrapper.propTypes = { diff --git a/www/src/pages/index.js b/www/src/pages/index.js index c661b56..b05a52f 100644 --- a/www/src/pages/index.js +++ b/www/src/pages/index.js @@ -87,7 +87,16 @@ export default ({data}) => {
- Try it out + { + e.preventDefault(); + document.querySelector('#tryhtml2canvas').click(); + }} + > + Try it out + Documentation