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.
If you need to resize image in modern browser, you will note, that canvas uses
low quality interpolation algorythms. That's why we did pica.
- It's not as fast as canvas, but still reasonable fast. With Lanczos filter and window=3, and huge image 5000x3000px resize takes ~1s on desktop and ~3s on mobile.
- If you browser supports Webworkers, pica automatically use it to avoid interface freeze.
Why it's useful:
- reduce upload size for big images - save time and traffic
- save server resources for image processing
node.js (to develop, build via browserify and so on):
npm install picabower:
bower install picaAsync 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 50..100 is good. - unsharpThreshold - 0..100. Default -
0. Try 10 for begibing. - dest - Optional. Output buffer to write data. Help to avoid data copy if no WebWorkers available. Callback will return result buffer anyway.
- transferable - Optional. Whether to use transferable objects. Faster, 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.
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
7397
-
false. - __unsharpAmount - 0..500. Default -
0(off). Usually 50..100 is good. - unsharpThreshold - 0..100. Default -
0. Try 10 for begining.
- quality - 0..3. Default -
- callback(err) - function to call after resize complete:
- err - error if happened
true if webworkers supported. You can use it for capabilities detection.
Also, you can set it false for debug, and pica will use direct function calls.
Pica has presets, to vary speed/quality ratio. To simplify interface, you can
select this presets with 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.
You can find this links useful:
- discussions on stackoverflow: 1, 2, 3.
- chromium skia sources: image_operations.cc, convolver.cc.