Image manipulation in js

[Raphael Jolivet]

I dont know, and i dont much like javascript, however, i am told that
the only way to do want i want to do, is with javascript, so here goes.

zoom and cut is the only features i need.

1. the image that need manipulating is places on the server. dont need
js for that ;-)
2. the client has the oppotunity to manipulate the image. cut and zoom.
3. the image i saved on the server.

It sound realy simple, but than again, i know nothing of js ;-)

Hope to get the help i need.


Regards

Hello,

If your project is for intranet and if you can control the
browser people are using, you may have a look at the new
"canvas" element. This is a WHATWG specification
[http://www.whatwg.org/specs/web-apps/current-work/#scs-dynamic]

And it is supported by Firefox / Safari / Opera : all modern
browsers except IE.

This element enabled you to draw with javascript : Cut /
rotate / move an image and save it as PNG : (with the
toDataURL() method)

You can find some help here
:[http://developer.mozilla.org/en/docs/Drawing_Graphics_with_Canvas]


Just forget it if your audience is the whole Web : It's
always a bad thing the restrict accessibility of a web site.

Raphael

 

[zacariaz]

I dont know, and i dont much like javascript, however, i am told that
the only way to do want i want to do, is with javascript, so here goes.

zoom and cut is the only features i need.

1. the image that need manipulating is places on the server. dont need
js for that ;-)
2. the client has the oppotunity to manipulate the image. cut and zoom.
3. the image i saved on the server.

It sound realy simple, but than again, i know nothing of js ;-)

Hope to get the help i need.


Regards

 

[lofty00]

I dont know, and i dont much like javascript, however, i am told that
the only way to do want i want to do, is with javascript, so here goes.

zoom and cut is the only features i need.

1. the image that need manipulating is places on the server. dont need
js for that ;-)
2. the client has the oppotunity to manipulate the image. cut and zoom.
3. the image i saved on the server.

It sound realy simple, but than again, i know nothing of js ;-)

Hope to get the help i need.

Not sure if I understand what you mean? Are you talking about a web
page which lets you zoom into an area of a photograph and then crop it
to size?

The problem with this is that as far as I know, you can't do image
manipulation like this in javascript - it simply doesn't have the right
commands to do it. What you could do is this:

- have the server generate a page with an image embedded in it.
- use javascript to zoom into the image using it's height and width
properties. I.e. you don't manipulate the image itself, just change the
way it's displayed so it /looks/ like it's been cropped or zoomed.
- then send back to the server the details of what you want doing to
it.
- then the server does the actual image manipulation using a server
side scripting language like perl or php and a graphics toolkit like
ImageMagick.

I.e. you use javascript to give the illusion of having really cropped
the image, but the actual work of doing this is done on the server.

hope this helps,

andy baxter

 

[Chris Moltisanti]

This may help you
http://dhtmlgoodies.com/index.html?whichScript=image-crop

Chris

 

[the DtTvB]

zoom and cut is the only features i need.

Zooming:
Just set its width and/or height attribute of image.
<img src="??" width="500" height="200" />

Cropping:
Use a DIV and IMG.
<div style="position:relative;width:[width]px;height:[height]px;">
<img src="??" style="position:relative;top:-[top offset]px;
left:-[left offset]px" />
</div>

Hope this helps,
the DtTvB

 

[zacariaz]

(e-mail address removed) skrev:

Not sure if I understand what you mean? Are you talking about a web
page which lets you zoom into an area of a photograph and then crop it
to size?

I think you got it right, but maybe i shoud outline the part of my
project, this is all about.
Avatar pictures is what its all about, the must have a fixed size of
150*200px.
Often people upload pictures that are this size, or do not contrain
proportions and the last issue it the real problem, i want to give the
client a tool to make do something about it.
I for one know how enoying it is having a picture you want to use, but
cant because its not the right size, this way i dont have to install
software and stuff to fix it, but you can do via your browser.
Serverside/Clientside, doesnt matter as long as it works in all the
popular browser: ie, ns, ff, etc.

The problem with this is that as far as I know, you can't do image
manipulation like this in javascript - it simply doesn't have the right
commands to do it. What you could do is this:

- have the server generate a page with an image embedded in it.
- use javascript to zoom into the image using it's height and width
properties. I.e. you don't manipulate the image itself, just change the
way it's displayed so it /looks/ like it's been cropped or zoomed.
- then send back to the server the details of what you want doing to
it.
- then the server does the actual image manipulation using a server
side scripting language like perl or php and a graphics toolkit like
ImageMagick.

I originally wanted it to be server side, but was told that it would be
too demanding or that it simply wasnt posible.

I.e. you use javascript to give the illusion of having really cropped
the image, but the actual work of doing this is done on the server.

Just to make sure we understand eachother.
When all is done i have an image the size of 150*200 lying on the
server, no ilusions here ;-)

 

[Randy Webb]

(e-mail address removed) said the following on 6/11/2006 2:18 PM:

Just to make sure we understand eachother.
When all is done i have an image the size of 150*200 lying on the
server, no ilusions here ;-)

What you need is software for the server that can crop the image for
you. Or, that can resize it. Either crop it or resize it (or both),
display them both to the user, let them pick which one they want with
the third option to resize it themselves.

In any event, the server is the best place for it to happen.

 

[lofty00]

(e-mail address removed) skrev:

I originally wanted it to be server side, but was told that it would be
too demanding or that it simply wasnt posible.

Have a look at ImageMagick - there's a perl api for this which works OK
(Image::Magick). Whether it's possible depends on who's running your
server I guess.

Just to make sure we understand eachother.
When all is done i have an image the size of 150*200 lying on the
server, no ilusions here ;-)

Yes - you use client side scripting to display a cropped, resized image
in a box on the screen, but you're only doing this by manipulating the
stylesheet parameters, not actually cropping the image. Then you send
the parameters back to the server for it to do the real crop/resize
there.

 

[lofty00]

Have a look at ImageMagick - there's a perl api for this which works OK
(Image::Magick). Whether it's possible depends on who's running your
server I guess.


Yes - you use client side scripting to display a cropped, resized image
in a box on the screen, but you're only doing this by manipulating the
stylesheet parameters, not actually cropping the image. Then you send
the parameters back to the server for it to do the real crop/resize
there.

I was thinking, if you can't do stuff on the server because of
performance issues, you might be able to do it in a java (not
javascript) applet on the page, and use your client's cpu to do the
image rendering. This would be a lot of work though.

 

[zacariaz]

(e-mail address removed) skrev:

I was thinking, if you can't do stuff on the server because of
performance issues, you might be able to do it in a java (not
javascript) applet on the page, and use your client's cpu to do the
image rendering. This would be a lot of work though.

Client Java? no, no and no again...
Not that it isnt a good idea, but i have often experienced enouing
stuff with jave. either you havent installed it or it needs update,
etc. and it is important for me to spare the users on my site for this.