Angular Eyedropper Directive

AngularJS Eyedropper tool directive with no dependencies.

Click on images to select color clicked on, like the Photoshop Eyedropper tool.

by Eddie Ferrer

View on Github

Basic Usage:

<eye-dropper img-src="{{logo}}" ng-model="eyedropperColor1"></eye-dropper>
Result Color:
{{ eyedropperColor1 }}

Change output to RGB:

<eye-dropper img-src="{{logo}}" ng-model="eyedropperColor2" output-format="rgb"></eye-dropper>
Result Color:
{{ eyedropperColor2 }}

Resize Image:

<eye-dropper img-src="{{logo}}" ng-model="eyedropperColor3" output-format="hex" height="200" width="200"></eye-dropper>
Result Color:
{{ eyedropperColor3 }}

Options Values (default values in bold)
output-format Optional
'hex', 'rgb'
Format of output color
ng-model Required
Angular model for the output color.
img-src Required
Image source url
height Optional
If height is provided, image will be resized to that height. If not original image height is used.
width Optional
If width is provided, image will be resized to that width. If not original image width is used.