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

Ответ 1

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

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

Мы не будем использовать 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-индексом, большим, чем базовое изображение кружки. Наложение было бы цветной кружкой и могло бы при необходимости зачеркнуть фон. Поменяйте накладку по мере необходимости с помощью обработчика событий - возможно, добавьте/удалите класс?