jQuery-Duotone

Installation

Install using Bower

bower install jquery-duotone

or get your copy of the jquery-duotone plugin.

Download Fork

Include the following resource on your page before initializing:

<script src="jquery.duotone.js"></script>

Options

Options are set by passing a valid options object at initialization or to the public "defaults" method. You can also set the gradient map option for a specific instance by attaching a data-gradient-map attribute containing a properly formatted CSS linear gradients.

Methods

Methods are publicly available to all active instances, unless otherwise stated.

defaults

Sets default plugin options

$("img").duotone("defaults", opts);

reset

Resets instance back to original image

$("img").duotone("reset");

process

Process the image to a duotone image

$("img").duotone("process");

Exemples

Pass your gradient map as an option of the plugin:

<img src="your-image.jpg">
<script>
  $(document).ready(function() {
    $('img').duotone({
      gradientMap: '#0000FF, #FFFFFF'
    });
  });
</script>

Or use the data-gradient-map attribute:

<img src="your-image.jpg" data-gradient-map="#0000FF, #FFFFFF">
<script>
  $(document).ready(function() {
    $('img').duotone();
  });
</script>

Hover each exemples to reveal the original images.

API

Here is a basic usage exemple including the API.

<img src="your-image.jpg" data-gradient-map="#0433ff, #ffe4e1">
<script>
  $(document).ready(function() {
    $('img').duotone();

    $('#reset').on('click', function(e) {
      $('img').duotone('reset');
    });

    $('#process').on('click', function(e) {
      $('img').duotone('process');
    });

    $('#update').on('click', function(e) {
      start = $('input[name="start"]').val();
      end = $('input[name="end"]').val();
      gradient = start + ', ' + end;
      $('img').duotone('defaults', {
        gradientMap: gradient
      }).duotone('process');
    });
  });
</script>

stop position

Add some color stop positions for a better control of your gradient map.

<img src="your-image.jpg" data-gradient-map="#271f37 25%, #dc143c">

hex but also color name, rgb or hsl

As you can use the same format as CSS linear gradients, you can also use each CSS color definitions.

<img src="your-image.jpg" data-gradient-map="darkblue, rgb(105, 105, 105) 60%, hsl(55, 91%, 69%) 90%">

Support

The plugin works in each browsers that support canvas.

Credits

All pictures came from the amazing and talented Long Cao.

CSS Color Parser by Dean McNamee.