refactor

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 yarn.lock
 npm-debug.log
+.DS_Store

src/app/eye-dropper.js

@@ -11,12 +11,20 @@ class EyeDropper extends Component {
   }
   eyeDropper = (e) => {
     const {initializedColor} = this.props
-    html2canvas(e.target, {
+    html2canvas(e.toElement, {
       onrendered: function (canvas) {
+        //console.log(e.toElement)
+        //console.log(canvas)
         const x = e.offsetX==undefined ? e.layerX: e.offsetX
         const y = e.offsetY==undefined ? e.layerY: e.offsetY
-        const { r, g, b } = getCanvasPixelColor(canvas, x, y)
+        console.log(getCanvasPixelColor(canvas, x, y))
+        const { r, g, b, a } = getCanvasPixelColor(canvas, x, y)
+        if(a === 0){
+          initializedColor({ r:255, g: 255, b: 255 })
+          return
+        }
         initializedColor({ r, g: b, b: g })
+        console.log(a)
       }
     })
     document.body.style.cursor = 'default'

src/index.js

@@ -21,6 +21,7 @@ class App extends Component {
           <div className="container fourth">rgb(15, 124, 138)</div>
           <div className="container fifth">rgb(15, 44, 138)</div>
           <div className="container sixth">rgb(219, 238, 97)</div>
+          <div className="container sevent">rgb(219, 238, 97)</div>
           <div className="container seventch">gradient</div>
         </div>
           <div className="result">

style.css

@@ -38,7 +38,7 @@
   background: rgb(106, 124, 0);
 }
 .third {
-  background: rgb(106, 124, 138);
+  background: rgba(106, 124, 138, 0.5);
 }
 .fourth {
   background: rgb(15, 124, 138);
@@ -49,7 +49,10 @@
 .sixth {
   background: rgb(219, 238, 97);
 }
-
+.sevent {
+  background: rgb(0, 0, 0);
+  font: red;
+}
  .seventch {
    font-family: 'Open Sans', sans-serif;
    background: #092756;