Passing base64 encoded image through form

Question

I am using an image editing tool for users to upload their images and adjust: http://foliotek.github.io/Croppie/

I am able to shorten the base64 string by sending it through a couple functions. I am then trying to insert this into a hidden field and submit the form.

$('#submit-update-business').on('click', function(e){
    e.preventDefault();
    // console.log(vanilla.get());
    vanilla.result('canvas', 'viewport', 'png', 0).then(function(src){
        var processed = Base64.encode(JSON.stringify(src));
        $('#new_image').val(processed);
        $('#update-business').submit();
    });
});

I know the string is long, but I can't figure out any other way to do this. I've also seen answers that suggest submitting the form through ajax, but this seems to have the same pitfalls. This actually manages to work ok on desktop browsers. It's the mobile ones that have a problem. I can limit the dimensions of the image to less than 3000x3000, but unfortunately phones seem to be taking much higher quality photos.

The tool I'm using, Croppie, has a way to get the data points and zoom, but not the orientation. If there is a way to save this data, or use the base64 data, and re-render the image, and somehow use that image so the image actually goes through, that would be great. If there is a solution I can use just for mobile, that would work too, since it works just fine on desktop.

Answer 1

With ajax post instead of submit you don't need a hidden_field if it has length limits in mobile browser. Base64 encoding overhead is not necessary too if you don't need it on a server side.

.post(
  "/ajaxpostURL.php",
  {
    new_image: processed, // or new_image: src,
    other_form_param_or_data: 'some_data'
  }
);