How to show user's avatar beside username in conversation box?

Question

User-2071692902 posted

Hi all,
I am working on a chatting web application. [it still a front-end].

Here where user can enter his username and choose his avatar. http://redapple-chat.com/">Registration Page
And here where he can make chat  with other using his username which he had entered it in the Registration page

"http://redapple-chat.com/RAChat.html">Chatting Page
Now how to make user able to send his avatar  beside username long with his message in conversation box?

Thanks and any help will be appreciated.

Answer 1

User839733648 posted

Hi Omanxp45-1,

According to your description and links, I suggest that you could use the same method of saving username to save and get the avatar. 

I've used F12 developer tools to check that you've used localstorage to save the username.

You could also use it to save avatar and show it anywhere you want.

save avatar.

var avatarImage = document.getElementById("avatar");
imgData = getBase64Image(avatarImage);
localStorage.setItem("imgData", imgData);

<img src=" " id="avatar" />

get avatar.

var dataImage = localStorage.getItem('imgData');
avatarImg = document.getElementById('avatarShow');
avatarImg.src = dataImage;

<img src="" alt="" id="avatarShow" />

Best Regards,

Jenifer

Answer 2

User-2071692902 posted
Hi,
No I don't mean this. I mean how to make user able to send his avatar beside his username every time he sends his message to the conversation box?

Answer 3

User839733648 posted

Hi Omanxp45-1,

I suggest that you could add avatar like you add the username before the sending message.

I‘ve used F12 developer tools to check the message container is a div.

You just have to save the avatar and append it before the username on the message container.

Best Regards,

Jenifer

Answer 4

User-2071692902 posted

Hi Jenifer Jian...

I've amended the code but it still something wrong with it . Everything is ok but still no avatar beside username.

var avatarimg = document.getElementById("avatar");
           var userName = document.getElementById("myUserName").value;
           var userinput = document.getElementById("myInput").value;
           var imagesrc = document.getElementById("baseimage");
           var img = $('<img class="img" width=" 100px;" height=" 100px">')
                       .attr('src', imagesrc.value);
       var aimg=$('<img class="img" width:30px" height:30px">')
                       .attr('src', avatarimg.value);
           if (userName != "" & imagesrc.value =="") {
$('#conDivID').append(aimg);
$('#conDivID').append("<span style='color: red'>" + userName + ': </span>');
$('#conDivID').append( embedUrls(userinput));
$('#conDivID').append('</br>');
$('#conDivID').append("<span class='timeSpan'>" + timeStamp + '</span>');
$('#conDivID').append('</br>');

Answer 5

User839733648 posted

Hi Omanxp45-1,

You could try to get the avatar's src from your localstorage.

var avatarImage = localStorage.getItem('avatarImgData');
var aimg=$('<img class="img" width:30px" height:30px">').attr('src', avatarImage);
$('#conDivID').append(aimg);

Best Regards,

Jenifer