0

I have a question about using transloader to upload my images. What I want to do is the following:

You have a file upload button and when you select an image a pop-up opens on your screen where you have the option to select a part of your image. This can you do in portrait & landscape. Here is an image to clarify:

enter image description here

As you can see I have two options. Portrait and landscape. I save the coordinates in the form fields. The upper input fields are filled with the landscape coordinates and on the bottom with portrait coordinates.

Now when you click "OK" I would like to save three images. The original, the portrait image and the landscape image.

I know there's an option "crop" where you can select the x's and y's so I know I can crop the image.

The rendering of the image in my pop-up happens like this:

// FILE UPLOAD CHANGE
$('#background').live('change', function(){ readURL(this); });
function readURL(input) {
    // SHOW MODAL
    $('#backgroundModal').modal('show');

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

        reader.onload = function (e) {
            // LOAD SRC ATTR AND SHOW IMAGE
            $('#backgroundimg').attr('src', e.target.result);
            $('#backgroundimg').show();

            // LOAD JCROP (PORTRAIT)
            loadjCrops(16,9,10,65,130,65);
            // ADD SOME COLOR TO LANDSCAPE BUTTON
            $('#landscape').addClass('selected');
        }
        reader.readAsDataURL(input.files[0]);
    }
}

Now how can I save the three images? I don't have them in a form ... .

nielsv
  • 6,540
  • 35
  • 111
  • 215

1 Answers1

1

There's an example application written by one of the cofounders that showcases how to do cropping here https://github.com/tim-kos/transloadit-image-cropper

kvz
  • 5,517
  • 1
  • 42
  • 33
  • You might be better off switching to Uppy these days, also by Transloadit, which features image cropping and resize before uploading https://uppy.io/docs/image-editor/ – kvz Mar 11 '21 at 16:49