Crop an image before upload

Thanks for asking me which plugins I use to crop an image like Instagram.

The Instagram has a fixed frame that we upload every photo we want to upload as much as that window. And finally, the Instagram will display it at 640x640.

Hey @shabzadeh97

I have temporarily unlisted your topic as it is unclear what this is about. Who asked you what plugins you use? Do you have a question?

gandalf458
moderator

1 Like

A grammatical mistake is my type of writing. My English is not good. Excuse me

I want to do a photo uploading section as an instagram. And what did I mean by using a plugin so I can implement this?
The Instagram has a fixed frame that we upload every photo we want to upload as much as that window. And finally, the Instagram will display it at 640x640.

So are you asking for a ready-made JavaScript solution which will allow you to do this on your site?

1 Like

Yes, like jcrop
But jcrop is not suitable for me

I just checked out jcrop. Amazing. Why isn’t it suitable for you? Are you not using jQuery?

V/r,

^ _ ^

1 Like

Do you want some automated code so the user selects the image and it is resized to 640x640 on upload?

I assume that if the image is not square the longest side will be sized to 640 and keep the aspect ratio?

Another thing to think about is security as you will have people trying to upload bad code to take over or corrupt your site. Also will you be vetting images as people again will be uploading bad images if you do not control it.

1 Like

No, I want to give the user a frame of 640 * 640, which sets the range of your photo in this range. Because if I cut the photo automatically, the original part of some photos may be removed.

Just curious if you looked at all the jcrop demos? There’s one called “Thumbnail” that might do what you are requesting. (ie, set the thumbnail to 640 * 640, and regardless of how the user crops the image, the end result will always be 640 * 640.)

HTH,

^ _ ^

2 Likes

<input type="file" id="FileUpload1" accept=".jpg,.png,.gif" />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="5">
    <tr>
        <td>
            <img id="Image1" src="" alt="" style="display: none" />
        </td>
        <td>
            <canvas id="canvas" height="5" width="5"></canvas>
        </td>
    </tr>
</table>
<br />
<input type="button" id="btnCrop" value="Crop" />
<input type="button" id="btnUpload" value="Upload" />

<input type="hidden" name="imgX1" id="imgX1" />
<input type="hidden" name="imgY1" id="imgY1" />
<input type="hidden" name="imgWidth" id="imgWidth" />
<input type="hidden" name="imgHeight" id="imgHeight" />
<input type="hidden" name="imgCropped" id="imgCropped" />
@section Scripts {
    <script src="~/AdminLayout/Scripts/jquery.Jcrop.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#FileUpload1').change(function () {
                $('#Image1').hide();
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#Image1').show();
                    $('#Image1').attr("src", e.target.result);
                    $('#Image1').Jcrop({
                        aspectRatio: 1,
                        setSelect: [50, 0, 300, 300],
                        allowResize: false
                    });
                };
                reader.readAsDataURL($(this)[0].files[0]);
            });

            $('#btnCrop').click(function () {
                var x1 = $('#imgX1').val();
                var y1 = $('#imgY1').val();
                var width = $('#imgWidth').val();
                var height = $('#imgHeight').val();
                var canvas = $("#canvas")[0];
                var context = canvas.getContext('2d');
                var img = new Image();
                img.onload = function () {
                    canvas.height = height;
                    canvas.width = width;
                    context.drawImage(img, x1, y1, width, height, 0, 0, width, height);
                    $('#imgCropped').val(canvas.toDataURL());
                    $('#btnUpload').show();

                };
                img.src = $('#Image1').attr("src");
            });

        });
        function SetCoordinates(c) {
            $('#imgX1').val(c.x);
            $('#imgY1').val(c.y);
            $('#imgWidth').val(c.w);
            $('#imgHeight').val(c.h);
            $('#btnCrop').show();
        };
    </script>
}







this is my code . At first, I create a frame of the size that I want, but by clicking on the photo, I can resize the frame. How can I disable this feature?
And that the created frame is not fixed and I can move it to different parts of the photo?

I haven’t worked with the code, just offering a suggestion. The click-n-drag frame that the user places inside the image is supposed to move/resize. That allows the user full control over where the thumbnail will be cropped. And the user can make his/her frame larger or smaller, but the thumbnail size always remains the same (whatever size you command.)

HTH,

^ _ ^

1 Like

I will display the uploaded image as it is in the canvas. In this case, I have to cut a 1080x1080 image, but if we look at it, we can only resize this image and display it correctly without no cropping. What should I do to solve this problem?

I’m not sure I understand your query. If the image is 1080 by 1080, and the canvas (thumbnail) area is set to 640 x 640, then the user should be able to click and hold within the larger image, drag a square to what the user wants to crop, and the area within that square should appear within the canvas (thumbnail) area.

Yes, if the user wants he/she can drag the entire image, but then in that instance the entire 1080 x 1080 image should appear within the thumbnail area. Is this not happening with your test code?

V/r,

^ _ ^

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.