Add confirmation before converting really big images

Author: javierbyte

README.md

@@ -13,10 +13,14 @@ Well, it just puts the image in a canvas, calculates an array with the rgb value
 ## Why?
 Hum... to demonstrate the power of CSS!
 
-And this may have another interesting properties, like creating loading screens with pixel art.
+And this may have other interesting properties, like creating loading screens with pixel art or pixel-level animation.
 
 ## Planned features
 * Make the result smaller with smarter shadows and common background detection. (In progress)
 * Make animation and image morphing by using css transitions on the shadows. (In progress)
 * Add scale options to better suport pixel art.
-* Support for custom image filters.
+* Support for custom image filters.
+
+## Development
+Run development server:
+  npm start

src/App.js

@@ -47,6 +47,17 @@ export const App = React.createClass({
     fr.onload = (data) => {
       const base64 = data.currentTarget.result
 
+      if (base64.length > 100000) {
+        let confirmation = confirm('Your image is really big, do you really want to try to convert it?')
+
+        if(!confirmation) {
+          this.setState({
+            loadingImage: false
+          })
+          return
+        }
+      }
+
       base64ImageToRGBArray(base64, (err, data) => {
         if (err) return console.error(err)
 

src/lib/base64ImageToRGBArray.js

@@ -1,6 +1,6 @@
 var base64ImageToRGBArray = function (base64, callback) {
   var img = new window.Image()
-  img.onload = () => {
+  img.onload = function onImageLoad() {
     var canvas = document.createElement('canvas')
     var ctx
     var data