The broilerjs's discuss from gordonlesti

View Code? Open in Web Editor NEW

A simple, lightweight jQuery plugin to get the color of an image pixel by click.

License: MIT License

JavaScript 51.25% HTML 48.75%

broilerjs's Issues

CORS issue resolved

This amend allows CORS allow origin to work, providing the correct Access-Control-Allow-Origin header is set, by creating a new image with the crossOrigin attribute set.

It reloads the image, but it's the only way I could get around it.

Note, as per the drdrek's solution, the tag also needs crossorigin="anonymous" to avoid browser caching issue

https://stackoverflow.com/questions/31732533/s3-cors-always-send-vary-origin

( function( factory ) {
   "use strict";
   if ( typeof define === "function" && define.amd ) {

       // AMD
       define( [ "jquery" ], factory );
   } else if ( typeof exports === "object" ) {

       // CommonJs
       factory( require( "jquery" ) );
   } else {

       // Browser globals
       factory( jQuery );
   }
}( function( $ ) {
   "use strict";

   $.fn.broiler = function( callBack ) {
       var image = this[ 0 ],
           canvas = $( "<canvas/>" )[ 0 ],
           imageData;

       var imgCanvas = new Image;
       imgCanvas.crossOrigin = "Anonymous";
       imgCanvas.onload = function() {
           canvas.width = imgCanvas.width;
           canvas.height = imgCanvas.height;
           canvas.getContext( "2d" ) .drawImage( imgCanvas, 0, 0, image.width, image.height );
           imageData = canvas.getContext( "2d" ).getImageData( 0, 0, imgCanvas.width, imgCanvas.height ).data;
           $(image).click( function( event ) {
               var offset = $( this ).offset(), x, y, scrollLeft, scrollTop, start;
               scrollLeft = $( window ).scrollLeft();
               scrollTop = $( window ).scrollTop();

               x = Math.round( event.clientX - offset.left + scrollLeft );
               y = Math.round( event.clientY - offset.top + scrollTop );
               start = ( x + y * imgCanvas.width ) * 4;
               callBack( {
                   r: imageData[ start ],
                   g: imageData[ start + 1 ],
                   b: imageData[ start + 2 ],
                   a: imageData[ start + 3 ]
               } );
           } );
       }

       imgCanvas.src = image.src;

       // make sure the load event fires for cached images too
       if ( imgCanvas.complete || imgCanvas.complete === undefined ) {
           imgCanvas.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
           imgCanvas.src = src;
       }
   };

} ) );

Recommend Projects