Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 29.08.2016, 15:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Feex,
ок
Ответить с цитированием
  #12 (permalink)  
Старый 29.08.2016, 15:31
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Feex,
Скрипт script.js там открыто лежит...
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];
    });
});
Ответить с цитированием
  #13 (permalink)  
Старый 29.08.2016, 16:01
Аспирант
Отправить личное сообщение для Feex Посмотреть профиль Найти все сообщения от Feex
 
Регистрация: 30.12.2015
Сообщений: 84

удалено мной)

Последний раз редактировалось Feex, 29.08.2016 в 16:58.
Ответить с цитированием
  #14 (permalink)  
Старый 29.08.2016, 16:03
Аспирант
Отправить личное сообщение для Feex Посмотреть профиль Найти все сообщения от Feex
 
Регистрация: 30.12.2015
Сообщений: 84

Dilettante_Pro,
да, я уже сделал: http://feex.ru/colorimg

Последний раз редактировалось Feex, 29.08.2016 в 16:26.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена картинки при нажатии на маленькие картинки comb Элементы интерфейса 4 23.03.2015 01:08
Очистка памяти, отмена загрузки картинки, отмена события. zhurchik Общие вопросы Javascript 16 23.10.2014 13:48
Помогите сменить цвет элементов которые рисует Raphael. JS аналог hover ufaclub jQuery 3 10.10.2014 22:33
Идентифицировать картинки MellDixX Общие вопросы Javascript 8 04.08.2013 18:16
Как изменить размер картинки? Mihail Общие вопросы Javascript 1 25.10.2009 13:42