Creating/modifying images in JavaScript

Question

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

My use case is as follows:

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

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.

Aaron Jensen · Accepted Answer · 2008-09-17 08:06:17Z

8

Some browsers support the canvas: http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas

answered Sep 17, 2008 at 8:06

Aaron Jensen

6,0701 gold badge33 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fabian Over a year ago

Thanks for all the comments. To summarize, there seem to be solutions for some browsers (e.g. Firefox). However, a solution for all browsers seems to require a server side implementation.

user1382306 Over a year ago

thanks for putting me on this. found a great primer in this answer stackoverflow.com/a/6634646/1382306 your answer should receive chk

Sargun Dhillon · Accepted Answer · 2008-09-17 08:05:28Z

2

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.

answered Sep 17, 2008 at 8:05

Sargun Dhillon

1,8462 gold badges19 silver badges24 bronze badges

Comments

Jataro · Accepted Answer · 2008-09-17 08:25:42Z

2

You may want to check out Processing.js. John Resig of jQuery fame wrote it. It supports pixel processing, unfortunately only Firefox 3 can handle it sufficiently.

answered Sep 17, 2008 at 8:25

Jataro

2,5881 gold badge17 silver badges17 bronze badges

Comments

Marijn · Accepted Answer · 2008-09-17 08:30:48Z

1

Also look at data URIs (though IE versions below 8 don't support them, unfortunately!)

answered Sep 17, 2008 at 8:30

Marijn

2,1062 gold badges13 silver badges11 bronze badges

Comments

gizmo · Accepted Answer · 2008-09-17 08:07:03Z

0

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.

answered Sep 17, 2008 at 8:07

gizmo

11.9k6 gold badges47 silver badges62 bronze badges

Comments

PaulF · Accepted Answer · 2008-09-17 08:15:06Z

0

Try Allicorn's Image Retargetter - it sounds like that's what you're looking for.

answered Sep 17, 2008 at 8:15

PaulF

72 bronze badges

Comments

Arno · Accepted Answer · 2008-09-17 08:22:45Z

0

Local image manipulation in JavaScript should be possible - have a look at Defender of the Favicon. ;-) 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).

answered Sep 17, 2008 at 8:22

Arno

2,2491 gold badge16 silver badges12 bronze badges

Collectives™ on Stack Overflow

Creating/modifying images in JavaScript

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related