473,406 Members | 2,745 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,406 software developers and data experts.

Image re-sizing with Javascript?

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
5 1665
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
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
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

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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
by: Pierre Tremblay | last post by:
Hi! I am trying to display an image in my html document. The document contains the following line: <td class="Input"><img...
2
by: Mekon | last post by:
I have never written a line of script in my life but I need some help with it now. I have this auto generated code which I want to modify if possible The script generates a strip of...
8
by: Jef Driesen | last post by:
I'm implementing some image processing algorithms in C++. I created a class called 'image' (see declaration below), that will take care of the memory allocations and some basic (mathematical)...
11
by: bissatch | last post by:
Hi, I am trying to upload an image, create a new file based on that image and then store the base64 encoded image data in a database. I dont really know where my code is going wrong so I will...
6
by: QuasiChameleon | last post by:
Hi, I'm trying to create a grayscale image class that reads and writes grayscale Targa format. This works well with smaller images, but corrupts larger images and creates a "Segmentation fault...
0
by: Satish Appasani | last post by:
Hi: I have a ASP.NET form with Web layout which I've achieved using panels. In one of the tab I have a File control to upload Images. When I put a file in the file control and move to another...
6
by: comp.lang.php | last post by:
/** * Generate the random security image * * @access public * @param $willUseFilePath (default false) boolean to determine if you will be using a file path * @param mixed $filePath (optional)...
1
by: bharathv6 | last post by:
i need to do is modify the image in memory like resizing the image in memory etc ... with out saving it disk as i have to return back the image with out saving it disk PIL supports the use of...
2
by: studentofknowledge | last post by:
For some unknown reason ie is placing images I have in a div in a weird way. One image is overlapping another but this problem is not occuring in mozilla. I have looked at my code over and over again...
0
Debadatta Mishra
by: Debadatta Mishra | last post by:
Introduction In this article I will provide you an approach to manipulate an image file. This article gives you an insight into some tricks in java so that you can conceal sensitive information...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.