Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Generowanie podglądu zdjęć

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

Generowanie podglądu zdjęć

Post 18.07.2017, 19:58:47

Witam

Proszę was drodzy koledzy o pomoc .Potrzebuję się dowiedzieć jak po wyborze zdjęcia przez danego użytkownika wygenerować obraz wybranego zdjęcia najlepiej w normalnych kolorach a obok w odcieniach szarości bardzo proszę o jakieś wskazówki jestem dopiero początkującym.
adek019
Posty: 1
Dołączył(a): 18.07.2017

Re: Generowanie podglądu zdjęć

Post 23.07.2017, 22:15:32

Skoro wątek jest w dziale JavaScript, rozumiem, że ma być to zrobione w tym języku. Zatem potrzebne będzie:

1. Jeśli wybór obrazka odbywa się poprzez <input type="file">, to należy nasłuchiwać na zmiany i skorzystać z File API

Kod: Zaznacz cały
document.querySelector('#id_pola_uploadu').addEventListener('change', function (event) {
    var selectedFile = this.files[0];
    // tu będziemy dalej dodawać kod
});


2. Żeby wyświetlić obraz, pomocna będzie funkcja URL.createObjectURL

Kod: Zaznacz cały
var img = document.createElement('img');
img.src = URL.createObjectURL(selectedFile);
document.body.appendChild(img);


3. efekt szarości można uzyskać na kilka sposobów
a) za pomocą filtrów CSS
b) za pomocą operacji na <canvas>
Dla drugiego sposobu można skorzystać z gotowca https://www.html5rocks.com/en/tutorials ... gefilters/
Należy jedynie zaczekać aż przeglądarka wczyta obrazek

Kod: Zaznacz cały
img.onload = function () {
    img.onload = null;
    var grayscale = Filters.filterImage(Filters.grayscale, img);

    var canvas = Filters.getCanvas(img.width, img.height);
    var ctx = canvas.getContext('2d');
    ctx.putImageData(grayscale, 0, 0);

    document.body.appendChild(canvas);
};


Pisałem powyższe od razu na forum, bez testowania.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19549
Dołączył(a): 14.04.2002


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 4 gości

Hosting, Domeny, SSL
iCash

Subskrypcja

Mamy 50186 zarejestrowanych użytkowników.
Najnowszy użytkownik: sskijop


Nasi użytkownicy napisali:

  • 935192 wiadomości
  • w 246383 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)