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/
|
||||
docs/
|
||||
examples/
|
||||
scripts/
|
||||
src/
|
||||
tests/
|
||||
www/
|
||||
.github/
|
||||
*.iml
|
||||
.babelrc
|
||||
.idea/
|
||||
.editorconfig
|
||||
.npmignore
|
||||
.eslintrc
|
||||
.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",
|
||||
"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",
|
||||
|
||||
@ -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"
|
||||
|
||||
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';
|
||||
require('prismjs/themes/prism-solarizedlight.css');
|
||||
import './index.css';
|
||||
import Example from '../components/example';
|
||||
|
||||
const TemplateWrapper = ({children}) =>
|
||||
<div>
|
||||
<Helmet title="html2canvas - Screenshots with JavaScript" />
|
||||
{children()}
|
||||
<Example />
|
||||
</div>;
|
||||
|
||||
TemplateWrapper.propTypes = {
|
||||
|
||||
@ -87,7 +87,16 @@ export default ({data}) => {
|
||||
</div>
|
||||
|
||||
<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}>
|
||||
Documentation
|
||||
</Link>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user