Jak wykonać te polecenia używając JavaScript, HTML,CSS?

pytanie zadane 15 kwietnia 2019 w Rozwój zawodowy, nauka, praca przez Kubs Mądrala (5,190 p.)
edycja 15 kwietnia 2019 przez Kubs

Witajcie,

próbuje stworzyć kształt w którym następnie chcę umieścić zdjęcia o wymiarach tego właśnie kształtu. Taki dokładnie wpasowany <div> w ten kształt narysowany w canvas.

Mam polecenia jak to wykonać. Proszę pomóżcie jak to dokładnie zrobić.

Robisz przejrzystego div-a
Do niego przypinasz <canvas>, nadajesz mu wymiary takie jak ma div.
Tworzysz znacznik img i do niego ładujesz zdjęcie.
Zdjęcie wyświetlasz na canvasie.
Rysujesz na canvasie "ścieżkę odcinania".
Pobierasz dane z canvasu i w pętli przebiegasz wszystkie piksele w canvasie. W pętli tej sprawdzasz, czy punkt leży wewnątrz ścieżki, czy na zewnątrz (jest na to odpowiednia funkcja). Jeśli punkt leży na zewnątrz ścieżki, to ustawiasz przeźroczystość w kanale alpha.

2 odpowiedzi

odpowiedź 15 kwietnia 2019 przez Filipek123 Użytkownik (840 p.)
edycja 18 kwietnia 2019 przez ScriptyChris

.canvas {

width 100%

height 100px;

}

.divider{

width: 100%;

height: 1px;

}

<body>

<div class="canvas">

<img src="ścieżka zdjęcia"></img>

</div>

<div class="divider">

</div>

</body>

nie rozumiem o co chodzi ścieżkę odcinania, założę więc, że jest to divider. z 6 ci nie pomogę ponieważ nie rozumiem o co zbytnio z tym chodzi.

komentarz 15 kwietnia 2019 przez Kubs Mądrala (5,190 p.)

Dzięki, też próbuje zrozumieć o co chodzi w tej ścieżce odcinania.

odpowiedź 15 kwietnia 2019 przez program naczelny Gaduła (3,320 p.)

Rozumiem o co chodzi z tą ścieżką odcinania, ale to jest zupełnie bezcelowe, oraz trudne. Zamiast tego lepiej użyć formatu zdjęcia który obsługuje przeźroczystość i obrobić zdjęcie np: w gimpie. Używając np gifa, możesz bez problemu tak zrobić. W tej sytuacji:
- tworzysz oraz później pobierasz zdjęcie do zmiennej

const img = new Image();

img.onload = function(){
  // image  has been loaded
};

img.src = image_url;

- wyświetlasz je na twoim canvasie - kiedy nie definiujesz koloru płótno jest przeźroczyste

Nie potrzeba tu wielkiej filozofii

komentarz 15 kwietnia 2019 przez Kubs Mądrala (5,190 p.)

Dziękuje serdecznie. Nie za bardzo wciąż rozumiem to wszystko. A mógłbyś napisać jak mniej więcej będzie wyglądał kod w punktach 1-4?

komentarz 15 kwietnia 2019 przez program naczelny Gaduła (3,320 p.)

Naprowadziłem na temat, ale od tego to już masz google :}

komentarz 15 kwietnia 2019 przez Kubs Mądrala (5,190 p.)

No ok :) Tak jeszcze na marginesie.. działasz w Javie? Szukam współtowarzysza do napisania aplikacji.

komentarz 15 kwietnia 2019 przez program naczelny Gaduła (3,320 p.)

Umiem c++ oraz frontend, natomiast javy jeszcze nie dotykałem. Nigdy nie widziałem jej potrzeby użycia. Generalnie to z interfejsem javy myślę że nie ma problemu, nauczyłbym się w tydzień max. Możesz napisać na priv jakie cudo tworzysz to pomyślimy ;)