mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
Update website demo
This commit is contained in:
Niklas von Hertzen
parent
c272b2e122
commit
0b74e69611
@ -1,12 +1,15 @@
|
|||||||
build/
|
build/
|
||||||
|
docs/
|
||||||
examples/
|
examples/
|
||||||
scripts/
|
scripts/
|
||||||
src/
|
src/
|
||||||
tests/
|
tests/
|
||||||
|
www/
|
||||||
.github/
|
.github/
|
||||||
*.iml
|
*.iml
|
||||||
.babelrc
|
.babelrc
|
||||||
.idea/
|
.idea/
|
||||||
|
.editorconfig
|
||||||
.npmignore
|
.npmignore
|
||||||
.eslintrc
|
.eslintrc
|
||||||
.travis.yml
|
.travis.yml
|
||||||
|
|||||||
@ -1,9 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "html2canvas",
|
|
||||||
"description": "Screenshots with JavaScript",
|
|
||||||
"main": "dist/html2canvas.js",
|
|
||||||
"ignore": [
|
|
||||||
"tests",
|
|
||||||
".travis.yml"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
8
www/package-lock.json
generated
8
www/package-lock.json
generated
@ -4894,6 +4894,14 @@
|
|||||||
"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.2.tgz",
|
||||||
"integrity": "sha1-nSLgyjKsyVs/RbjVtPb73AWv/VU="
|
"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": {
|
"htmlparser2": {
|
||||||
"version": "3.3.0",
|
"version": "3.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.3.0.tgz",
|
||||||
|
|||||||
@ -18,6 +18,7 @@
|
|||||||
"gatsby-source-filesystem": "^1.5.9",
|
"gatsby-source-filesystem": "^1.5.9",
|
||||||
"gatsby-transformer-remark": "^1.7.23",
|
"gatsby-transformer-remark": "^1.7.23",
|
||||||
"gzip-size": "^4.1.0",
|
"gzip-size": "^4.1.0",
|
||||||
|
"html2canvas": "1.0.0-alpha.3",
|
||||||
"mkdirp": "^0.5.1",
|
"mkdirp": "^0.5.1",
|
||||||
"typography": "^0.16.6",
|
"typography": "^0.16.6",
|
||||||
"typography-theme-github": "^0.15.10"
|
"typography-theme-github": "^0.15.10"
|
||||||
|
|||||||
0
www/src/components/example.css
Normal file
0
www/src/components/example.css
Normal file
201
www/src/components/example.js
Normal file
201
www/src/components/example.js
Normal file
@ -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 (
|
||||||
|
<div
|
||||||
|
css={{
|
||||||
|
background: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
zIndex: '99999998',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%'
|
||||||
|
}}
|
||||||
|
ref={container => (this.container = container)}
|
||||||
|
onClick={() => this.props.onClose()}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={close}
|
||||||
|
css={{position: 'absolute', right: '20px', top: '20px', cursor: 'pointer'}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Example extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {open: false, canvas: null};
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div data-html2canvas-ignore>
|
||||||
|
{this.state.canvas
|
||||||
|
? <CanvasContainer
|
||||||
|
canvas={this.state.canvas}
|
||||||
|
onClose={() => this.setState({canvas: null})}
|
||||||
|
/>
|
||||||
|
: null}
|
||||||
|
<div
|
||||||
|
css={{
|
||||||
|
width: '800px',
|
||||||
|
height: '800px',
|
||||||
|
position: 'fixed',
|
||||||
|
zIndex: '1000',
|
||||||
|
right: '-348.4px',
|
||||||
|
bottom: '-327.2px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
css={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: '344px',
|
||||||
|
left: '344px',
|
||||||
|
width: '112px',
|
||||||
|
height: '112px',
|
||||||
|
borderRadius: '50%',
|
||||||
|
zIndex: 100001,
|
||||||
|
':before': {
|
||||||
|
content: ' ',
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
borderRadius: '50%',
|
||||||
|
position: 'absolute',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
opacity: this.state.open ? 1 : 0,
|
||||||
|
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)',
|
||||||
|
transform: this.state.open ? 'scale(1)' : 'scale(0)'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
id="tryhtml2canvas"
|
||||||
|
css={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
width: '56px',
|
||||||
|
height: '56px',
|
||||||
|
backgroundColor: '#33691e',
|
||||||
|
position: 'absolute',
|
||||||
|
left: '50%',
|
||||||
|
top: '50%',
|
||||||
|
cursor: 'pointer',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
borderRadius: '50%',
|
||||||
|
boxShadow:
|
||||||
|
'0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2)'
|
||||||
|
}}
|
||||||
|
onClick={() => this.setState(({open}) => ({open: !open}))}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={icon}
|
||||||
|
css={{
|
||||||
|
width: '30px',
|
||||||
|
height: '30px',
|
||||||
|
flex: 1,
|
||||||
|
margin: 0
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
css={{
|
||||||
|
backgroundColor: '#33691e',
|
||||||
|
borderRadius: '50%',
|
||||||
|
opacity: this.state.open ? 0.95 : 0,
|
||||||
|
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)',
|
||||||
|
transform: this.state.open ? 'scale(1)' : 'scale(0)',
|
||||||
|
position: 'absolute',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
zIndex: 100000
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
css={{
|
||||||
|
width: '456px',
|
||||||
|
height: '600px',
|
||||||
|
right: '56px',
|
||||||
|
bottom: '56px',
|
||||||
|
padding: '56px',
|
||||||
|
position: 'fixed',
|
||||||
|
left: 0,
|
||||||
|
color: '#fff'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h4>Try out html2canvas</h4>
|
||||||
|
<p css={{color: '#fff'}}>
|
||||||
|
Test out html2canvas by rendering the viewport from the current
|
||||||
|
page.
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
css={{
|
||||||
|
padding: '4px 8px',
|
||||||
|
margin: '10px',
|
||||||
|
border: '2px solid #fff',
|
||||||
|
color: '#fff',
|
||||||
|
display: 'inline-block',
|
||||||
|
cursor: 'pointer'
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
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
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
5
www/src/images/ic_camera_alt_black_24px.svg
Normal file
5
www/src/images/ic_camera_alt_black_24px.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<svg fill="#ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="12" cy="12" r="3.2"/>
|
||||||
|
<path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/>
|
||||||
|
<path d="M0 0h24v24H0z" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 356 B |
4
www/src/images/ic_close_black_24px.svg
Normal file
4
www/src/images/ic_close_black_24px.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg fill="#ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
|
||||||
|
<path d="M0 0h24v24H0z" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 266 B |
@ -3,11 +3,13 @@ import PropTypes from 'prop-types';
|
|||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
require('prismjs/themes/prism-solarizedlight.css');
|
require('prismjs/themes/prism-solarizedlight.css');
|
||||||
import './index.css';
|
import './index.css';
|
||||||
|
import Example from '../components/example';
|
||||||
|
|
||||||
const TemplateWrapper = ({children}) =>
|
const TemplateWrapper = ({children}) =>
|
||||||
<div>
|
<div>
|
||||||
<Helmet title="html2canvas - Screenshots with JavaScript" />
|
<Helmet title="html2canvas - Screenshots with JavaScript" />
|
||||||
{children()}
|
{children()}
|
||||||
|
<Example />
|
||||||
</div>;
|
</div>;
|
||||||
|
|
||||||
TemplateWrapper.propTypes = {
|
TemplateWrapper.propTypes = {
|
||||||
|
|||||||
@ -87,7 +87,16 @@ export default ({data}) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div css={{margin: '20px'}}>
|
<div css={{margin: '20px'}}>
|
||||||
<Link css={linkStyle}>Try it out</Link>
|
<a
|
||||||
|
href="#"
|
||||||
|
css={linkStyle}
|
||||||
|
onClick={e => {
|
||||||
|
e.preventDefault();
|
||||||
|
document.querySelector('#tryhtml2canvas').click();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Try it out
|
||||||
|
</a>
|
||||||
<Link to={'/documentation'} css={linkStyle}>
|
<Link to={'/documentation'} css={linkStyle}>
|
||||||
Documentation
|
Documentation
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user