Client-side function to resize ".jpg" images

Don

Does anyone know where I can find a client-side function I can reference from within an
HTML/JavaScript web page? I'm currently using a core PHP function to do this, but I'd rather do it
on the client-side and not have to upload the large raw image to the server.

Thanks in advance for your help.
Don
----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
http://www.newsfeeds.com The #1 Newsgroup Service in the World! >100,000 Newsgroups
---= East/West-Coast Server Farms - Total Privacy via Encryption =---

Jul 23 '05 #1

Andrew Thompson

On Thu, 18 Nov 2004 10:42:57 -0700, Don wrote:

Does anyone know where I can find a client-side function I can reference from within an
HTML/JavaScript web page? I'm currently using a core PHP function to do this, but I'd rather do it
on the client-side and not have to upload the large raw image to the server.

So instead you want to upload a 400Kb image, serve that 400Kb
to your users, and have a client-side solution to rescale the
image to a smaller size (that could have been served in 100Kb)?

That is insane.

And, no. Certainly not in any reliable, crossbrowser way
using JS, but it is possible (very poorly) using HTML.

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

Jul 23 '05 #2

Don

On Fri, 19 Nov 2004 00:18:32 GMT, Andrew Thompson <Se********@www.invalid> wrote:

On Thu, 18 Nov 2004 10:42:57 -0700, Don wrote:

Does anyone know where I can find a client-side function I can reference from within an
HTML/JavaScript web page? I'm currently using a core PHP function to do this, but I'd rather do it
on the client-side and not have to upload the large raw image to the server.

So instead you want to upload a 400Kb image, serve that 400Kb
to your users, and have a client-side solution to rescale the
image to a smaller size (that could have been served in 100Kb)?

That is insane.

And, no. Certainly not in any reliable, crossbrowser way
using JS, but it is possible (very poorly) using HTML.

Andrew,

Thanks for your response. But, you kinda got it all wrong. I want a client-side function to which
I can submit a client camera size image (3 megapixel, etc.) and have it resized to 700 pixels wide
at a ".jpg" compression-level that results in a file size around 100 KB. Then, I want to take that
and ship it off to my PHP script running on the server. That script then puts the 100 KB image in a
PictureVault folder. Users can then access pictures in the PictureVault. I'm already doing this,
except I take their 3 megapixel picture and immediately upload it to the PHP script. I want to cut
down on the bandwidth (transfer rate) on the server end.

Don
----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
http://www.newsfeeds.com The #1 Newsgroup Service in the World! >100,000 Newsgroups
---= East/West-Coast Server Farms - Total Privacy via Encryption =---

Jul 23 '05 #3

Andrew Thompson

On Thu, 18 Nov 2004 20:28:36 -0700, Don wrote:

Thanks for your response. But, you kinda
got it all wrong. I want a client-side function ...

(slaps forehead) D'uhh! Just like you said in your
opening sentence, ..and subject. *Still* I completely
missed it.

My bad. Sorry for wasting the bandwidth.

No, I don't have a solution to the stated problem.

Though, (musing)..

I imagine that while their might be an ActiveX object for
IE that will do this in a (possibly signed) script(/HTA),
it would not be cross-browser. [ You'll need to consult
the JS experts on that. ]

OTOH, you might look to a signed Java applet (though note
that Java is a separate language to Javascript, and requires
the Java Plug-In from Sun).

HTH

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

Jul 23 '05 #4

J. J. Cale

you can just insert the smaller height and/or width into the img tag
<img name="imgName" id="imgId" src="pic.jpg" width="120">

or change it programmatically e.g. through the onload event in the body tag
<body onload="changeSize()">
<script type="text/javascript">
function changeSize() {
// not tested
// get a reference to the image by whatever standards you wish to support
var obj = document.images['imgName']; // pretty safe
obj.style.width='140px';
</script>
HTH
Jimbo
"Don" <no@adr.com> wrote in message
news:gi********************************@4ax.com...

Does anyone know where I can find a client-side function I can reference from within an HTML/JavaScript web page? I'm currently using a core PHP function to do this, but I'd rather do it on the client-side and not have to upload the large raw image to the server.
Thanks in advance for your help.
Don
----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==---- http://www.newsfeeds.com The #1 Newsgroup Service in the World! >100,000 Newsgroups ---= East/West-Coast Server Farms - Total Privacy via Encryption =---

Jul 23 '05 #5

lawrence

Andrew Thompson <Se********@www.invalid> wrote in message news:<gt*****************************@40tude.net>. ..

I imagine that while their might be an ActiveX object for
IE that will do this in a (possibly signed) script(/HTA),
it would not be cross-browser. [ You'll need to consult
the JS experts on that. ]

OTOH, you might look to a signed Java applet (though note
that Java is a separate language to Javascript, and requires
the Java Plug-In from Sun).

There must already be a Java plug-in that does it, since it is such a
common need. But if not, I've been thinking about writing one to work
with my own PHP CMS. One of the most frequent requests I get is people
who take a picture with their digital camera and then upload and then
complain to me that it is way to big on the web site (16 inches wide,
or so).

Jul 23 '05 #6

Randy Webb

lawrence wrote:

Andrew Thompson <Se********@www.invalid> wrote in message news:<gt*****************************@40tude.net>. ..

I imagine that while their might be an ActiveX object for
IE that will do this in a (possibly signed) script(/HTA),
it would not be cross-browser. [ You'll need to consult
the JS experts on that. ]

OTOH, you might look to a signed Java applet (though note
that Java is a separate language to Javascript, and requires
the Java Plug-In from Sun).

There must already be a Java plug-in that does it, since it is such a
common need. But if not, I've been thinking about writing one to work
with my own PHP CMS. One of the most frequent requests I get is people
who take a picture with their digital camera and then upload and then
complain to me that it is way to big on the web site (16 inches wide,
or so).

It would be easier, simpler, and more productive to create a page that
explains how to resize images in image-editing software.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #7

Randy Webb

J. J. Cale wrote:

you can just insert the smaller height and/or width into the img tag
<img name="imgName" id="imgId" src="pic.jpg" width="120">

And how exactly does that change the physical size of the image? Which
is what the OP wanted and your img tag fails to do.

or change it programmatically e.g. through the onload event in the body tag
<body onload="changeSize()">
<script type="text/javascript">
function changeSize() {
// not tested
// get a reference to the image by whatever standards you wish to support
var obj = document.images['imgName']; // pretty safe
obj.style.width='140px';
</script>

See Above.

Read the group FAQ, as linked to in my signature.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?

Jul 23 '05 #8

J. J. Cale

"Randy Webb" <Hi************@aol.com> wrote in message
news:GN********************@comcast.com...

J. J. Cale wrote:

you can just insert the smaller height and/or width into the img tag
<img name="imgName" id="imgId" src="pic.jpg" width="120">

And how exactly does that change the physical size of the image? Which
is what the OP wanted and your img tag fails to do.

I believe the OP just wanted to display the image at a smaller size, and not
actually resize the image.

or change it programmatically e.g. through the onload event in the body tag <body onload="changeSize()">
<script type="text/javascript">
function changeSize() {
// not tested
// get a reference to the image by whatever standards you wish to support var obj = document.images['imgName']; // pretty safe
obj.style.width='140px';
</script>

See Above.

Read the group FAQ, as linked to in my signature.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?

Jul 23 '05 #9

Randy Webb

J. J. Cale wrote:

"Randy Webb" <Hi************@aol.com> wrote in message
news:GN********************@comcast.com...

J. J. Cale wrote:

you can just insert the smaller height and/or width into the img tag
<img name="imgName" id="imgId" src="pic.jpg" width="120">

And how exactly does that change the physical size of the image? Which
is what the OP wanted and your img tag fails to do.

I believe the OP just wanted to display the image at a smaller size, and not
actually resize the image.

Perhaps, but this part of the post:
<quote>
I'm currently using a core PHP function to do this, but I'd rather do
it on the client-side and not have to upload the large raw image to the
server.
</quote>

Implies, to me, that they are using the image functions in PHP to resize
it after upload. If the only purpose to resizing it, prior to upload, is
to alter its display in the browser, I don't see the purpose of doing that.

However, if resizing it (physically) prior to upload is the desire, it
makes good sense to me.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #10