Update to use base64-image-utils

Author: javierbyte

index.html

@@ -23,6 +23,8 @@ <h1>img2css.</h1>
     <div id='root'></div>
 
     <div class="padding-2x">
+      Want a programatic way to do this? Look at <a target="_blank" href="https://github.com/javierbyte/base64-image-utils">base64-image-utils.</a>
+      <br>
       Created by <a href='http://github.com/javierbyte/'>javierbyte</a>.
       <br /><br />
       <a href="https://twitter.com/javierbyte" class="twitter-follow-button" data-show-count="true">Follow @javierbyte</a>

package.json

@@ -38,6 +38,7 @@
     "webpack-hot-middleware": "^2.0.0"
   },
   "dependencies": {
+    "base64-image-utils": "^0.1.0",
     "lodash": "^3.10.1",
     "react": "^0.13.0",
     "react-dropzone": "^2.2.1",

src/App.js

@@ -1,10 +1,10 @@
-import React from 'react'
-import tinycolor from 'tinycolor2'
+var React = require('react');
+var tinycolor = require('tinycolor2');
 
 var _ = require('lodash')
 var Dropzone = require('react-dropzone')
 
-var base64ImageToRGBArray = require('./lib/base64ImageToRGBArray')
+var {base64ImageToRGBMatrix} = require('base64-image-utils')
 
 function compressColor (rgb) {
   var hex = tinycolor(rgb).toHexString()
@@ -58,11 +58,11 @@ export const App = React.createClass({
         }
       }
 
-      base64ImageToRGBArray(base64, (err, data) => {
+      base64ImageToRGBMatrix(base64, (err, data) => {
         if (err) return console.error(err)
 
         this.setState({
-          rgbArray: data,
+          rgbMatrix: data,
           loadingImage: false
         })
       })
@@ -71,9 +71,9 @@ export const App = React.createClass({
   },
 
   render () {
-    var {rgbArray, loadingImage} = this.state
+    var {rgbMatrix, loadingImage} = this.state
 
-    var masterShadow = _.map(rgbArray, (row, rowIndex) => {
+    var masterShadow = _.map(rgbMatrix, (row, rowIndex) => {
       return _.map(row, (col, colIndex) => {
         var color = compressColor(`rgb(${col.r},${col.g},${col.b})`)
 
@@ -88,7 +88,7 @@ export const App = React.createClass({
           {loadingImage ? 'Processing...' : 'Drop an image here, or click to upload.'}
         </Dropzone>
 
-        {rgbArray && (
+        {rgbMatrix && (
           <div>
             <div className='tutorial'>
               This is your pure css (and single div) image! Enjoy! {masterShadow.length.toLocaleString()}b
@@ -98,7 +98,7 @@ export const App = React.createClass({
               height: 1,
               width: 1,
               boxShadow: masterShadow,
-              marginBottom: rgbArray.length
+              marginBottom: rgbMatrix.length
             }} />
 
             <div className='tutorial'>