Tworzenie kółka z 'awataru' użytkownika i nie tylko w Node.js

pytanie zadane 16 września 2020 w JavaScript przez Chlipchlip Użytkownik (850 p.)

Witam. Mam do państwa pytanie, iż nie wiem dokładnie jak stworzyć z "awataru" użytkownika kółko "message.author.displayAvatarURL" - w pierwszej kolejności w module Canvas. Następnie bym chciał żeby awatar wyznaczonej osoby "member.displayAvatarURL" (przez autora wiadomości) był "pod tłem". Chodzi mi tutaj dokładniej o kanał alfa. Nie wiem jak to dokładniej wytłumaczyć. W canvas-constructor'ze była to funkcja resetTransformation

const canvas = Canvas.createCanvas(600, 873);
const ctx = canvas.getContext("2d");

const background = await Canvas.loadImage("./a/b/crush.png");
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);


const msgauthorAvatar = await Canvas.loadImage(message.author.displayAvatarURL(ImageURLOptions));
ctx.drawImage(msgauthorAvatar, 407, 44, 131, 131); // z tego koło

const mentionAvatar = await Canvas.loadImage(member.displayAvatarURL(ImageURLOptions));
ctx.drawImage(mentionAvatar, 109, 454, 417, 417); // resetTransformation()
    

const attachment = new Discord.MessageAttachment(canvas.toBuffer(), "cos.png");
message.channel.send(attachment);

komentarz 17 września 2020 przez Chlipchlip Użytkownik (850 p.)

Odświezam... Nadal oczekuje pomocy.

komentarz 20 września 2020 przez Chlipchlip Użytkownik (850 p.)

Z jedna rzecza juz sobie poradzilem. Ostatecznym moim pytaniem jest: "jak z awataru usera zrobic kolko?"

komentarz 20 września 2020 przez JakSky Stary wyjadacz (14,770 p.)

Za pomocą css możesz to zrobić. Wystarczy zaokrąglić rogi na 100%. A zdjęcie musi być kwadratowe.

komentarz 21 września 2020 przez Chlipchlip Użytkownik (850 p.)

CSS do apki w Node.js'ie? Pierwsze słyszę...

komentarz 21 września 2020 przez VBService Ekspert (253,340 p.)
edycja 21 września 2020 przez VBService

CSS do apki w Node.js'ie? Pierwsze słyszę...

Nie będę się upierał, czy masz rację, czy nie, ale ... chyba można ...
works with css in node.js

canvas arc() Method
Building a User Avatar Component With Node.js ...
CircleAvatar class - material library - Dart API (Flutter)

komentarz 21 września 2020 przez Chlipchlip Użytkownik (850 p.)

Spoko. Sam nie mam pojęcia, więc...

1 odpowiedź

odpowiedź 21 września 2020 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 21 września 2020 przez Chlipchlip

Najlepsza

Do zaokrąglania elementu na canvas'ie można użyć metody arc.

Swoją drogą: w czym uruchamiasz swoją aplikację - co ją renderuje?

komentarz 21 września 2020 przez Chlipchlip Użytkownik (850 p.)

Witam. Tyle to ja wiem. Gorzej z zastosowaniem tego (: Swoją aplikacje uruchamiam za pomocą polecenia "node .". To akurat rzeczywiste jest. Natomiast zdarzenia są wywoływane przez API Discorda. Użytkownik -> Serwer (Apka w n.js) -> Serwer API oprogramowania Discord -> Użytkownik Wieczorem wyślę swój pełny skrypt. Pozdrawiam.

komentarz 21 września 2020 przez ScriptyChris Mędrzec (190,190 p.)

Tyle to ja wiem. Gorzej z zastosowaniem tego

Skoro wiesz o metodzie arc, to co sprawiło problem w jej użyciu?

Nie zauważyłem, że piszesz apkę pod API Discorda. W dokumentacji jest przykład jak zaokrąglić avatar wspomnianą metodą arc: https://discordjs.guide/popular-topics/canvas.html#manipulating-images

(przewiń do fragmentu "let's turn the avatar into a circle to improve the overall style of the image.")

komentarz 21 września 2020 przez Chlipchlip Użytkownik (850 p.)

Generanie jak to (miej więcej) zastosować to wiem. Chcę "połączyć" 2 awatary użytkownilów do tła. Dopiero jak usunę skrypt do tła, koło faktycznie robi się z pierwszego awataru. Serio, trudno jest to wytłumaczyć tym bardziej jak się nie ma czasu.