Drag and (Eye) Drop

1. drag and drop an image onto the page [the image will become visible on the page] 2. click within the image to discover the colour of that pixel [a colour picker will appear on that colour] 3. click outside of the colour picker to select a different pixel [the colour picker will disappear and you will return to the original image] Note: you may drag and drop a new image to the page at any time

by Chris Watson

HTML

<canvas id="dropCanvas" width="100" height="100" dropzone="copy file:image/jpg image/png image/gif"></canvas>
<div id="picker"></div>

CSS

html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#dropCanvas{
    /*border: 5px dashed transparent;*/
    background: #BDBEDB;
    display: block;
}
#picker{
    position:absolute;
    top:0;
    left:0;
    width:1px;
    height:1px;
}


/************************************
 *  - mooRainbow: defaultCSS
 * author: w00fz <[email protected]>
 ************************************/

#mooRainbow { font-size: 11px; color: #000; }

.moor-box {
    width: 390px; 
    height: 310px; 
    border: 1px solid #636163; 
    background-color: #f9f9f9;
}
.moor-overlayBox {
    width: 256px; /* Width and Height of the overlay must be setted here: default 256x256 */
    height: 256px; 
    margin-top: 9px; 
    margin-left: 9px;
    border: 1px solid #000;
}
.moor-slider {
    border: 1px solid #000;
    margin-top: 9px; 
    margin-left: 280px;
    width: 19px; /* if you want a bigger or smaller slider... */
    height: 256px;
}
.moor-colorBox {
    border: 1px solid #000; 
    width: 59px; 
    height: 68px; 
    margin-top: 20px; 
    margin-left: 315px;
}
.moor-currentColor { /* Bottom Box Color, the backup one */
    margin-top: 55px; 
    margin-left: 316px; 
    width: 59px; 
    height: 34px;
}
.moor-okButton {
    font-family: Tahoma;
    font-weight: bold;
    font-size: 11px;
    margin-top: 278px;
    margin-left: 8px;
    background: #e6e6e6;
    height: 23px;
    border: 1px solid #d6d6d6;
    border-left-color: #f5f5f5;
    border-top-color: #f5f5f5;
}
#mooRainbow label {
    font-family: mono;
}
/* Following are just <label> */
.moor-rLabel {
    margin-top: 100px;
    margin-left: 315px;
}
.moor-gLabel {
    margin-top: 125px;
    margin-left: 315px;
}
.moor-bLabel {
    margin-top: 150px;
    margin-left: 315px;
}
.moor-HueLabel {
    margin-top: 190px;
    margin-left: 315px;
}
span.moor-ballino { /* Style hue ° (degree) !! */
    margin-top: 190px;
    margin-left: 370px;
}
.moor-SatuLabel {
    margin-top: 215px;
   ...

JavaScript

document.title = "Drag & (Eye) Drop - by Chris Watson";
var canvas = document.getElementById("dropCanvas");
fillCanvasToPage();
var context = canvas.getContext("2d");
showMessage('drag image here', 0);
var loadedImage;
var pickerEl = document.getElementById('picker');
var pickerObj;

canvas.ondrop = function(drpEvt){
    showMessage('loading...', 1);
    this.style.borderColor = 'transparent';
    drpEvt.preventDefault();
    var file = drpEvt.dataTransfer.files[0];
    if(file.type.indexOf('image') != -1){
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(rdrEvt){
            var imgData = rdrEvt.target.result;
            var img = new Image();
            img.src = imgData;
            img.onload = function(){
                loadedImage = img;
                drawImage(img);
            };
        };
        if(pickerObj == null)
            pickerObj = new MooRainbow('picker');
    }
};

canvas.ondragover = function(){
    //this.style.borderColor = '#09f';
    //this.style.cursor = 'move';
    if(pickerObj != null)
        pickerObj.hide();
    showMessage('drop '
              +(loadedImage != null ? 'new ' : '')
              +'image here', 1);
};
    
canvas.ondragleave = function(){
    //this.style.borderColor = 'transparent';
    showMessage('drag image here', 0);
    if(loadedImage != null){
        clear();
        drawImage(loadedImage);
    }
};

canvas.onmousemove = function(evt){
    if(loadedImage != null){
        var x = evt.pageX, y = evt.pageY;
        pickerEl.style.top = y + "px";
        pickerEl.style.left = x + "px";
    }
};
    
pickerEl.onclick = function(evt){
    if(loadedImage != null){
        var x = evt.pageX, y = evt.pageY;
        var imgData = context.getImageData(x, y, 1, 1).data;
        /*if(!pickerObj.isVisible()){
            context.fillStyle = 'rgba(255, 255, 255, 0.5)';
            context.fillRect(0, 0, canvas.width, canvas.height);
           ...