Tuto application Facebook

Créer une application Facebook de A à Z en PHP. API Facebook, viralité, monétisation ...

Tuto Symfony2

A travers le projet WatchMyDesk, apprenez à maîtriser le Framework PHP5 Symfony2.

Web Event Lyon #4

Plus d'une dizaine de conférences, des ateliers pratiques, barcamps et cliniques web, le 15 juin 2012.

Se
Connecter Créer
un compte

10
OCT

Comment créer un color picker sur image avec du HTML5 Canvas

Publié le 10/10/11 à 09h36 par DJo

Voici un tutoriel bien pratique pour créer son propre color picker sur image basé sur du HTML5 Canvas et jQuery.

Voici un tutoriel bien pratique pour créer son propre color picker sur image basé sur du HTML5 Canvas et jQuery.

Si vous êtes amenés à créer une webapp avec de la retouche graphique ou de la création graphique, ce tutoriel, réalisé par script-tutorials.com, devrait vous intéresser. Il montre encore une fois comment nous pouvons manipuler des images avec du HTML5 Canvas et un peu de javascript.

Dans un premier temps, il faut mettre en place la partie HTML5 et initialiser la zone du canvas qui va contenir les images que l'on souhaite:

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 canvas - Image color picker | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="column1">
                <canvas id="panel" width="500" height="333"></canvas>
            </div>
            <div class="column2">
                <div><input type="button" value="Next image" id="swImage" /></div>
                <div>Preview:</div>
                <div id="preview"></div>
                <div>Color:</div>
                <div>R: <input type="text" id="rVal" /></div>
                <div>G: <input type="text" id="gVal" /></div>
                <div>B: <input type="text" id="bVal" /></div>
                <div>RGB: <input type="text" id="rgbVal" /></div>
                <div>RGBA: <input type="text" id="rgbaVal" /></div>
                <div>HEX: <input type="text" id="hexVal" /></div>
                <hr />
            </div>
            <div style="clear:both;"></div>
        </div>
        <footer>
            <h2>HTML5 canvas - Image color picker</h2>
            <a href="http://www.script-tutorials.com/html5-canvas-image-color-picker/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</html>

Une fois chose faite, il faut ajouter la couche de présentation en CSS pour obtenir une interface plus design:

*{
    margin:0;
    padding:0;
}

body {
    background-color:#bababa;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}

footer {
    background-color:#212121;
    bottom:0;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    left:0;
    position:fixed;
    width:100%;
    z-index:100;
}

footer h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}

footer a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}

footer .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}

.container {
    color:#000;
    margin:20px auto;
    position:relative;
    width:730px;
}

.column1 {
    float:left;
    width:500px;
}

.column2 {
    float:left;
    padding-left:20px;
    width:170px;
}

#panel {
    border:1px #000 solid;
    box-shadow:4px 6px 6px #444444;
    cursor:crosshair;
}

.column2 > div {
    margin-bottom:10px;
}

#swImage {
    border:1px #000 solid;
    box-shadow:2px 3px 3px #444444;
    cursor:pointer;
    height:25px;
    line-height:25px;

    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

#swImage:hover {
    margin-left:2px;
}

#preview {
    border:1px #000 solid;
    box-shadow:2px 3px 3px #444444;
    height:80px;
    width:80px;

    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

.column2 input[type=text] {
    float:right;
    width:110px;
}

Et pour terminer, la partie Javascript qui va permettre de traiter l'image Canvas et récupérer la couleur des pixels de l'image:

var canvas;
var ctx;

var images = [ // predefined array of used images
    'images/pic1.jpg',
    'images/pic2.jpg',
    'images/pic3.jpg',
    'images/pic4.jpg',
    'images/pic5.jpg',
    'images/pic6.jpg',
    'images/pic7.jpg',
    'images/pic8.jpg',
    'images/pic9.jpg',
    'images/pic10.jpg'
];
var iActiveImage = 0;

$(function(){

    // drawing active image
    var image = new Image();
    image.onload = function () {
        ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas
    }
    image.src = images[iActiveImage];

    // creating canvas object
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');

    $('#panel').mousemove(function(e) { // mouse move handler
        var canvasOffset = $(canvas).offset();
        var canvasX = Math.floor(e.pageX - canvasOffset.left);
        var canvasY = Math.floor(e.pageY - canvasOffset.top);

        var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
        var pixel = imageData.data;

        var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")";
        $('#preview').css('backgroundColor', pixelColor);
    });

    $('#panel').click(function(e) { // mouse click handler
        var canvasOffset = $(canvas).offset();
        var canvasX = Math.floor(e.pageX - canvasOffset.left);
        var canvasY = Math.floor(e.pageY - canvasOffset.top);

        var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
        var pixel = imageData.data;

        $('#rVal').val(pixel[0]);
        $('#gVal').val(pixel[1]);
        $('#bVal').val(pixel[2]);

        $('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]);
        $('#rgbaVal').val(pixel[0]+','+pixel[1]+','+pixel[2]+','+pixel[3]);
        var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];
        $('#hexVal').val( '#' + dColor.toString(16) );
    }); 

    $('#swImage').click(function(e) { // switching images
        iActiveImage++;
        if (iActiveImage >= 10) iActiveImage = 0;
        image.src = images[iActiveImage];
    });
});

Le code est relativement simple à comprendre, alors n'hésitez pas à vous en inspirer pour créer vos propres applications basées sur du HTML5 Canvas.

Site Officiel et démo

A voir aussi sur le même sujet: