Image Proportions

Question

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.

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?

Answer 1

看起来你不能“拖动重新定位”你的照片。 为此，请确保您具有以下属性：     draggable =“true” 在至少一个输入标签中。 将Javascript实现为拖动操作的一种简单方法（例如在某些区域调整图像的不透明度）是添加属性：     ondragstart = “” 并在引号中输入您想要的任何Javascript。 如果你愿意，你甚至可以在图像前放置一个HTML5表格，这样你就可以更容易地改变不同区域的不透明度。