HTML5 Resize image before upload without ajax

Allows to resize a file input image before upload to the server. The resized image will be attached to original file input. Then you can submit your form without ajax or handle it as you need.

Usage as jQuery Plugin

<form>
    <label>Select image</label>
    <input type="file" id="media_file" name="media_file" accept="image/*" capture="camera" class="form-control-file">

    <input type="submit" value="Upload"/>
</form>

<script src="js/jquery.min.js"></script>
<script src="js/jquery-image-upload-resizer.js"></script>
<script>
    $('#media_file').imageUploadResizer({
        max_width: 800, // Defaults 1000
        max_height: 600, // Defaults 1000
        quality: 0.8, // Defaults 1
        do_not_resize: ['gif', 'svg'], // Defaults []
    });
</script>

Usage as Vue Component

<form>
    <label>Select image</label>
    <image-upload-resizer-component
        name='media_file'
        :max-width="512"
        :max-height="512"
        :class-name="['form-control-file']"
        accept="image/*"
        capture="camera"
        doNotResize="['gif', 'svg']"
    ></image-upload-resizer-component>

    <input type="submit" value="Upload"/>
</form>