Custom image in Javascript or jQuery

Asked

Viewed 66 times

-1

I made a code in jQuery that when loading an image (input file) I pick a photo and that photo goes to the site of input

However the photo does not appear to measure, it is deformed. I do not know how to make it fit automatically.

I wanted to do something like Facebook, we chose a photo and it appears adjusted in the circle.

How do I do this?

The code is as follows::

HTML:

<center class="m-t-30">
    <div id="profile-container">
           <img src="/assets/images/users/user.png" class="rounded-circle" width="150" id="profileImage" style="cursor: pointer;" />
    </div>
</center>
<br>
<input type="file" accept="image/*" id="imageUpload" style="display: none;" capture>

CSS:

  #profile-container {
    width: 150px;
    height: 150px;
    overflow: hidden;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    -ms-border-radius: 50% !important;
    -o-border-radius: 50% !important;
    border-radius: 50% !important
}

#profile-container img {
    width: 150px;
    height: 150px;
}

   .rounded-circle {
    border-radius: 50% !important
}

Javascript:

    document.querySelector('#profileImage').addEventListener('click', function (e){
        $('#imageUpload').click();
    });

   document.querySelector('#imageUpload').addEventListener('change', function () {
        if (this.files && this.files[0]) {
            $('#profileImage').attr('src', window.URL.createObjectURL(this.files[0]));
        }
    });

The code works, only when selecting the image, it is flattened.

javascript html jquery css
  • 1

    Ana, I don’t mean to be rude, but how do you want help without putting your code in the question? Edit your question, put your code, then we can evaluate what you did and tell you where you went wrong or a possible solution.

  • Question without information,?

  • Ah yes...I didn’t know it was necessary...I’ll put it on...

1 answer

1

The image gets flattened because you set fixed square size. If the user loads a horizontal or vertical photo, it will lose proportions and flatten, because it will force the image to be 150x150 pixels (square).

I would suggest that you use the image as background of div instead of a tag img. This is because it is easier to adjust the image inside the div using background-size: cover;. That is, no matter the width of the image, the cover will attempt to adjust the image inside the div. And with background-position: center; will center it.

Just remove the tag img of div, add properties in div #profile-container and change the Javascript code to change the background of the element.

Another thing is that it is mixing pure JS with jQuery. Since you are using jQuery, use it in all logo code.

Behold:

$('#profile-container').on('click', function (e){
   $('#imageUpload').click();
});

$('#imageUpload').on('change', function () {
   if (this.files && this.files[0]) {
     $('#profile-container').css('background-image', 'url('+window.URL.createObjectURL(this.files[0])+')');
   }
});
#profile-container {
width: 150px;
height: 150px;
overflow: hidden;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
-ms-border-radius: 50% !important;
-o-border-radius: 50% !important;
border-radius: 50% !important;
background-image: url(https://image.flaticon.com/icons/png/512/149/149071.png);
background-size: cover;
background-position: center;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center class="m-t-30">
    <div id="profile-container">
    </div>
</center>
<br>
<input type="file" accept="image/*" id="imageUpload" style="display: none;" capture>

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.