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

  • 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.

    Saturday, March 2, 2019 1:40 AM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 6, 2019 2:28 AM

All replies

  • 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

    Monday, March 4, 2019 3:58 AM
  • 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?
    Monday, March 4, 2019 10:29 AM
  • 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

    Tuesday, March 5, 2019 2:32 AM
  • 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>');

    Tuesday, March 5, 2019 10:12 PM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 6, 2019 2:28 AM