dropZone = document.getElementById "drop" handleFileSelect = (event) -> event.stopPropagation() event.preventDefault() files = event.dataTransfer.files f = files[0] reader = new FileReader progress = (event) -> image = new Image(200, 200) image.src = event.target.result document.getElementById("image").innerHTML = "<img src='#{event.target.result}' />" # https://jariz.github.io/vibrant.js/ vibrant = new Vibrant(image) swatches = vibrant.swatches() for swatch of swatches if swatches.hasOwnProperty(swatch) and swatches[swatch] for el in document.querySelectorAll ".color#{swatch}" el.style.backgroundColor = swatches[swatch].getHex() parseFile = (theFile) -> progress reader.onload = parseFile(f) data = reader.readAsDataURL(f) handleDragOver = (event) -> event.stopPropagation() event.preventDefault() event.dataTransfer.dropEffect = "copy" dropZone.addEventListener "dragover", handleDragOver, false dropZone.addEventListener "drop", handleFileSelect, false
<div id="details" class="colorVibrant"> <div id="image"></div> <span class="swatch colorVibrant"></span> <span class="swatch colorMuted"></span> <span class="swatch colorDarkVibrant"></span> <span class="swatch colorDarkMuted"></span> <span class="swatch colorLightVibrant"></span> <div id="drop">Drop an image here <small>(Looks like reading an uploaded image works in Chrome only)</small></div> </div>
@import url(//fonts.googleapis.com/css?family=Open+Sans); body { font-family: "Open Sans"; } small { display: block; font-size: 12px; padding-top: 10px; } #drop { border: dashed 1px rgba(#000, 0.5); padding: 40px 0; margin: 20px; text-align: center; border-radius: 5px; color: rgba(#000, 0.5); } img { width: 55%; } #image { margin-bottom: 20px; } #details { padding: 10px; text-align: center; height: 100vh; -webkit-transition: 1s; -moz-transition: 1s; } .swatch { display: inline-block; height: 40px; width: 40px; border: solid 1px rgba(#000, 0.3); border-radius: 50px; -webkit-transition: 1s; -moz-transition: 1s; }