pica is one more experiment with high speed javascript, from authors of paco. It does high quality images resize in browser as fast as possible.

demo

If you need to resize images in modern browsers, by default, use canvas' low quality interpolation algorythms. That's why we wrote pica.

• It's not as fast as canvas, but still reasonably fast. With Lanczos filter and window=3, and huge image 5000x3000px resize takes ~1s on desktop and ~3s on mobile.
• If your browser supports Webworkers, pica automatically uses it to avoid interface freeze.

Why it's useful:

• reduce upload size for big images to pre-process in browser, saving time and bandwidth
• save server resources for image processing
• HiDPI image technique for responsive and retna
• download single image for both thumbnail and detail-zoom

node.js (to develop, build via browserify and so on):

npm install pica

bower:

bower install pica

Async resize Uint8Array with RGBA image.

• options:
  • src - Uint8Array with source data.
  • width - src image width.
  • height - src image height.
  • toWidth - output width.
  • toHeigh - output height.
  • quality - 0..3. Default = 3 (lanczos, win=3).
  • alpha - use alpha channel. Default = false.
  • unsharpAmount - 0..500. Default = 0 (off). Usually between 50 to 100 is good.
  • unsharpThreshold - 0..100. Default = 0. Try 10 as starting point.
  • dest - Optional. Output buffer to write data. Help to avoid data copy if no WebWorkers available. Callback will return result buffer anyway.
  • transferable - Optional. Default = false. Whether to use transferable objects. with webworkers. Can be faster sometime, but you cannot use the source buffer afterward.
• callback(err, output) - function to call after resize complete:
  • err - error if happened.
  • output - Uint8Array with resized RGBA image data.

(!) If WebWorker available, it's returned as function result (not via callback) to allow early termination.

Resize image from one canvas to another. Sizes are taken from canvas.

• from - source canvas.
• to - destination canvas.
• options - quality (number) or object:
  • quality - 0..3. Default = 3 (lanczos, win=3).
  • alpha - use alpha channel. Default = false.
  • unsharpAmount - 0..500. Default = 0 (off). Usually between 50 to 100 is good.
  • unsharpThreshold - 0..100. Default = 0. Try 10 as starting point.
• callback(err) - function to call after resize complete:
  • err - error if happened

(!) If WebWorker available, it's returned as function result (not via callback) to allow early termination.

true if webworkers are supported. You can use it for capabilities detection. Also, you can set it false for debuging, so pica will use direct function calls.

Pica has presets, to adjust speed/quality ratio. Simply use quality option param:

• 0 - Box filter, window 0.5px
• 1 - Hamming filter, window 1.0px
• 2 - Lanczos filter, window 2.0px
• 3 - Lanczos filter, window 3.0px

Pica has built in unsharp mask, similar to photoshop, but limited with radius 1.0. It's off by default. Set unsharpAmount and unsharpThresold to activate filter.

We had no time to test all possible combinations, but in general:

• Top level API should work in all browsers, supporing canvas and typed arrays.
• Webworkers support is not needed, but those will be used if available.
• If you plan to use only pure math core, then typed arrays support will be enougth.

Note. Though you can run this package on node.js, browsers are the main target platform. On server side we recommend to use GraphicsMagick or ImageMagick for better speed.

You can find these links useful:

• discussions on stackoverflow: 1, 2, 3.
• chromium skia sources: image_operations.cc, convolver.cc.

• Loïc Faure-Lacroix @llacroix
• Vitaly Puzrin @puzrin

MIT