Пипетка для определения цвета на HTML5

Как сделать простой и полезный инструмент для получения цвета с помощью HTML5. Основная идея - выводим изображение в элемент canvas и добавляем обработку событий для движения мыши и нажатия кнопки (для получения цвета).

 

Разметка HTML

Страница для демонстрации достаточно простая. На ней содержится несколько элементов для представления исходного изображения и параметров цвета выбранной точки.

<!DOCTYPE html>
<html lang="ru" >
    <head>
        <meta charset="utf-8" />
        <title>Пипетка для установки цвета на HTML5 | Материалы сайта RUSELLER.COM</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="Другое изображение" id="swImage" /></div>
                <div>Цвет:</div>
                <div id="preview"></div>
                <div>Параметры:</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>
    </body>
</html>

 

CSS

CSS код служит только для формирования внешнего вида страницы и элементов интерфейса.

*{
    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;
}



 

JavaScript

Весь функционал пипетки реализуется в коде JavaScript.

сначала подготавливаем элемент canvas и контекстный объект для него. Затем добавляем обработчики нужных событий. В случае нажатия кнопки мыши получаем параметры текущей точки. С полученными параметрами можно делать все, что угодно.

var canvas;
var ctx;

var 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(){

    // Вывводим текущее изображение
    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];

    // Создаем объект canvas
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');

    $('#panel').mousemove(function(e) { // Обработчик события mousemove (движение мыши)
        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) { // Обработчик события нажатия на кнопку мыши
        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) { // Переключение изображений
        iActiveImage++;
        if (iActiveImage >= 10) iActiveImage = 0;
        image.src = images[iActiveImage];
    });
});

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/zLTo-GJEc8I/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Пипетка для определения цвета на HTML5 | | 2012-08-16 21:03:55 | | Статьи Web-мастеру | | Как сделать простой и полезный инструмент для получения цвета с помощью HTML5. Основная идея - выводим изображение в элемент canvas и добавляем обработку событий для движения мыши и нажатия кнопки | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: