HTML5 Pre-resize images before uploading

Question

Here s a noodle scratcher   Bearing in mind we have HTML5 local storage and xhr v2 and what not  I was wondering if anyone could find a working example or even just give me a yes or no for this question   Is it possible to Pre-size an image using the new local storage  or whatever   so that a user who does not have a clue about resizing an image can drag their 10mb image into my website  it resize it using the new localstorage and THEN upload it at the smaller size   I know full well you can do it with Flash  Java applets  active X    The question is if you can do with Javascript   Html5   Looking forward to the response on this one   Ta for now

User · Answer

I tackled this problem a few years ago and uploaded my solution to github as https://github.com/rossturner/HTML5-ImageUploader

robertc's answer uses the solution proposed in the Mozilla Hacks blog post, however I found this gave really poor image quality when resizing to a scale that was not 2:1 (or a multiple thereof). I started experimenting with different image resizing algorithms, although most ended up being quite slow or else were not great in quality either.

Finally I came up with a solution which I believe executes quickly and has pretty good performance too - as the Mozilla solution of copying from 1 canvas to another works quickly and without loss of image quality at a 2:1 ratio, given a target of x pixels wide and y pixels tall, I use this canvas resizing method until the image is between x and 2 x, and y and 2 y. At this point I then turn to algorithmic image resizing for the final "step" of resizing down to the target size. After trying several different algorithms I settled on bilinear interpolation taken from a blog which is not online anymore but accessible via the Internet Archive, which gives good results, here's the applicable code:

ImageUploader.prototype.scaleImage = function(img, completionCallback) {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);

    while (canvas.width >= (2 * this.config.maxWidth)) {
        canvas = this.getHalfScaleCanvas(canvas);
    }

    if (canvas.width > this.config.maxWidth) {
        canvas = this.scaleCanvasWithAlgorithm(canvas);
    }

    var imageData = canvas.toDataURL('image/jpeg', this.config.quality);
    this.performUpload(imageData, completionCallback);
};

ImageUploader.prototype.scaleCanvasWithAlgorithm = function(canvas) {
    var scaledCanvas = document.createElement('canvas');

    var scale = this.config.maxWidth / canvas.width;

    scaledCanvas.width = canvas.width * scale;
    scaledCanvas.height = canvas.height * scale;

    var srcImgData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
    var destImgData = scaledCanvas.getContext('2d').createImageData(scaledCanvas.width, scaledCanvas.height);

    this.applyBilinearInterpolation(srcImgData, destImgData, scale);

    scaledCanvas.getContext('2d').putImageData(destImgData, 0, 0);

    return scaledCanvas;
};

ImageUploader.prototype.getHalfScaleCanvas = function(canvas) {
    var halfCanvas = document.createElement('canvas');
    halfCanvas.width = canvas.width / 2;
    halfCanvas.height = canvas.height / 2;

    halfCanvas.getContext('2d').drawImage(canvas, 0, 0, halfCanvas.width, halfCanvas.height);

    return halfCanvas;
};

ImageUploader.prototype.applyBilinearInterpolation = function(srcCanvasData, destCanvasData, scale) {
    function inner(f00, f10, f01, f11, x, y) {
        var un_x = 1.0 - x;
        var un_y = 1.0 - y;
        return (f00 * un_x * un_y + f10 * x * un_y + f01 * un_x * y + f11 * x * y);
    }
    var i, j;
    var iyv, iy0, iy1, ixv, ix0, ix1;
    var idxD, idxS00, idxS10, idxS01, idxS11;
    var dx, dy;
    var r, g, b, a;
    for (i = 0; i < destCanvasData.height; ++i) {
        iyv = i / scale;
        iy0 = Math.floor(iyv);
        // Math.ceil can go over bounds
        iy1 = (Math.ceil(iyv) > (srcCanvasData.height - 1) ? (srcCanvasData.height - 1) : Math.ceil(iyv));
        for (j = 0; j < destCanvasData.width; ++j) {
            ixv = j / scale;
            ix0 = Math.floor(ixv);
            // Math.ceil can go over bounds
            ix1 = (Math.ceil(ixv) > (srcCanvasData.width - 1) ? (srcCanvasData.width - 1) : Math.ceil(ixv));
            idxD = (j + destCanvasData.width * i) * 4;
            // matrix to vector indices
            idxS00 = (ix0 + srcCanvasData.width * iy0) * 4;
            idxS10 = (ix1 + srcCanvasData.width * iy0) * 4;
            idxS01 = (ix0 + srcCanvasData.width * iy1) * 4;
            idxS11 = (ix1 + srcCanvasData.width * iy1) * 4;
            // overall coordinates to unit square
            dx = ixv - ix0;
            dy = iyv - iy0;
            // I let the r, g, b, a on purpose for debugging
            r = inner(srcCanvasData.data[idxS00], srcCanvasData.data[idxS10], srcCanvasData.data[idxS01], srcCanvasData.data[idxS11], dx, dy);
            destCanvasData.data[idxD] = r;

            g = inner(srcCanvasData.data[idxS00 + 1], srcCanvasData.data[idxS10 + 1], srcCanvasData.data[idxS01 + 1], srcCanvasData.data[idxS11 + 1], dx, dy);
            destCanvasData.data[idxD + 1] = g;

            b = inner(srcCanvasData.data[idxS00 + 2], srcCanvasData.data[idxS10 + 2], srcCanvasData.data[idxS01 + 2], srcCanvasData.data[idxS11 + 2], dx, dy);
            destCanvasData.data[idxD + 2] = b;

            a = inner(srcCanvasData.data[idxS00 + 3], srcCanvasData.data[idxS10 + 3], srcCanvasData.data[idxS01 + 3], srcCanvasData.data[idxS11 + 3], dx, dy);
            destCanvasData.data[idxD + 3] = a;
        }
    }
};

This scales an image down to a width of config.maxWidth, maintaining the original aspect ratio. At the time of development this worked on iPad/iPhone Safari in addition to major desktop browsers (IE9+, Firefox, Chrome) so I expect it will still be compatible given the broader uptake of HTML5 today. Note that the canvas.toDataURL() call takes a mime type and image quality which will allow you to control the quality and output file format (potentially different to input if you wish).

The only point this doesn't cover is maintaining the orientation information, without knowledge of this metadata the image is resized and saved as-is, losing any metadata within the image for orientation meaning that images taken on a tablet device "upside down" were rendered as such, although they would have been flipped in the device's camera viewfinder. If this is a concern, this blog post has a good guide and code examples on how to accomplish this, which I'm sure could be integrated to the above code.

User · Answer

fd append  image   dataurl     This will not work  On PHP side you can not save file with this   Use this code instead   var blobBin   atob dataurl split      1    var array       for var i   0  i  lt  blobBin length  i        array push blobBin charCodeAt i      var file   new Blob  new Uint8Array array     type   image png   name   avatar png      fd append  image   file      blob file

User · Answer

Yes  use the File API  then you can process the images with the canvas element   This Mozilla Hacks blog post walks you through most of the process   For reference here s the assembled source code from the blog post      from an input element var filesToUpload   input files  var file   filesToUpload 0    var img   document createElement  img    var reader   new FileReader      reader onload   function e   img src   e target result  reader readAsDataURL file    var ctx   canvas getContext  2d    ctx drawImage img  0  0    var MAX WIDTH   800  var MAX HEIGHT   600  var width   img width  var height   img height   if  width  gt  height      if  width  gt  MAX WIDTH        height    MAX WIDTH   width      width   MAX WIDTH        else     if  height  gt  MAX HEIGHT        width    MAX HEIGHT   height      height   MAX HEIGHT        canvas width   width  canvas height   height  var ctx   canvas getContext  2d    ctx drawImage img  0  0  width  height    var dataurl   canvas toDataURL  image png       Post dataurl to the server with AJAX

User · Answer

If you don t want to reinvent the wheel you may try plupload com

User · Answer

You can use dropzone js if you want to use simple and easy upload manager with resizing before upload functions   It has builtin resize functions  but you can provide your own if you want

User · Answer

Resizing images in a canvas element is generally bad idea since it uses the cheapest box interpolation  The resulting image noticeable degrades in quality  I d recommend using http   nodeca github io pica demo  which can perform Lanczos transformation instead  The demo page above shows difference between canvas and Lanczos approaches   It also uses web workers for resizing images in parallel  There is also WEBGL implementation   There are some online image resizers that use pica for doing the job  like https   myimageresizer com

User · Answer

Typescript  async resizeImg file  Blob   Promise lt Blob gt        let img   document createElement  img        img src   await new Promise lt any gt  resolve   gt            let reader   new FileReader            reader onload    e  any    gt  resolve e target result           reader readAsDataURL file               await new Promise resolve   gt  img onload   resolve      let canvas   document createElement  canvas        let ctx   canvas getContext  2d        ctx drawImage img  0  0       let MAX WIDTH   1000      let MAX HEIGHT   1000      let width   img naturalWidth      let height   img naturalHeight      if  width  gt  height            if  width  gt  MAX WIDTH                height    MAX WIDTH   width              width   MAX WIDTH                  else           if  height  gt  MAX HEIGHT                width    MAX HEIGHT   height              height   MAX HEIGHT                      canvas width   width      canvas height   height      ctx   canvas getContext  2d        ctx drawImage img  0  0  width  height       let result   await new Promise lt Blob gt  resolve   gt    canvas toBlob resolve   image jpeg   0 95           return result

User · Answer

Correction to above    lt img src    id  image  gt   lt input id  input  type  file  onchange  handleFiles    gt   lt script gt   function handleFiles         var filesToUpload   document getElementById  input   files      var file   filesToUpload 0           Create an image     var img   document createElement  img           Create a file reader     var reader   new FileReader           Set the image once loaded into file reader     reader onload   function e                img src   e target result           var canvas   document createElement  canvas              var canvas       lt canvas gt      id   testing    0           var ctx   canvas getContext  2d            ctx drawImage img  0  0            var MAX WIDTH   400          var MAX HEIGHT   300          var width   img width          var height   img height           if  width  gt  height              if  width  gt  MAX WIDTH                height    MAX WIDTH   width              width   MAX WIDTH                        else             if  height  gt  MAX HEIGHT                width    MAX HEIGHT   height              height   MAX HEIGHT                                canvas width   width          canvas height   height          var ctx   canvas getContext  2d            ctx drawImage img  0  0  width  height            var dataurl   canvas toDataURL  image png            document getElementById  image   src   dataurl                    Load files into file reader     reader readAsDataURL file            Post the data            var fd   new FormData        fd append  name    some filename jpg        fd append  image   dataurl       fd append  info    lah de dah             lt  script gt

User · Answer

Modification to the answer by Justin that works for me    Added img onload Expand the POST request with a real example    function handleFiles         var dataurl   null      var filesToUpload   document getElementById  photo   files      var file   filesToUpload 0           Create an image     var img   document createElement  img           Create a file reader     var reader   new FileReader           Set the image once loaded into file reader     reader onload   function e                img src   e target result           img onload   function                  var canvas   document createElement  canvas                var ctx   canvas getContext  2d                ctx drawImage img  0  0                var MAX WIDTH   800              var MAX HEIGHT   600              var width   img width              var height   img height               if  width   height                  if  width   MAX WIDTH                    height    MAX WIDTH   width                  width   MAX WIDTH                                else                 if  height   MAX HEIGHT                    width    MAX HEIGHT   height                  height   MAX HEIGHT                                            canvas width   width              canvas height   height              var ctx   canvas getContext  2d                ctx drawImage img  0  0  width  height                dataurl   canvas toDataURL  image jpeg                    Post the data             var fd   new FormData                fd append  name    some filename jpg                fd append  image   dataurl               fd append  info    lah de dah                  ajax                   url    ajax photo                   data  fd                  cache  false                  contentType  false                  processData  false                  type   POST                   success  function data                           form photo   0  reset                        location reload                                                   img onload              Load files into file reader     reader readAsDataURL file

User · Answer

The accepted answer works great  but the resize logic ignores the case in which the image is larger than the maximum in only one of the axes  for example  height   maxHeight but width  lt   maxWidth    I think the following code takes care of all cases in a more straight-forward and functional way  ignore the typescript type annotations if using plain javascript    private scaleDownSize width  number  height  number  maxWidth  number  maxHeight  number    width  number  height  number        if  width  lt   maxWidth  amp  amp  height  lt   maxHeight        return   width  height        else if  width   maxWidth  gt  height   maxHeight        return   width  maxWidth  height  height   maxWidth   width       else       return   width  width   maxHeight   height  height  maxHeight

[image] HTML5 Pre-resize images before uploading

Examples related to image

Examples related to html

Examples related to upload

Examples related to xmlhttprequest

Examples related to local-storage