scala-news-reader

colorwheel.js

(2043B)

 $(function(){
     var bCanPreview = true; // can preview
 
     // create canvas and context objects
     var colorpicker = $('#colorpicker-wrapper').find('.colorpicker');
     var preview = $('#colorpicker-wrapper').find('.preview');
     var canvas = $('#colorpicker-wrapper').find("#picker");
 
     var picker = document.getElementById("picker");
     var ctx;
     if(typeof picker !== 'undefined' && picker !== null) {
        ctx = picker.getContext('2d');
     }
 
     // drawing active image
     var image = new Image();
     image.onload = function () {
         if(typeof ctx !== 'undefined' && ctx !== null) {
           ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas
         }
     }
 
     // select desired colorwheel
     var imageSrc = '/img/colorwheel.png';
     image.crossOrigin='anonymous';
     image.src = imageSrc;
 
     canvas.mousemove(function(e) { // mouse move handler
         if (bCanPreview) {
             // get coordinates of current position
             var canvasOffset = $(canvas).offset();
             var canvasX = Math.floor(e.pageX - canvasOffset.left);
             var canvasY = Math.floor(e.pageY - canvasOffset.top);
 
             if(typeof ctx !== 'undefined' && ctx !== null) {
                  // get current pixel
                  var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
                  var pixel = imageData.data;
 
                  // update preview color
                  var pixelColor = "rgb("+pixel[0]+", "+pixel[1]+", "+pixel[2]+")";
                  preview.css('backgroundColor', pixelColor);
 
                  var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];
                  $('#colorpicker-wrapper').find('#hexVal').val('#' + ('0000' + dColor.toString(16)).substr(-6));
             }
         }
     });
     canvas.click(function(e) { // click event handler
         bCanPreview = !bCanPreview;
     });
     preview.click(function(e) { // preview click
         colorpicker.fadeToggle("fast", "linear");
         bCanPreview = true;
     });
 });