Как изменить цвет изображения с помощью jquery

Прежде всего, я сожалею о глупом вопросе, который я задам. У меня есть изображение кружки. Когда любой пользователь выбирает цветовой код из набора цветов, я хочу повернуть цвет кружки на этот цвет.

Не могли бы вы дать мне подсказку о том, как это сделать, используя jquery? Я планирую достичь этого с помощью PHP и JQuery.

Спасибо в Advance:)

P.S Мне просто пришло в голову, что невозможно изменить цвет объекта с помощью набора цветов, если он находится в формате изображения, но все же должен быть способ достичь этого. Не могли бы вы предложить мне что-нибудь?

ОТВЕТЫ

Ответ 1

Итак, первый шаг, вместо использования формата jpeg, вы собираетесь использовать PNG, чтобы на изображении могли быть прозрачные области.

Откройте его в редакторе изображений и вырежьте все пробелы на изображении, оставив кружку с прозрачным контуром. Вот так:

enter image description here

Мы не будем использовать jQuery здесь, потому что, честно говоря, я ничего не знаю об этом, поэтому я не могу помочь вам в этом, вместо этого мы будем использовать непосредственно API canvas из HTML 5 (это означает, что ваше приложение не будет работать на старых браузерах)

Здесь мы будем выполнять умножение на пиксель цвета, так как ваша кружка в сером цвете, которая сделает это для нас.

Позвольте выбрать массив, содержащий всю информацию о цвете пикселей.

  • Добавьте изображение в DOM
  • Создайте элемент canvas на экране.
  • Подождите, пока изображение загрузится.
  • Нарисуйте изображение на холсте

  • Получите данные пикселей с помощью метода getImagedata, внутри события onload изображения

    < * img src= "mug.png" id = "mug" width = "25%" height = "25%" onload = "getPixels (this)" /" > 

    var mug = document.getElementById("mug");
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var originalPixels = null;
var currentPixels = null;

function getPixels(img)
{
    canvas.width = img.width;
    canvas.height = img.height;

    ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
    originalPixels = ctx.getImageData(0, 0, img.width, img.height);
    currentPixels = ctx.getImageData(0, 0, img.width, img.height);

    img.onload = null;
}

Нам нужен цвет от выбора цвета, который должен быть в формате RGB, а не в шестнадцатеричном формате, поэтому используйте эту функцию, если ваш сборщик возвращает шестнадцатеричное значение для его преобразования:

function hexToRGB(hex)
{
    var long = parseInt(hex.replace(/^#/, ""), 16);
    return {
        R: (long >>> 16) & 0xff,
        G: (long >>> 8) & 0xff,
        B: long & 0xff
    };
}

Теперь вот волшебная часть, пусть цикл через пиксельные данные и умножить его на цвет от выбора цвета.

на моем script нет выбора цвета, я только что создал простой текстовый ввод для ввода шестнадцатеричного цвета, эта функция ниже - событие onclick кнопки ввода

    function changeColor()
    {
        if(!originalPixels) return; // Check if image has loaded
        var newColor = hexToRGB(document.getElementById("color").value);

        for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
        {
            if(currentPixels.data[I + 3] > 0) // If it not a transparent pixel
            {
                currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
                currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
                currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
            }
        }

        ctx.putImageData(currentPixels, 0, 0);
        mug.src = canvas.toDataURL("image/png");
    }

Смотрите, трюк:

  • Получить исходный цвет пикселей
  • Преобразуйте его из диапазона 0-255 в 0-1
  • Умножьте его на новый цвет, который вы хотите.

Вы можете увидеть, как он работает здесь: http://users7.jabry.com/overlord/mug.html

  • Я уверен, что он работает, по крайней мере, на firefox и chrome.

  • Контур кружки не выглядит хорошо, потому что, когда я только что сделал "волшебную палочку" в Photoshop, вы можете сделать что-то лучше позже.

Ответ 2

Вы можете использовать выбитую картинку кружки с прозрачными областями, придать ей фон и изменить цвет фона по мере необходимости. cssTricks

Вот базовый пример jsFiddle, используя Farbtastic Color Picker.

$('#colorpicker').farbtastic(function(color){
    $('img').css("background-color",color);
});​

Ответ 3

Ник Кораблин должен использовать Colorizer". Он поддерживает один или два цвета и прост в настройке.

Ответ 4

Вы можете наложить абсолютно позиционированное .png с z-индексом, большим, чем базовое изображение кружки. Наложение было бы цветной кружкой и могло бы при необходимости зачеркнуть фон. Поменяйте накладку по мере необходимости с помощью обработчика событий - возможно, добавьте/удалите класс?