Jak zmienić kolor obrazu za pomocą jquery

Question

Po pierwsze przepraszam za głupie pytanie, które zamierzam poprosić. Mam obraz kubka. Kiedy dowolny użytkownik wybiera kod koloru z próbnika kolorów, chcę zmienić kolor kubka na ten kolor.

Czy mógłbyś uprzejmie dać mi wskazówkę, jak to zrobić za pomocą jquery? Planuję to osiągnąć za pomocą PHP i Jquery.

z góry dzięki :)

PS To właśnie przyszło mi do głowy, że to nie jest możliwe, aby zmienić kolor obiektu za pomocą próbnika kolorów, jeśli jest w formacie obrazu, ale nadal nie dostał się sposobem osiągnąć to. Czy mógłbyś uprzejmie zasugerować mi coś?

Answer 1

Ok, pierwszy krok, zamiast używać formatu jpeg, użyjesz PNG, dzięki czemu możesz mieć przezroczyste obszary na obrazie.

Otwórz go w edytorze obrazów i wyciąć wszystkie puste obszary na obrazie, pozostawiając kubek przezroczystym konturem. Tak:

Nie zamierzamy użyć jQuery tutaj, bo szczerze nie wiem nic o tym, więc nie mogę pomóc, że zamiast będziemy używać bezpośrednio API płótno z HTML 5 (oznacza to, że twoja aplikacja nie będzie działać na starszych przeglądarkach)

Tutaj wykonamy mnożenie kolorów na piksel, ponieważ Twój kubek jest w skali szarości, która zrobi to za nas.

Wybierzmy tablicę zawierającą wszystkie informacje o kolorach pikseli.

1. Dodaj obraz do DOM
2. Załóż OffScreen elementu canvas
3. Poczekaj na zdjęcie, aby załadować
4. narysować obraz na płótnie

5. uzyskać dane pikseli przy użyciu getImagedata metoda wewnątrz zdarzenia onload obrazu

   < * img src = "kubek.PNG”id = "kubek" szerokość = "25%" wysokość = "25%" onload = "getPixels()" w />

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

Musimy koloru z próbnika być w format RGB, a nie hex, więc korzystać z tej funkcji w przypadku, gdy zbieracz zwraca wartość szesnastkową aby przekształcić go:

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

teraz tutaj jest magia część, niech pętlę poprzez danych pikseli i pomnożyć ją do koloru z próbnik kolorów:

na mój skrypt nie ma wyboru koloru, właśnie stworzył prostą metodę wprowadzania tekstu, aby wpisać w kolorze szesnastkowym, funkcja ta poniżej jest zdarzenie OnClick przycisku wejściowego

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's 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"); 
    } 

widać, sztuką jest:

• Get oryginalnego koloru piksela
• przekształcić go z zakresu 0-255 do 0-1
• pomnożyć ją do nowego koloru, który chcesz go mieć.

Można go zobaczyć tu pracuje: http://users7.jabry.com/overlord/mug.html

• Jestem pewien, że działa przynajmniej na Firefox i Chrome.

• Kontur kubka nie wygląda dobrze, ponieważ właśnie zrobiłem szybką "magiczną różdżkę" na Photoshopie, możesz zrobić coś lepszego później.

Answer 2

Można użyć wybicia kubka z przezroczystymi obszarami, nadać mu tło i zmienić kolor tła zgodnie z wymaganiami. cssTricks

Oto podstawowy przykład, jsFiddle, przy użyciu Farbtastic Color Picker.

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

Answer 3

Można nakładać absolutnie umieszczony .png z z-index większym niż obraz bazowej kubek. Nakładka byłaby kolorowym kubkiem i w razie potrzeby mogłaby zostać usunięta z tła. Zamień nakładkę w razie potrzeby za pomocą modułu obsługi zdarzeń - może dodać/usunąć klasę?

Answer 4

Powinieneś użyć "Product Colorizer" przez Nik Korablin. Obsługuje jeden lub dwa kolory i jest prosty w konfiguracji.