jPipette

JPipette v.2.0.1. allows
- you to pick a color from a canvas screenshot made by Html2Canvas and save these colors for further usage.
- a static color palette can be added as an array in your option.
- And you can also create a thumbnail of your finished page design as Base64/png image.

jPipette is made by Havalite CMS, and licensed under MIT style license, FREE to use, alter, copy, sell, and especially ENHANCE

Example:

Click the pipette beside the input field, choose the colors you want to save, choose RGB or HEX, than click the saved color (the first line of colors).


Usage

Add following files in the head part of your site:
  1. jQuery & jQuery ui
  2. html2Canvas.js
  3. jpipette.js & jpipette.css

Eexample code: 

    // html
    <input type="text" name="myInput">
    
    // JavaScript
    $(document).ready(function(){
       $('input').jPipette();
    )}

The Options: 

colorFormat: 'RGB', // RGB or HEX 
showPalette: true, // Boolean
palette: ['fff', 'ccc', 'C0C0C0',..., '663366'], // array of color values
screenshot: 300 // screenshot width or set to False to remove icon

Browser Compatibility

Jpipette is tested only on HTML5 capable browsers, such as: Chrome, Firefox, Safari (Sorry IE is a pain)

The Trick

There is no straight way to get the color of every element on a website except by converting the whole site to one image by using html5 Canvas. The plugin Html2Canvas was a great help for me to make this possible.

Problema

The only problem is when using external images. These might be blocked by the browser and cant be seen in the canvas conversion. Also the methode by loading external images will take a lot of time to manage. So make sure all images are saved in the right place.

Back to main Page
havalite CMS