A jQuery plugin provides color sampler function for Canvas.
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
samples/demo
src
.gitignore
CHANGELOG.md
LICENSE.txt
README.md
bower.json
gulpfile.js
package.json

README.md

color-sampler

A jQuery plugin provides color sampler function for Canvas.

Download

Compress JS
Compress CSS
Uncompress JS
Uncompress CSS

Installation

You can also install color-sampler by using Bower.

bower install color-sampler

Demo

Demo

Usage

You could just use jQuery bind, delegate or on to listen event. HTML

<canvas id="#canvas">
</canvas>

JavaScript

$('#canvas').colorSampler({
  onPreview: function (color) {
    // ... or sampler:preview event
  },
  onSelect: function (color) {
    // ... or sampler:select event
  }
});

Events

sampler:preview

Preview event.

sampler:preview

Select event.

Methods

enable()

Enable the color sampler function.

disable()

Disable the color sampler function.

resize()

When timer is disabled, call this method to tell color sampler that canvas size change.

$.colorSampler.setInterval(inverval)

Set interval of timer that check canvas resize.

inverval: Number (default: 50)

Interval of timer. Set 0 to disable timer, and you can use resize() to update manually.

Example

$('#canvas').colorSampler('enable');
$('#canvas').colorSampler('disable');
$('#canvas').colorSampler('resize');
$('#canvas').bind('sampler:preview', function (e, color) {
  // ...
});
$('#canvas').bind('sampler:select', function (e, color) {
  // ...
});
// disable timer
$.colorSampler.setInterval(0);

License

The project is released under the MIT license.

Contact

The project's website is located at https://github.com/emn178/color-sampler
Author: Chen, Yi-Cyuan (emn178@gmail.com)