<p>Is it possible to <strong>dynamically create and modify images</strong> on a <strong>per pixel level</strong> in JavaScript (on client side)? Or has this to be done with server based languaged, such as PHP? </p>

<p>My use case is as follows:</p>

<ul>
<li>The user opens webpage and loads locally stored image</li>
<li>A preview of the image is displayed</li>
<li>The user can modify the image with a set of sliders (pixel level operations)</li>
<li>In the end he can download the image to his local HDD</li>
</ul>

<p>When searching in the web I just found posts about using IE's filtering method, but didn't find anything about image editing functions in JavaScript.</p>

[{'answer_id': 80995, 'author': 'Sargun Dhillon', 'author_id': 10432, 'author_profile': 'https://Stackoverflow.com/users/10432', 'pm_score': 3, 'selected': True, 'text': '<p>This has to be done on the server side. One thing you might look at doing is allowing all the editing to go on client side, and then in the end POST the final image (via AJAX) to the server to allow it to return it to you as the correct MIME type, and correctly packed. </p>\n'}, {'answer_id': 81001, 'author': 'Aaron Jensen', 'author_id': 11229, 'author_profile': 'https://Stackoverflow.com/users/11229', 'pm_score': 3, 'selected': False, 'text': '<p>Some browsers support the canvas:\n<a href="http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas" rel="noreferrer">http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas</a></p>\n'}, {'answer_id': 81004, 'author': 'gizmo', 'author_id': 9396, 'author_profile': 'https://Stackoverflow.com/users/9396', 'pm_score': 0, 'selected': False, 'text': '<p>You can imagine a set of JS tools that will allow the user to define what kind of transformation he wants to do, but the final work of transformation MUST be done on a server side. JS on the client side is unable to create a file, for security reason.</p>\n'}, {'answer_id': 81046, 'author': 'PaulF', 'author_id': 12041, 'author_profile': 'https://Stackoverflow.com/users/12041', 'pm_score': 0, 'selected': False, 'text': '<p>Try <a href="http://ccgi.allicorn.plus.com/retargetter.php" rel="nofollow noreferrer">Allicorn\'s Image Retargetter</a> - it sounds like that\'s what you\'re looking for.</p>\n'}, {'answer_id': 81095, 'author': 'Arno', 'author_id': 13685, 'author_profile': 'https://Stackoverflow.com/users/13685', 'pm_score': 0, 'selected': False, 'text': '<p>Local image manipulation in JavaScript should be possible - have a look at <a href="http://www.p01.org/releases/DHTML_contests/files/DEFENDER_of_the_favicon/" rel="nofollow noreferrer">Defender of the Favicon</a>. ;-) The question is how to get the original image from the file system into your page (I don\'t know of any other way than doing a HTTP upload to the server first).</p>\n'}, {'answer_id': 81110, 'author': 'Jataro', 'author_id': 9292, 'author_profile': 'https://Stackoverflow.com/users/9292', 'pm_score': 2, 'selected': False, 'text': '<p>You may want to check out <a href="http://ejohn.org/blog/processingjs/" rel="nofollow noreferrer">Processing.js</a>. John Resig of jQuery fame wrote it. It supports pixel processing, unfortunately only Firefox 3 can handle it sufficiently.</p>\n'}, {'answer_id': 81138, 'author': 'Marijn', 'author_id': 12038, 'author_profile': 'https://Stackoverflow.com/users/12038', 'pm_score': 1, 'selected': False, 'text': '<p>Also look at <a href="http://en.wikipedia.org/wiki/Data:_URI_scheme" rel="nofollow noreferrer">data URIs</a> (though IE versions below 8 don\'t support them, unfortunately!)</p>\n'}]
['https://Stackoverflow.com/questions/80980', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/15288/']