By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,605 Members | 2,153 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,605 IT Pros & Developers. It's quick & easy.

Image re-sizing with Javascript?

P: n/a
I am the owner of a very large scale member-base website and the
members are having trouble re-sizing there pics to create headshots.
The headshots are supposed to be 175 x 175 pixels exactly. We get alot
of people trying to re-size their own images and unfortunatley they
don't have photo skills and the images never get uploaded because they
are usually off a few pixels when trying to upload the headshot. So the
headshot's usually don't get uploaded.

So here is my Question: Is there any kind of software or javascript
coding that I can implement into my website that will allow a member
that has, lets say an image that is 240 x 190, to drop that photo in to
almost like a pre-made box that is 175 x 175 and then they can drag,
move, re-size their pic all they want in the box and then save it??

If anyone has any suggestions or help for this that would be greatly
appreciated. I am desperate. Thanks!

BWIN

Oct 14 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
BWIN wrote:
I am the owner of a very large scale member-base website and the
members are having trouble re-sizing there pics to create headshots.
The headshots are supposed to be 175 x 175 pixels exactly. We get alot
of people trying to re-size their own images and unfortunatley they
don't have photo skills and the images never get uploaded because they
are usually off a few pixels when trying to upload the headshot. So the
headshot's usually don't get uploaded.

So here is my Question: Is there any kind of software or javascript
coding that I can implement into my website that will allow a member
that has, lets say an image that is 240 x 190, to drop that photo in to
almost like a pre-made box that is 175 x 175 and then they can drag,
move, re-size their pic all they want in the box and then save it??
No.

The longer answer is that JavaScript has no capability to do image
processing, no matter how simple. JavaScript can 'resize' the image by
asking the browser to display it inside an element, then set the
element's width and height attributes (or the width and height
attributes of the element's style object) to some values, but that is
purely for visual presentation, it doesn't modify the source image.

Depending on the browser and how the image is referenced in the page
source, it may get re-sized by the browser itself (though for images
around 200x200px that would be rare).

Even crappy old 'Paint' allows cropping to a specific size - if your
users can't learn to use that, what hope is there?

If anyone has any suggestions or help for this that would be greatly
appreciated. I am desperate. Thanks!

BWIN

--
Rob
Oct 14 '05 #2

P: n/a
BWIN wrote:
I am the owner of a very large scale member-base website and the
members are having trouble re-sizing there pics to create headshots.
The headshots are supposed to be 175 x 175 pixels exactly. We get alot
of people trying to re-size their own images and unfortunatley they
don't have photo skills and the images never get uploaded because they
are usually off a few pixels when trying to upload the headshot. So the
headshot's usually don't get uploaded.

So here is my Question: Is there any kind of software or javascript
coding that I can implement into my website that will allow a member
that has, lets say an image that is 240 x 190, to drop that photo in to
almost like a pre-made box that is 175 x 175 and then they can drag,
move, re-size their pic all they want in the box and then save it??

If anyone has any suggestions or help for this that would be greatly
appreciated. I am desperate. Thanks!


Well, javascript can be used to scale the display of an image
so that it will fit in your 175x175 box, but it has no ability to
actually change the image.

IF just havingthe images show up on screen the right size is not enough
then you will need a server side cgi program that exploits an image
manipulation library to physically alter the image.

A little searching might yield you a free pre-fab cgi script for this.
but it would not take a programmer too long to find the libraries and
paste a cgi interface onto it. You might check over in the
ciwacgi (comp.infosystems.www.authoring.cgi) news group to see if
someone has one laying about

--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML, CSS,Javascript
--=<> Internet Programming since 1994 <>=-- DHTML NSAPI TCP/IP
--=<> http://resume.drclue.net <>=-- AJAX, SOAP, XML, HTTP
--=<> http://www.drclue.net <>=-- SERVLETS,TCP/IP, SQL
--.
Oct 14 '05 #3

P: n/a
Dr Clue wrote on 14 okt 2005 in comp.lang.javascript:
Well, javascript can be used to scale the display of an image
so that it will fit in your 175x175 box, but it has no ability to
actually change the image.


Since JS can do bitwize manipulation, it surely could, given that you know
all about the intricacies of the format [.jpg, .gif. etc.] in Q,
and if you stand in awe of JS timeout.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Oct 14 '05 #4

P: n/a

BWIN wrote:
I am the owner of a very large scale member-base website and the
members are having trouble re-sizing there pics to create headshots.
The headshots are supposed to be 175 x 175 pixels exactly. We get alot
of people trying to re-size their own images and unfortunatley they
don't have photo skills and the images never get uploaded because they
are usually off a few pixels when trying to upload the headshot. So the
headshot's usually don't get uploaded.

So here is my Question: Is there any kind of software or javascript
coding that I can implement into my website that will allow a member
that has, lets say an image that is 240 x 190, to drop that photo in to
almost like a pre-made box that is 175 x 175 and then they can drag,
move, re-size their pic all they want in the box and then save it??


http://xinha.python-hosting.com/wiki/ImageManager
'The ImageManager plugin provides a means for users to upload,
manipulate (resize, rotate, crop etc), delete and organise (into
directories) images, and then insert them into the HTML being edited. '

might help...

Oct 14 '05 #5

P: n/a
Evertjan. wrote:
Dr Clue wrote on 14 okt 2005 in comp.lang.javascript:
Well, javascript can be used to scale the display of an image
so that it will fit in your 175x175 box, but it has no ability to
actually change the image.


Since JS can do bitwize manipulation, it surely could, given that you know
all about the intricacies of the format [.jpg, .gif. etc.] in Q,
and if you stand in awe of JS timeout.


I was actually speaking more in terms of writing the file to disk.
javacript itself cannot do that. One can load an XMLHTTP interface
and do a "put" or send it through a cgi gateway, but javascript cannot
itself write a file, unless of course your speaking of serverside
javascript, but that would be probably a bit over the top for this
particular OP's context.

In the past ,I've even written whole image editors in javascript, but
just for a lark. I don't think I would want to rely on it for those
services though. That editor too required support components to
write the files. In those days we did not have XMLHTTP and so
the image had to be funnled through a cgi to commit it to disk.


--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML, CSS,Javascript
--=<> Internet Programming since 1994 <>=-- DHTML NSAPI TCP/IP
--=<> http://resume.drclue.net <>=-- AJAX, SOAP, XML, HTTP
--=<> http://www.drclue.net <>=-- SERVLETS,TCP/IP, SQL
--.
Oct 14 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.