-1

I am running into an issue that I cannot figure out. I designed a profile picture feature and I need to figure out a way to proportionate all of the photos so they all have, let's say a max-height: 50px' and 'max-width: 50px;. The thing is, I do not want to just cut off a random portion of the photo. For instance, if a photo is 3(width) x 6(height), I am looking for a solution that will take the center of this photo to the proportions I am looking for. Simularly to Facebook's profile picture upload.

enter image description here

I do not necessarily need it in a preview format, but it would be nice. I already have a preview function:

<form action="" method="POST" enctype="multipart/form-data">
    Change your profile picture <br>
    <input type="file" name="file" class="file-input">
    <img width="300px" height="200px" class="none" id="file" src="#" alt="your image">
    <input type="submit" class="none" name="create" value="Upload Profile Picture">
</form>


function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#file').attr('src', e.target.result);
        }

            reader.readAsDataURL(input.files[0]);
    }
}

Does anyone have any ideas how I could do this?

Becky
  • 2,253
  • 15
  • 38
  • 1
    I am not sure that's a type of question that's going to get you very far here.. Are you stuck at a particular point, is something not working as it should? "how can I do this" is a bit too broad for SO I think. – George Katsanos Oct 20 '16 at 20:09
  • 1
    in any case, this cannot be handled with CSS/HTML, you need to use some library that can do math – George Katsanos Oct 20 '16 at 20:10
  • @GeorgeKatsanos No offense, but I am half as far as you, nor do I care about "going far" on here. I am looking for help. Not code, a specific answer can be given here. If someone has done this before, they can give a function name, a resource, etc. Your comment is not needed. – Becky Oct 20 '16 at 20:11
  • 1
    @Becky I am not 100% sure if this is what you're after but if it is I can expand this comment into an answer: https://jsfiddle.net/m4r0vfpw/ I just whipped this up, hope it's what you're after. – Wild Beard Oct 20 '16 at 20:14
  • @Press Somewhat, though I am looking for more of the back-end method of scaling it to a set size, though the preview will definitely be needed. With your preview I will need the image, regardless of the size to be proportioned to a 1:1 ratio. – Becky Oct 20 '16 at 20:18
  • 2
    @Becky in any case, your tags are wrong. This has nothing to do with html/css, you need to calculate the center of the image, you need http://www.imagemagick.org/script/index.php probably – George Katsanos Oct 20 '16 at 20:21
  • @GeorgeKatsanos Thanks for the link. I will check it out. I wasn't sure if there was a way to do this with css originally. I have added a jquery tag to this as well. – Becky Oct 20 '16 at 20:23
  • @Becky well, you can do the preview 'cropping' with the `calc()` method provided by CSS. So if you want the width/height to be 75% of the original you can do: `width: calc(100% * .75);` and it will do the math for you! – Wild Beard Oct 20 '16 at 20:26
  • @Press How would I set the 'crop box' to the exact proportions of 1:1 though? I do not mean 100% of the photo, I mean if the photo in the preview is 4 x 5, the photo would be changed to 4 x 4. – Becky Oct 20 '16 at 20:33
  • or at least previewed to that with the crop box. – Becky Oct 20 '16 at 20:35
  • @Becky unfortunately you cannot do that with just CSS. Say you have an image with a class of `.crop-me-please` you can do a bit of jquery: `$('.crop-me-please').height($('.crop-me-please.').width());`. This will set the height to be equal to the width. – Wild Beard Oct 20 '16 at 20:44
  • @GeorgeKatsanos You weren't wrong nor out of line from the beginning. You're simply dealing with someone who needs to be spoon-fed. Becky, could you please post what code you have so far? Hopefully, it's more than simply adding an input submit to yet another copy-pasted SO answer (http://stackoverflow.com/a/4459419/4946681) – Nate Oct 20 '16 at 21:46

1 Answers1

-1

It does not look like you will be able to "drag to reposition" your photo. To do this make sure you have the attribute: draggable = "true" in at least one of the input tags. One easy way to implement Javascript into the action of dragging (such as adjusting the opacity of the image in certain areas) is to add the attribute: ondragstart="" and put whatever Javascript you want in the quotes. If you like, you can even put a HTML5 table in front of the image so you can make it a heck of a lot easier to change opacity in different areas.

NathanielSantley
  • 190
  • 16