search

meltingice / CamanJS

Javascript HTML5 (Ca)nvas (Man)ipulation
http://camanjs.com
BSD 3-Clause "New" or "Revised" License
3.55k stars 404 forks source link

Big image support #173

Closed yetithefoot closed 9 years ago

yetithefoot commented 9 years ago

What is the biggest image size caman supports? Is it ok for 6000x4000px images?

meltingice commented 9 years ago

It will technically run, but it will be slow since it works by processing each pixel in the image once per adjustment.

yetithefoot commented 9 years ago

Did you think about WebWorkers or WebGL support?

meltingice commented 9 years ago

Yep, web workers were the first thing I tried when developing CamanJS. The problem is that you need to shuffle the image data back and forth between the main context and the worker, and the only way to do so is to serialize the array of pixel data into a string, which has millions of items. You also have to get the filter function into the worker, and doing so requires nasty stuff like Function.toString(). It's much more inefficient than just working in the single main thread.

I've been passing on WebGL support for awhile in order to stick to the original objective of CamanJS, which is to make it simple to extend and customize. Adding WebGL to the mix would require plugin developers to understand GL shaders, which are anything but simple.

yetithefoot commented 9 years ago

Stringifying pixels can be painfull, but, why just not pass typed array data (like Uint8Array) into workers? We played around Parallel.js lib that hide all the communications between worker and main context. Function.toString() can looks not very cool, but not only one option here. From workers you can includeScript if you do not want to do Function.toString().

meltingice commented 9 years ago

Oh wow, I honestly didn't know you could pass a typed array directly into a worker now. The last time I worked with workers, they only took strings. I'll have to take a second pass at it, thanks!

yetithefoot commented 9 years ago

This is what we actually did for pics.io ;-) Clientside raw converter impossible without WebWorkers. And parallel.js saved a lot of time also. You can try http://edit.pics.io. It uses workers for image processing and a bit of magic. :crystal_ball:

MrOrz commented 9 years ago

Actually workers currently accepts ImageData as well.

postMessage of web workers accepts [all types that supports the structured clone algorithm]. ImageData is one of them.

Previously Google Chrome has some issue in passing around ImageData but it seems that it's fixed now: http://stackoverflow.com/a/10527713

Workers can be extremely powerful for processing pixel-wise filters. Since each pixel manipulation only depends on the original pixel at the same position, we can segment the large image into smaller images and have multiple workers to process them in parallel, which is demonstrated in this article.

ctf0 commented 6 years ago

@yetithefoot can u share some info on how to run caman with webworker/paralleljs ?