locked
Resize before upload RRS feed

  • Question

  • User1510859543 posted

    We are using an aspx page with code-behind to resize a file from a FileUpload control (see sample code below) and all works fine for most images. Now, because cameras are getting higher resolution the users are getting errors (probably from their ISP) due to the large files.  Is there any way to resize the photo using jQuery or javascript before it is uploaded?

    Friday, January 12, 2018 8:30 PM

All replies

  • User-474980206 posted

    the error is probably your server. you will need to update the max post size, and max memory (if you are doing the resize in memory)

    Saturday, January 13, 2018 7:53 PM
  • User-707554951 posted

    Hi dlchase

    canvasResize is a plugin works both with jQuery and Zepto that allows to auto resize/rotate client side images using HTML5 canvas tag

    1. Add jQuery library in your head section

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    2. Include necessary javascript files in your html page

    <script src="jquery.canvasResize.js"></script>
    <script src="canvasResize.js"></script>

    3. Basic Usage

    $('input[name=photo]').change(function(e) {
    var file = e.target.files[0];
    canvasResize(file, {
    width: 300,
    height: 0,
    crop: false,
    quality: 80,
    //rotate: 90,
    callback: function(data, width, height) {
    $(img).attr('src', data);
    }
    });
    });

    4. Options

    width : 300, // Image width.
    height : 0, // Image height, default 0 (flexible).
    crop : false, // default false.
    quality : 80, // Image quality default 80.
    rotate : 90, // Image rotation default 0
    callback : function(){},

    Related link: https://www.jqueryscript.net/layout/jQuery-Plugin-for-Client-Side-Image-Resizing-canvasResize.html

    Best regards

    Cathy

    Monday, January 15, 2018 7:59 AM