Skip to content

Commit 3ac8b13

Browse files
javierbytejavierbyte
committed
Initial commit
0 parents  commit 3ac8b13

File tree

13 files changed

+371
-0
lines changed

13 files changed

+371
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# img2css
2+
3+
Convert any image to pure css.

‎devServer.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
var path = require('path')
2+
var express = require('express')
3+
var webpack = require('webpack')
4+
var config = require('./webpack.config.dev')
5+
6+
var app = express()
7+
var compiler = webpack(config)
8+
9+
app.use(require('webpack-dev-middleware')(compiler, {
10+
noInfo: true,
11+
publicPath: config.output.publicPath
12+
}))
13+
14+
app.use(require('webpack-hot-middleware')(compiler))
15+
16+
app.use('/style', express.static(path.join(__dirname, 'style')))
17+
18+
app.get('*', function (req, res) {
19+
res.sendFile(path.join(__dirname, 'index.html'))
20+
})
21+
22+
app.listen(3000, 'localhost', function (err) {
23+
if (err) {
24+
console.log(err)
25+
return
26+
}
27+
28+
console.log('Listening at http://localhost:3000')
29+
})

‎index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Css Pic</title>
5+
<link rel="stylesheet" href="/style/main.css">
6+
</head>
7+
<body>
8+
<div id='root'>
9+
</div>
10+
<script src="/static/bundle.js"></script>
11+
</body>
12+
</html>

‎package.json‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "img2css",
3+
"version": "0.0.1",
4+
"description": "Convert any image to pure css.",
5+
"scripts": {
6+
"clean": "rimraf dist",
7+
"build:webpack": "NODE_ENV=production webpack --config webpack.config.prod.js",
8+
"build": "npm run clean && npm run build:webpack",
9+
"start": "node devServer.js"
10+
},
11+
"repository": {
12+
"type": "git",
13+
"url": "https://github.com/javierbyte/img2css.git"
14+
},
15+
"keywords": [
16+
"react",
17+
"reactjs",
18+
"css",
19+
"picture"
20+
],
21+
"author": "Javier Bórquez <hi@javier.xyz> (http://github.com/javierbyte)",
22+
"license": "CC0-1.0",
23+
"bugs": {
24+
"url": "https://github.com/javierbyte/img2css/issues"
25+
},
26+
"homepage": "https://github.com/javierbyte/img2css",
27+
"devDependencies": {
28+
"babel-core": "^5.4.7",
29+
"babel-loader": "^5.1.2",
30+
"babel-plugin-react-transform": "^1.1.1",
31+
"express": "^4.13.3",
32+
"react-transform-catch-errors": "^1.0.0",
33+
"react-transform-hmr": "^1.0.0",
34+
"redbox-react": "^1.0.1",
35+
"rimraf": "^2.4.3",
36+
"webpack": "^1.9.6",
37+
"webpack-dev-middleware": "^1.2.0",
38+
"webpack-hot-middleware": "^2.0.0"
39+
},
40+
"dependencies": {
41+
"lodash": "^3.10.1",
42+
"react": "^0.13.0",
43+
"react-dropzone": "^2.2.1"
44+
}
45+
}

‎src/App.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react'
2+
3+
var _ = require('lodash')
4+
var Dropzone = require('react-dropzone')
5+
6+
var base64ImageToRGBArray = require('./lib/base64ImageToRGBArray')
7+
8+
export const App = React.createClass({
9+
10+
getInitialState () {
11+
return {
12+
rgbArray: null
13+
}
14+
},
15+
16+
onDrop (files) {
17+
var file = files[0]
18+
var fr = new window.FileReader()
19+
fr.onload = (data) => {
20+
const base64 = data.currentTarget.result
21+
22+
base64ImageToRGBArray(base64, (err, data) => {
23+
if (err) return console.error(err)
24+
25+
this.setState({
26+
rgbArray: data
27+
})
28+
})
29+
}
30+
fr.readAsDataURL(file)
31+
},
32+
33+
render () {
34+
var {rgbArray} = this.state
35+
36+
var masterShadow = _.map(rgbArray, (row, rowIndex) => {
37+
return _.map(row, (col, colIndex) => {
38+
return `rgb(${col.r}, ${col.g}, ${col.b}) ${colIndex}px ${rowIndex}px`
39+
}).join(',')
40+
}).join(',')
41+
42+
console.warn(masterShadow)
43+
44+
return (
45+
<div>
46+
<Dropzone onDrop={this.onDrop} className='dropZone'>
47+
<div>Drop image here, or click to upload.</div>
48+
</Dropzone>
49+
50+
<div className='pixel' style={{
51+
boxShadow: masterShadow
52+
}} />
53+
</div>
54+
)
55+
}
56+
})

‎src/components/ImageAsCanvas.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react'
2+
3+
var ImageAsCanvas = React.createClass({
4+
5+
propTypes: {
6+
base64image: React.PropTypes.string
7+
},
8+
9+
shouldComponentUpdate (nextProps) {
10+
return nextProps.base64image !== this.props.base64image
11+
},
12+
13+
componentDidMount () {
14+
if (this.props.base64image) this._loadImageToCanvas()
15+
},
16+
17+
componentDidUpdate () {
18+
this._loadImageToCanvas()
19+
},
20+
21+
_loadImageToCanvas () {
22+
var img = new window.Image()
23+
img.onload = () => {
24+
var canvas = React.findDOMNode(this.refs.canvas)
25+
canvas.width = img.width
26+
canvas.height = img.height
27+
var ctx = canvas.getContext('2d')
28+
ctx.drawImage(img, 0, 0)
29+
30+
console.warn(ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height))
31+
32+
// do some manipulations...
33+
34+
// canvas.toDataURL('image/png')
35+
}
36+
img.src = this.props.base64image
37+
},
38+
39+
render () {
40+
return (
41+
<canvas ref='canvas' />
42+
)
43+
}
44+
})
45+
46+
module.exports = ImageAsCanvas

‎src/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import React from 'react'
2+
import { App } from './App'
3+
4+
React.render(<App />, document.getElementById('root'))

‎src/lib/base64ImageToRGBArray.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
var base64ImageToRGBArray = function (base64, callback) {
2+
var img = new window.Image()
3+
img.onload = () => {
4+
var canvas = document.createElement('canvas')
5+
var ctx
6+
var data
7+
var result
8+
9+
canvas.width = img.width
10+
canvas.height = img.height
11+
12+
ctx = canvas.getContext('2d')
13+
ctx.drawImage(img, 0, 0)
14+
15+
data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height).data
16+
17+
result = []
18+
for (let y = 0; y < canvas.height; y++) {
19+
result[y] = []
20+
for (let x = 0; x < canvas.width; x++) {
21+
result[y][x] = {
22+
r: data[y * canvas.width * 4 + x * 4],
23+
g: data[y * canvas.width * 4 + x * 4 + 1],
24+
b: data[y * canvas.width * 4 + x * 4 + 2],
25+
a: data[y * canvas.width * 4 + x * 4 + 3]
26+
}
27+
}
28+
}
29+
30+
callback(null, result)
31+
}
32+
img.src = base64
33+
}
34+
35+
module.exports = base64ImageToRGBArray

‎style/main.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@import 'san-francisco.css';
2+
3+
* {
4+
padding: 0;
5+
margin: 0;
6+
position: relative;
7+
}
8+
9+
body {
10+
font-family: 'San Francisco', serif;
11+
font-weight: 300;
12+
}
13+
14+
.pixel {
15+
height: 1px;
16+
width: 1px;
17+
background: #000;
18+
float: left;
19+
}
20+
21+
.dropZone {
22+
height: 200px;
23+
width: 200px;
24+
margin: 1em;
25+
display: flex;
26+
text-align: center;
27+
align-items: center;
28+
border: 2px dashed #ccc;
29+
padding: 2em;
30+
cursor: pointer;
31+
}
32+
33+
34+
.cf:before,
35+
.cf:after {
36+
content: " "; /* 1 */
37+
display: table; /* 2 */
38+
}
39+
40+
.cf:after {
41+
clear: both;
42+
}

0 commit comments

Comments
 (0)