Jquery, resize data of an image

Question

I have a script for resize an image.

So, for begin, i have an image with : height=600px and width=500px

After I use my script, and a resize this image to to, for example : height=300px and width=250px.

I use :

$('#image').css("width", varvar);
$('#image').css("height", varvarvar);

But if i look my image with firebug, the data is always to the originale size (600 and 500), how can i resize the data (src) a my image with jquery ?

If you wish to edit the source image and save it on your server you'll need PHP in stead of Jquery. Jquery only works on client side. — timo, Jan 30 '14 at 14:02
I need to resize the image data with javascript, because after that i have a module for select just a part of this image (jcrop) — Clément Andraud, Jan 30 '14 at 14:03
Then you have to save the image to the server first with PHP. Then load the newly created image in JCROP. — timo, Jan 30 '14 at 14:04
or if you dont know php there are other languages... if(php != the_internet){ ClapYourHands(); } *clap clap* — Adween, Jan 30 '14 at 14:05
There is no way to resize an image data with javascript, jquery, a plugin ... don't know ? without php — Clément Andraud, Jan 30 '14 at 14:07
You can resize an image client side using a canvas, like explained here: http://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly — Niklas, Jan 30 '14 at 14:09
@ClémentAndraud i would use c# and .net... php is one solution but there are others. — Adween, Jan 30 '14 at 14:10
there is one particular js plugin which u could use to do so,**http://www.garralab.com/nailthumb.php** — dreamweiver, Jan 30 '14 at 14:16
@ClémentAndraud Let me know if my answer below answers your question — Alex Shilman, Jan 30 '14 at 16:02

score 0 · Accepted Answer · answered Jan 30 '14 at 14:11

0

As thoroughly mentioned in the comments, there's no way to change the original size (as in, the amount of data) of an image with client-side scripting. The issue being that the image is hosted on the server-side and any javascript manipulation remains strictly client-side. If you want to commit some sort of data change, that would require server-side scripting, such as PHP (although there are many other alternatives..)

Basically, the idea is that the client sends a request for image manipulation to the server, who then runs some sort of script to alter the original image data and replaces the original file on the server. On page refresh, the image would have changed.

answered Jan 30 '14 at 14:11

Elad Stern

1,072
13
23

Is that possible with ajax, to call a php script, resize my image with php, return a new image base64, and put this new image in my src attribut ? i don't want a refresh – Clément Andraud Jan 30 '14 at 14:14
@ClémentAndraud - If you have the image on the server, why don't you rescale it before using it in the first place? – Niklas Jan 30 '14 at 14:17
i dont think so, nailthumb actually allows you to resize the images to whatever size without losing the pixels. **http://www.garralab.com/nailthumb.php** – dreamweiver Jan 30 '14 at 14:18
I don't have the image on my server. I get this image with a upload form, i need to resize and do some stuff before save – Clément Andraud Jan 30 '14 at 14:18
The browser doesn't have manipulation access to files on your computer. You'd have to upload it and manipulate it server-side. – Elad Stern Jan 30 '14 at 14:24

Alex Shilman · Answer 2 · 2014-01-30T16:00:41.013

When you use .css you are changing the style attribute of the image. If you want to change its width and height attributes you have to do this like so:

var img = document.getElementById('image'), height = 25, width = 50;
    img.width = width;
    img.height = height;

Then when you inspect the element you will see its width and height attributes changed. But this is only on the browser. It will not change its width and height permanently. You could however convert it to Base64 and send it to your server. But you would have to use HTML5 canvas. I can show you how to do that if needed.

Jquery, resize data of an image

2 Answers2