Feature: Squared Image (#250)

* Added squared images feature

* Moved 'Squared image' to advanced dropdown
main
Mark Molnar 7 years ago committed by Jake Dexheimer
parent 3c0b3dd387
commit d044beb977

@ -239,6 +239,15 @@
"contributions": [ "contributions": [
"code" "code"
] ]
},
{
"login": "molnarmark",
"name": "Mark Molnar",
"avatar_url": "https://avatars2.githubusercontent.com/u/13263073?v=4",
"profile": "https://github.com/molnarmark",
"contributions": [
"code"
]
} }
] ]
} }

@ -77,5 +77,5 @@ Thanks goes out to all these wonderful people ([emoji key](https://github.com/ke
| :---: | :---: | :---: | :---: | :---: | :---: | :---: | | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [<img src="https://avatars1.githubusercontent.com/u/225946?v=4" width="100px;"/><br /><sub><b>otobrglez</b></sub>](https://github.com/otobrglez)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=otobrglez "Code") | [<img src="https://avatars3.githubusercontent.com/u/11488612?v=4" width="100px;"/><br /><sub><b>darahak</b></sub>](https://github.com/darahak)<br />[πŸ“–](https://github.com/dawnlabs/carbon/commits?author=darahak "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/246651?v=4" width="100px;"/><br /><sub><b>dom96</b></sub>](https://github.com/dom96)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=dom96 "Code") | [<img src="https://avatars3.githubusercontent.com/u/784056?v=4" width="100px;"/><br /><sub><b>elrumordelaluz</b></sub>](https://github.com/elrumordelaluz)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=elrumordelaluz "Code") | [<img src="https://avatars2.githubusercontent.com/u/21217?v=4" width="100px;"/><br /><sub><b>cjb</b></sub>](https://github.com/cjb)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=cjb "Code") | [<img src="https://avatars1.githubusercontent.com/u/5427083?v=4" width="100px;"/><br /><sub><b>Krzysztof-Cieslak</b></sub>](https://github.com/Krzysztof-Cieslak)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=Krzysztof-Cieslak "Code") | [<img src="https://avatars0.githubusercontent.com/u/2369851?v=4" width="100px;"/><br /><sub><b>fernahh</b></sub>](https://github.com/fernahh)<br />[πŸ“–](https://github.com/dawnlabs/carbon/commits?author=fernahh "Documentation") | | [<img src="https://avatars1.githubusercontent.com/u/225946?v=4" width="100px;"/><br /><sub><b>otobrglez</b></sub>](https://github.com/otobrglez)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=otobrglez "Code") | [<img src="https://avatars3.githubusercontent.com/u/11488612?v=4" width="100px;"/><br /><sub><b>darahak</b></sub>](https://github.com/darahak)<br />[πŸ“–](https://github.com/dawnlabs/carbon/commits?author=darahak "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/246651?v=4" width="100px;"/><br /><sub><b>dom96</b></sub>](https://github.com/dom96)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=dom96 "Code") | [<img src="https://avatars3.githubusercontent.com/u/784056?v=4" width="100px;"/><br /><sub><b>elrumordelaluz</b></sub>](https://github.com/elrumordelaluz)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=elrumordelaluz "Code") | [<img src="https://avatars2.githubusercontent.com/u/21217?v=4" width="100px;"/><br /><sub><b>cjb</b></sub>](https://github.com/cjb)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=cjb "Code") | [<img src="https://avatars1.githubusercontent.com/u/5427083?v=4" width="100px;"/><br /><sub><b>Krzysztof-Cieslak</b></sub>](https://github.com/Krzysztof-Cieslak)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=Krzysztof-Cieslak "Code") | [<img src="https://avatars0.githubusercontent.com/u/2369851?v=4" width="100px;"/><br /><sub><b>fernahh</b></sub>](https://github.com/fernahh)<br />[πŸ“–](https://github.com/dawnlabs/carbon/commits?author=fernahh "Documentation") |
| [<img src="https://avatars1.githubusercontent.com/u/10941033?v=4" width="100px;"/><br /><sub><b>g3r4n</b></sub>](https://github.com/g3r4n)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=g3r4n "Code") | [<img src="https://avatars0.githubusercontent.com/u/55830?v=4" width="100px;"/><br /><sub><b>Mat Gadd</b></sub>](http://drarok.com/)<br />[πŸ›](https://github.com/dawnlabs/carbon/issues?q=author%3ADrarok "Bug reports") [πŸ’»](https://github.com/dawnlabs/carbon/commits?author=Drarok "Code") | [<img src="https://avatars1.githubusercontent.com/u/11805775?v=4" width="100px;"/><br /><sub><b>Brad Davies</b></sub>](https://bradlab.co.uk)<br />[πŸ›](https://github.com/dawnlabs/carbon/issues?q=author%3Avarbrad "Bug reports") [πŸ’»](https://github.com/dawnlabs/carbon/commits?author=varbrad "Code") | [<img src="https://avatars1.githubusercontent.com/u/9087886?v=4" width="100px;"/><br /><sub><b>Rafael CΓ’mara</b></sub>](http://www.rafaelcamaram.com/)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=rafaelcamaram "Code") | [<img src="https://avatars1.githubusercontent.com/u/2212006?v=4" width="100px;"/><br /><sub><b>Gleb Bahmutov</b></sub>](https://glebbahmutov.com/)<br />[⚠️](https://github.com/dawnlabs/carbon/commits?author=bahmutov "Tests") [πŸ”§](#tool-bahmutov "Tools") | [<img src="https://avatars2.githubusercontent.com/u/10677789?v=4" width="100px;"/><br /><sub><b>IvΓ‘n MunguΓ­a</b></sub>](https://ivan-munguia.netlify.com)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=warborn "Code") | [<img src="https://avatars1.githubusercontent.com/u/2755722?v=4" width="100px;"/><br /><sub><b>Dillon Mulroy</b></sub>](https://dillonmulroy.com)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=dmmulroy "Code") | | [<img src="https://avatars1.githubusercontent.com/u/10941033?v=4" width="100px;"/><br /><sub><b>g3r4n</b></sub>](https://github.com/g3r4n)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=g3r4n "Code") | [<img src="https://avatars0.githubusercontent.com/u/55830?v=4" width="100px;"/><br /><sub><b>Mat Gadd</b></sub>](http://drarok.com/)<br />[πŸ›](https://github.com/dawnlabs/carbon/issues?q=author%3ADrarok "Bug reports") [πŸ’»](https://github.com/dawnlabs/carbon/commits?author=Drarok "Code") | [<img src="https://avatars1.githubusercontent.com/u/11805775?v=4" width="100px;"/><br /><sub><b>Brad Davies</b></sub>](https://bradlab.co.uk)<br />[πŸ›](https://github.com/dawnlabs/carbon/issues?q=author%3Avarbrad "Bug reports") [πŸ’»](https://github.com/dawnlabs/carbon/commits?author=varbrad "Code") | [<img src="https://avatars1.githubusercontent.com/u/9087886?v=4" width="100px;"/><br /><sub><b>Rafael CΓ’mara</b></sub>](http://www.rafaelcamaram.com/)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=rafaelcamaram "Code") | [<img src="https://avatars1.githubusercontent.com/u/2212006?v=4" width="100px;"/><br /><sub><b>Gleb Bahmutov</b></sub>](https://glebbahmutov.com/)<br />[⚠️](https://github.com/dawnlabs/carbon/commits?author=bahmutov "Tests") [πŸ”§](#tool-bahmutov "Tools") | [<img src="https://avatars2.githubusercontent.com/u/10677789?v=4" width="100px;"/><br /><sub><b>IvΓ‘n MunguΓ­a</b></sub>](https://ivan-munguia.netlify.com)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=warborn "Code") | [<img src="https://avatars1.githubusercontent.com/u/2755722?v=4" width="100px;"/><br /><sub><b>Dillon Mulroy</b></sub>](https://dillonmulroy.com)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=dmmulroy "Code") |
| [<img src="https://avatars2.githubusercontent.com/u/253398?v=4" width="100px;"/><br /><sub><b>Nihad Abbasov</b></sub>](https://github.com/NARKOZ)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=NARKOZ "Code") | [<img src="https://avatars1.githubusercontent.com/u/7328625?v=4" width="100px;"/><br /><sub><b>Hugo Torzuoli</b></sub>](https://torzuolih.github.io)<br />[πŸ“–](https://github.com/dawnlabs/carbon/commits?author=TorzuoliH "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/1906977?v=4" width="100px;"/><br /><sub><b>Bruno C. Couto</b></sub>](https://github.com/bruno02221)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=bruno02221 "Code") | | [<img src="https://avatars2.githubusercontent.com/u/253398?v=4" width="100px;"/><br /><sub><b>Nihad Abbasov</b></sub>](https://github.com/NARKOZ)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=NARKOZ "Code") | [<img src="https://avatars1.githubusercontent.com/u/7328625?v=4" width="100px;"/><br /><sub><b>Hugo Torzuoli</b></sub>](https://torzuolih.github.io)<br />[πŸ“–](https://github.com/dawnlabs/carbon/commits?author=TorzuoliH "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/1906977?v=4" width="100px;"/><br /><sub><b>Bruno C. Couto</b></sub>](https://github.com/bruno02221)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=bruno02221 "Code") | [<img src="https://avatars2.githubusercontent.com/u/13263073?v=4" width="100px;"/><br /><sub><b>Mark Molnar</b></sub>](https://github.com/molnarmark)<br />[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=molnarmark "Code") |
<!-- ALL-CONTRIBUTORS-LIST:END --> <!-- ALL-CONTRIBUTORS-LIST:END -->

@ -94,6 +94,11 @@ class Settings extends React.Component {
value={this.props.enabled.dropShadowBlurRadius || 68} value={this.props.enabled.dropShadowBlurRadius || 68}
onChange={this.props.onChange.bind(null, 'dropShadowBlurRadius')} onChange={this.props.onChange.bind(null, 'dropShadowBlurRadius')}
/> />
<Toggle
label="Squared image"
enabled={this.props.enabled.squaredImage}
onChange={this.props.onChange.bind(null, 'squaredImage')}
/>
<Toggle <Toggle
label="Reset settings" label="Reset settings"
enabled={false} enabled={false}

@ -101,11 +101,12 @@ class Editor extends React.Component {
const config = { const config = {
style: { style: {
transform: 'scale(2)', transform: 'scale(2)',
'transform-origin': 'center' 'transform-origin': 'center',
'background': (this.state.squaredImage) ? this.state.backgroundColor : 'none'
}, },
filter: n => (n.className ? String(n.className).indexOf('eliminateOnRender') < 0 : true), filter: n => (n.className ? String(n.className).indexOf('eliminateOnRender') < 0 : true),
width: node.offsetWidth * 2, width: node.offsetWidth * 2,
height: node.offsetHeight * 2 height: (this.state.squaredImage) ? node.offsetWidth * 2 : node.offsetHeight * 2
} }
return domtoimage.toPng(node, config) return domtoimage.toPng(node, config)

Loading…
Cancel
Save