Resizing an image in an HTML5 canvas

Question

I m trying to create a thumbnail image on the client side using javascript and a canvas element  but when I shrink the image down  it looks terrible   It looks as if it was downsized in photoshop with the resampling set to  Nearest Neighbor  instead of Bicubic   I know its possible to get this to look right  because this site can do it just fine using a canvas as well   I ve tried using the same code they do as shown in the   Source   link  but it still looks terrible   Is there something I m missing  some setting that needs to be set or something   EDIT   I m trying to resize a jpg   I have tried resizing the same jpg on the linked site and in photoshop  and it looks fine when downsized   Here is the relevant code   reader onloadend   function e        var img   new Image        var ctx   canvas getContext  2d        var canvasCopy   document createElement  canvas        var copyContext   canvasCopy getContext  2d         img onload   function                 var ratio   1           if img width  gt  maxWidth              ratio   maxWidth   img width          else if img height  gt  maxHeight              ratio   maxHeight   img height           canvasCopy width   img width          canvasCopy height   img height          copyContext drawImage img  0  0            canvas width   img width   ratio          canvas height   img height   ratio          ctx drawImage canvasCopy  0  0  canvasCopy width  canvasCopy height  0  0  canvas width  canvas height               img src   reader result      EDIT2   Seems I was mistaken  the linked website wasn t doing any better of a job of downsizing the image   I tried the other methods suggested and none of them look any better   This is what the different methods resulted in   Photoshop     Canvas     Image with image-rendering  optimizeQuality set and scaled with width height     Image with image-rendering  optimizeQuality set and scaled with -moz-transform     Canvas resize on pixastic     I guess this means firefox isn t using bicubic sampling like its supposed to   I ll just have to wait until they actually add it   EDIT3   Original Image

User · Answer

So something interesting that I found a while ago while working with canvas that might be helpful:

To resize the canvas control on its own, you need to use the height="" and width="" attributes (or canvas.width/canvas.height elements). If you use CSS to resize the canvas, it will actually stretch (i.e.: resize) the content of the canvas to fit the full canvas (rather than simply increasing or decreasing the area of the canvas.

It'd be worth a shot to try drawing the image into a canvas control with the height and width attributes set to the size of the image and then using CSS to resize the canvas to the size you're looking for. Perhaps this would use a different resizing algorithm.

It should also be noted that canvas has different effects in different browsers (and even different versions of different browsers). The algorithms and techniques used in the browsers is likely to change over time (especially with Firefox 4 and Chrome 6 coming out so soon, which will place heavy emphasis on canvas rendering performance).

In addition, you may want to give SVG a shot, too, as it likely uses a different algorithm as well.

Best of luck!

User · Answer

Try pica - that s a highly optimized resizer with selectable algorythms  See demo    For example  original image from first post is resized in 120ms with Lanczos filter and 3px window or 60ms with Box filter and 0 5px window  For huge 17mb image 5000x3000px resize takes  1s on desktop and 3s on mobile   All resize principles were described very well in this thread  and pica does not add rocket science  But it s optimized very well for modern JIT-s  and is ready to use out of box  via npm or bower   Also  it use webworkers when available to avoid interface freezes   I also plan to add unsharp mask support soon  because it s very useful after downscale

User · Answer

Thanks  syockit for an awesome answer  however  I had to reformat a little as follows to make it work  Perhaps due to DOM scanning issues     document  ready function          img   on  load   clickA   function clickA         var img   this      var canvas   document createElement  canvas        new thumbnailer canvas  img  50  3       document body appendChild canvas      function thumbnailer elem  img  sx  lobes        this canvas   elem      elem width   img width      elem height   img height      elem style display    none       this ctx   elem getContext  2d        this ctx drawImage img  0  0       this img   img      this src   this ctx getImageData 0  0  img width  img height       this dest             width  sx          height  Math round img height   sx   img width             this dest data   new Array this dest width   this dest height   3       this lanczos   lanczosCreate lobes       this ratio   img width   sx      this rcp ratio   2   this ratio      this range2   Math ceil this ratio   lobes   2       this cacheLanc           this center           this icenter           setTimeout process1  0  this  0        returns a function that calculates lanczos weight function lanczosCreate lobes        return function  x            if  x  gt  lobes              return 0          x    Math PI          if  Math abs x   lt  1e-16              return 1         var xx   x   lobes          return Math sin x    Math sin xx    x   xx           process1   function  self  u        self center x    u   0 5    self ratio      self icenter x   Math floor self center x       for  var v   0  v  lt  self dest height  v              self center y    v   0 5    self ratio          self icenter y   Math floor self center y           var a  r  g  b          a   r   g   b   0          for  var i   self icenter x - self range2  i  lt   self icenter x   self range2  i                  if  i  lt  0    i  gt   self src width                  continue              var f x   Math floor 1000   Math abs i - self center x                if   self cacheLanc f x                   self cacheLanc f x                    for  var j   self icenter y - self range2  j  lt   self icenter y   self range2  j                      if  j  lt  0    j  gt   self src height                      continue                  var f y   Math floor 1000   Math abs j - self center y                    if  self cacheLanc f x  f y     undefined                      self cacheLanc f x  f y    self lanczos Math sqrt Math pow f x   self rcp ratio  2    Math pow f y   self rcp ratio  2     1000                   weight   self cacheLanc f x  f y                   if  weight  gt  0                        var idx    j   self src width   i    4                      a    weight                      r    weight   self src data idx                       g    weight   self src data idx   1                       b    weight   self src data idx   2                                                     var idx    v   self dest width   u    3          self dest data idx    r   a          self dest data idx   1    g   a          self dest data idx   2    b   a             if    u  lt  self dest width          setTimeout process1  0  self  u       else         setTimeout process2  0  self       process2   function  self        self canvas width   self dest width      self canvas height   self dest height      self ctx drawImage self img  0  0       self src   self ctx getImageData 0  0  self dest width  self dest height       var idx  idx2      for  var i   0  i  lt  self dest width  i              for  var j   0  j  lt  self dest height  j                  idx    j   self dest width   i    3              idx2    j   self dest width   i    4              self src data idx2    self dest data idx               self src data idx2   1    self dest data idx   1               self src data idx2   2    self dest data idx   2                       self ctx putImageData self src  0  0       self canvas style display    block

User · Answer

The problem with some of this solutions is that they access directly the pixel data and loop through it to perform the downsampling  Depending on the size of the image this can be very resource intensive  and it would be better to use the browser s internal algorithms   The drawImage   function is using a linear-interpolation  nearest-neighbor resampling method  That works well when you are not resizing down more than half the original size   If you loop to only resize max one half at a time  the results would be quite good  and much faster than accessing pixel data   This function downsample to half at a time until reaching the desired size     function resize image  src  dst  type  quality          var tmp   new Image             canvas  context  cW  cH        type   type     image jpeg        quality   quality    0 92        cW   src naturalWidth       cH   src naturalHeight        tmp src   src src       tmp onload   function              canvas   document createElement   canvas              cW    2          cH    2           if   cW  lt  src width   cW   src width          if   cH  lt  src height   cH   src height           canvas width   cW          canvas height   cH          context   canvas getContext   2d             context drawImage  tmp  0  0  cW  cH             dst src   canvas toDataURL  type  quality             if   cW  lt   src width    cH  lt   src height              return           tmp src   dst src                   The images sent as parameters can be in the DOM or be image objects   resize image       original    0        smaller    0       Credits to this post

User · Answer

If you re simply trying to resize an image  I d recommend setting width and height of the image with CSS   Here s a quick example    small-image       width  100px      height  100px      Note that the height and width can also be set using JavaScript   Here s quick code sample   var img   document getElement  my-image    img style width   100    px       Make sure you add the  px  to the end  img style height   100    px      otherwise you ll confuse IE   Also  to ensure that the resized image looks good  add the following css rules to image selector    -ms-interpolation-mode  bicubic  introduce in IE7 image-rendering  optimizeQuality  introduced in FireFox 3 6   As far as I can tell  all browsers except IE using an bicubic algorithm to resize images by default  so your resized images should look good in Firefox and Chrome   If setting the css width and height doesn t work  you may want to play with a css transform    -moz-transform  scale sx   sy   -webkit-transform scale sx   sy     If for whatever reason you need to use a canvas  please note that there are two ways an image can be resize  by resizing the canvas with css or by drawing the image at a smaller size   See this question for more details

User · Answer

I ve put up some algorithms to do image interpolation on html canvas pixel arrays that might be useful here   https   web archive org web 20170104190425 http   jsperf com 80 pixel-interpolation 2  These can be copy pasted and can be used inside of web workers to resize images  or any other operation that requires interpolation - I m using them to defish images at the moment    I haven t added the lanczos stuff above  so feel free to add that as a comparison if you d like

User · Answer

I converted  syockit s answer as well as the step-down approach into a reusable Angular service for anyone who s interested   https   gist github com fisch0920 37bac5e741eaec60e983  I included both solutions because they both have their own pros   cons   The lanczos convolution approach is higher quality at the cost of being slower  whereas the step-wise downscaling approach produces reasonably antialiased results and is significantly faster   Example usage   angular module  demo   controller  ExampleCtrl   function  imageService         EXAMPLE USAGE      NOTE  it s bad practice to access the DOM inside a controller        but this is just to show the example usage        resize by lanczos-sinc filter   imageService resize     myimg   0   256  256       then function  resizedImage             do something with resized image              resize by stepping down image size in increments of 2x   imageService resizeStep     myimg   0   256  256       then function  resizedImage             do something with resized image

User · Answer

I just ran a page of side by sides comparisons and unless something has changed recently  I could see no better downsizing  scaling  using canvas vs  simple css  I tested in FF6 Mac OSX 10 7  Still slightly soft vs  the original   I did however stumble upon something that did make a huge difference and that was using image filters in browsers that support canvas  You can actually manipulate images much like you can in Photoshop with blur  sharpen  saturation  ripple  grayscale  etc   I then found an awesome jQuery plug-in which makes application of these filters a snap  http   codecanyon net item jsmanipulate-jquery-image-manipulation-plugin 428234  I simply apply the sharpen filter right after resizing the image which should give you the desired effect  I didn t even have to use a canvas element

User · Answer

Fast and simple Javascript image resizer  https   github com calvintwr blitz-hermite-resize const blitz   Blitz create       Promise    blitz       source  DOM Image DOM Canvas jQuery DataURL File      width  400      height  600    then output   gt           handle output   catch error   gt           handle error        Await    let resized   await blizt            Old school callback    const blitz   Blitz create  callback   blitz        function output           run your callback      History This is really after many rounds of research  reading and trying  The resizer algorithm uses  ViliusL s Hermite script  Hermite resizer is really the fastest and gives reasonably good output   Extended with features you need  Forks 1 worker to do the resizing so that it doesn t freeze your browser when resizing  unlike all other JS resizers out there

User · Answer

Looking for another great simple solution   var img document createElement  img    img src canvas toDataURL      img  css  background   backgroundColor     img  width settings width     img  height settings height     This solution will use the resize algorith of browser

User · Answer

Fast image resize resample algorithm using Hermite filter with JavaScript  Support transparency  gives good quality  Preview     Update  version 2 0 added on GitHub  faster  web workers   transferable objects   Finally i got it working     Git  https   github com viliusle Hermite-resize Demo  http   viliusle github io miniPaint          Hermite resize - fast image resize resample using Hermite filter  1 cpu version          param  HtmlElement  canvas     param  int  width     param  int  height     param  boolean  resize canvas if true  canvas will be resized  Optional      function resample single canvas  width  height  resize canvas        var width source   canvas width      var height source   canvas height      width   Math round width       height   Math round height        var ratio w   width source   width      var ratio h   height source   height      var ratio w half   Math ceil ratio w   2       var ratio h half   Math ceil ratio h   2        var ctx   canvas getContext  2d        var img   ctx getImageData 0  0  width source  height source       var img2   ctx createImageData width  height       var data   img data      var data2   img2 data       for  var j   0  j  lt  height  j              for  var i   0  i  lt  width  i                  var x2    i   j   width    4              var weight   0              var weights   0              var weights alpha   0              var gx r   0              var gx g   0              var gx b   0              var gx a   0              var center y    j   0 5    ratio h              var yy start   Math floor j   ratio h               var yy stop   Math ceil  j   1    ratio h               for  var yy   yy start  yy  lt  yy stop  yy                      var dy   Math abs center y -  yy   0 5     ratio h half                  var center x    i   0 5    ratio w                  var w0   dy   dy    pre-calc part of w                 var xx start   Math floor i   ratio w                   var xx stop   Math ceil  i   1    ratio w                   for  var xx   xx start  xx  lt  xx stop  xx                          var dx   Math abs center x -  xx   0 5     ratio w half                      var w   Math sqrt w0   dx   dx                       if  w  gt   1                              pixel too far                         continue                                              hermite filter                     weight   2   w   w   w - 3   w   w   1                      var pos x   4    xx   yy   width source                         alpha                     gx a    weight   data pos x   3                       weights alpha    weight                        colors                     if  data pos x   3   lt  255                          weight   weight   data pos x   3    250                      gx r    weight   data pos x                       gx g    weight   data pos x   1                       gx b    weight   data pos x   2                       weights    weight                                              data2 x2    gx r   weights              data2 x2   1    gx g   weights              data2 x2   2    gx b   weights              data2 x2   3    gx a   weights alpha                        clear and resize canvas     if  resize canvas     true            canvas width   width          canvas height   height        else           ctx clearRect 0  0  width source  height source                draw     ctx putImageData img2  0  0

User · Answer

I know this is an old thread but it might be useful for some people such as myself that months after are hitting this issue for the first time   Here is some code that resizes the image every time you reload the image  I am aware this is not optimal at all  but I provide it as a proof of concept    Also  sorry for using jQuery for simple selectors but I just feel too comfortable with the syntax    x000D   x000D    document  on  ready   createImage   x000D    window  on  resize   createImage   x000D   x000D  var createImage   function    x000D    var canvas   document getElementById  myCanvas    x000D    canvas width   window innerWidth      window  width    x000D    canvas height   window innerHeight      window  height    x000D    var ctx   canvas getContext  2d    x000D    img   new Image    x000D    img addEventListener  load   function      x000D      ctx drawImage this  0  0  w  h   x000D        x000D    img src    http   www ruinvalor com Telanor images original jpg   x000D     x000D  html  body  x000D    height  100   x000D    width  100   x000D    margin  0  x000D    padding  0  x000D    background   000  x000D    x000D  canvas  x000D    position  absolute  x000D    left  0  x000D    top  0  x000D    z-index  0  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt html gt  x000D     lt head gt  x000D       lt meta charset  utf-8    gt  x000D       lt title gt Canvas Resize lt  title gt  x000D     lt  head gt  x000D     lt body gt  x000D       lt canvas id  myCanvas  gt  lt  canvas gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    My createImage function is called once when the document is loaded and after that it is called every time the window receives a resize event   I tested it in Chrome 6 and Firefox 3 6  both on the Mac  This  technique  eats processor as it if was ice cream in the summer  but it does the trick

User · Answer

So what do you do if all the browsers  actually  Chrome 5 gave me quite good one  won t give you good enough resampling quality  You implement them yourself then  Oh come on  we re entering the new age of Web 3 0  HTML5 compliant browsers  super optimized JIT javascript compilers  multi-core      machines  with tons of memory  what are you afraid of  Hey  there s the word java in javascript  so that should guarantee the performance  right  Behold  the thumbnail generating code     returns a function that calculates lanczos weight function lanczosCreate lobes        return function x            if  x  gt  lobes              return 0          x    Math PI          if  Math abs x   lt  1e-16              return 1          var xx   x   lobes          return Math sin x    Math sin xx    x   xx               elem  canvas element  img  image element  sx  scaled width  lobes  kernel radius function thumbnailer elem  img  sx  lobes        this canvas   elem      elem width   img width      elem height   img height      elem style display    quot none quot       this ctx   elem getContext  quot 2d quot        this ctx drawImage img  0  0       this img   img      this src   this ctx getImageData 0  0  img width  img height       this dest             width   sx          height   Math round img height   sx   img width              this dest data   new Array this dest width   this dest height   3       this lanczos   lanczosCreate lobes       this ratio   img width   sx      this rcp ratio   2   this ratio      this range2   Math ceil this ratio   lobes   2       this cacheLanc           this center           this icenter           setTimeout this process1  0  this  0      thumbnailer prototype process1   function self  u        self center x    u   0 5    self ratio      self icenter x   Math floor self center x       for  var v   0  v  lt  self dest height  v              self center y    v   0 5    self ratio          self icenter y   Math floor self center y           var a  r  g  b          a   r   g   b   0          for  var i   self icenter x - self range2  i  lt   self icenter x   self range2  i                  if  i  lt  0    i  gt   self src width                  continue              var f x   Math floor 1000   Math abs i - self center x                if   self cacheLanc f x                   self cacheLanc f x                    for  var j   self icenter y - self range2  j  lt   self icenter y   self range2  j                      if  j  lt  0    j  gt   self src height                      continue                  var f y   Math floor 1000   Math abs j - self center y                    if  self cacheLanc f x  f y     undefined                      self cacheLanc f x  f y    self lanczos Math sqrt Math pow f x   self rcp ratio  2                                Math pow f y   self rcp ratio  2     1000                   weight   self cacheLanc f x  f y                   if  weight  gt  0                        var idx    j   self src width   i    4                      a    weight                      r    weight   self src data idx                       g    weight   self src data idx   1                       b    weight   self src data idx   2                                                     var idx    v   self dest width   u    3          self dest data idx    r   a          self dest data idx   1    g   a          self dest data idx   2    b   a             if    u  lt  self dest width          setTimeout self process1  0  self  u       else         setTimeout self process2  0  self      thumbnailer prototype process2   function self        self canvas width   self dest width      self canvas height   self dest height      self ctx drawImage self img  0  0  self dest width  self dest height       self src   self ctx getImageData 0  0  self dest width  self dest height       var idx  idx2      for  var i   0  i  lt  self dest width  i              for  var j   0  j  lt  self dest height  j                  idx    j   self dest width   i    3              idx2    j   self dest width   i    4              self src data idx2    self dest data idx               self src data idx2   1    self dest data idx   1               self src data idx2   2    self dest data idx   2                       self ctx putImageData self src  0  0       self canvas style display    quot block quot          with which you can produce results like these   so anyway  here is a  fixed  version of your example  img onload   function         var canvas   document createElement  quot canvas quot        new thumbnailer canvas  img  188  3     this produces lanczos3        but feel free to raise it up to 8  Your client will appreciate        that the program makes full use of his machine      document body appendChild canvas       Now it s time to pit your best browsers out there and see which one will least likely increase your client s blood pressure  Umm  where s my sarcasm tag   since many parts of the code is based on Anrieff Gallery Generator is it also covered under GPL2  I don t know      actually due to limitation of javascript  multi-core is not supported

User · Answer

i got this image by right clicking the canvas element in firefox and saving as     var img   new Image    img onload   function          console debug this width this height       var canvas   document createElement  canvas    ctx      canvas width   188      canvas height   150      document body appendChild canvas       ctx   canvas getContext  2d        ctx drawImage img 0 0 188 150      img src    original jpg     so anyway  here is a  fixed  version of your example   var img   new Image       added cause it wasnt defined var canvas   document createElement  canvas    document body appendChild canvas    var ctx   canvas getContext  2d    var canvasCopy   document createElement  canvas       adding it to the body  document body appendChild canvasCopy    var copyContext   canvasCopy getContext  2d     img onload   function             var ratio   1              defining cause it wasnt         var maxWidth   188              maxHeight   150           if img width  gt  maxWidth                  ratio   maxWidth   img width          else if img height  gt  maxHeight                  ratio   maxHeight   img height           canvasCopy width   img width          canvasCopy height   img height          copyContext drawImage img  0  0            canvas width   img width   ratio          canvas height   img height   ratio             the line to change            ctx drawImage canvasCopy  0  0  canvasCopy width  canvasCopy height  0  0  canvas width  canvas height              the method signature you are using is for slicing         ctx drawImage canvasCopy  0  0  canvas width  canvas height          changed for example img src    original jpg

User · Answer

I d highly suggest you check out this link and make sure it is set to true      Controlling image scaling behavior      Introduced in Gecko 1 9 2  Firefox 3 6     Thunderbird 3 1   Fennec 1 0       Gecko 1 9 2 introduced the   mozImageSmoothingEnabled property to   the canvas element  if this Boolean   value is false  images won t be   smoothed when scaled  This property is   true by default  view plainprint          cx mozImageSmoothingEnabled   false

User · Answer

I have a feeling the module I wrote will produce similar results to photoshop  as it preserves color data by averaging them  not applying an algorithm   It s kind of slow  but to me it is the best  because it preserves all the color data   https   github com danschumann limby-resize blob master lib canvas resize js  It doesn t take the nearest neighbor and drop other pixels  or sample a group and take a random average   It takes the exact proportion each source pixel should output into the destination pixel   The average pixel color in the source will be the average pixel color in the destination  which these other formulas  I think they will not be   an example of how to use is at the bottom of  https   github com danschumann limby-resize  UPDATE OCT 2018  These days my example is more academic than anything else  Webgl is pretty much 100   so you d be better off resizing with that to produce similar results  but faster  PICA js does this  I believe

User · Answer

For resizing to image with width less that original  i use       function resize2 i          var cc   document createElement  canvas          cc width   i width   2        cc height   i height   2        var ctx   cc getContext  2d          ctx drawImage i  0  0  cc width  cc height         return cc            var cc   img      while  cc width  gt  64   2          cc   resize2 cc                   than drawImage cc           and it works

User · Answer

This is a javascript function adapted from  Telanor s code  When passing a image base64 as first argument to the function  it returns the base64 of the resized image  maxWidth and maxHeight are optional   function thumbnail base64  maxWidth  maxHeight          Max size for thumbnail   if typeof maxWidth       undefined   var maxWidth   500    if typeof maxHeight       undefined   var maxHeight   500        Create and initialize two canvas   var canvas   document createElement  canvas      var ctx   canvas getContext  2d      var canvasCopy   document createElement  canvas      var copyContext   canvasCopy getContext  2d          Create original image   var img   new Image      img src   base64        Determine new ratio based on max size   var ratio   1    if img width  gt  maxWidth      ratio   maxWidth   img width    else if img height  gt  maxHeight      ratio   maxHeight   img height        Draw original image in second canvas   canvasCopy width   img width    canvasCopy height   img height    copyContext drawImage img  0  0         Copy and resize second canvas to first canvas   canvas width   img width   ratio    canvas height   img height   ratio    ctx drawImage canvasCopy  0  0  canvasCopy width  canvasCopy height  0  0  canvas width  canvas height      return canvas toDataURL

[javascript] Resizing an image in an HTML5 canvas

Examples related to javascript

Examples related to html

Examples related to canvas

Examples related to image-resizing