Javascript, how to save image changed by javascript

Question

I am making some web photo gallery and I decided to make there some basic stuff for customizing your images, like change their width, height, make some borders around that and other stuff. For now I have very simple javascript methods for changing the width and height of my image, something like this:

function smaller() {
  var image = document.getElementById('forchange');

  var width = image.clientWidth;
  var height = image.clientHeight;

  image.height = height - 50;
  image.width = width - 50;
}

function bigger() {
  var image = document.getElementById('forchange');

  var width = image.clientWidth;
  var height = image.clientHeight;

  image.height = height + 50;
  image.width = width + 50;
}

HTML

{block content}
{snippet changePhoto}
<img src="{$photo}" id="forchange">
{/snippet}
<label>Velkosť </label>

<button type="submit"  onclick="bigger()" value="{$photo}" name="bigger">+</button>
<button type="submit"  onclick="smaller()" value="{$photo}" name="smaller">-</button>
<form action="{link Gallery:change $photo}" method="post" >
<input type = "submit" value="ulozit" name="save">
</form>

It's working the image is smaller or bigger according to what button I press but, after refreshing the page the image is in same width and height as it was (logically).

How can I save or rewrite the current image file saved on my disk so after refresh the page I can see the new image which I customized as I wanted to? Is it possible to do something like that?

I searched on web a lot, I found some stuff about canvas and lot of things but none of that seemed like it's what I need. Thank you all very much for every answer.

You need JQuery-AJAX/AJAX with PHP for this to happen, you need to store this. This is one of the way. — divy3993, Apr 24 '16 at 17:30
Also you could go for cookie store, but won't last if users cleans history and cookie. — divy3993, Apr 24 '16 at 17:32
you can use a cookie to save the image.height and image.width using javascript.Everytime the page loads you can check if that cookie exists and if exists set height and width to the saved values — George Pant, Apr 24 '16 at 17:34
Well I think the best way is somehow rewrite the current file, but I have no idea how to that, I came up with an idea of saving the current width heght and border information for every image in my database and only updating those values in database but, it doesn´t seems to me like good solution — eraz, Apr 24 '16 at 17:34
You never change the image, you just change the way the image is being displayed, in this case the size it's scaled to on the website. — adeneo, Apr 24 '16 at 17:36
and how long the cookies are set, because there is some expiration date so, when the cookies will expired all my customized images will be back to default or not ? — eraz, Apr 24 '16 at 17:38
Also, the solution depends on how persistent you want the change to be. Should the change be visible across machines and browsers? If so then you'll need a server side solution. Is it cool if the changes persist only on a single machine/browser combo and only if the user doesn't clear the cache? Then you can try doing something on the client. — bmceldowney, Apr 24 '16 at 17:38
This code also does not change the image data, just the style. There are many image editing libs, for example https://github.com/MattKetmo/darkroomjs which can help with the user interface. These generally write to a canvas. The Canvas data is then used to save as a new image. To rewrite the file, you can convert a canvas to a data URI using various solutions, but this one seems simple https://davidwalsh.name/convert-canvas-image and then you'll want a serverside solution to save the image via a post request. — Radio, Apr 24 '16 at 17:38
@adeneo, image could be drawn to canvas, changed there and then downloaded. — Yuriy Yakym, Apr 24 '16 at 17:38
@YuraYakym - it could, but it isn't. Pigs could fly, but they don't! — adeneo, Apr 24 '16 at 17:42
@Radio So if I understand correctly I should make a canvas in javascript from my file, change the canvas according to what I need a then for example save the canvas as a new Image file and can remove the old image file ? — eraz, Apr 24 '16 at 17:43
@eraz - it would probably be easier to just store the dimensions clientside, and then set the image to that size when the user returns. If you want this to change the image size for **all** users, you could just send the dimensions serverside, and use something like imageMagick to easily resize the image on the server. — adeneo, Apr 24 '16 at 17:46

score 1 · Answer 1 · edited May 23 '17 at 12:16

The canvas stuff you found on the internet is one of two solutions you could implement. The other solution is to shrink the image on the backend.

When you change the image width and height the way you are doing it, what is actually happening is you still have the massive big picture, you are just telling the browser to render it at a smaller width and height. We do not have access to the browsers smaller rendered version of the image, if you try to save the image it will save the larger version of the image.

The solution

a) you ask the server to send you a smaller version of the image. You can do this directly with PHP, or even easier most servers have allow you to do this with Image Magick.

b) you can compress and downsize the image on the front-end. Here is an example of compressing the images on the front-end. To add the downsizing ability, add the following code to the compressCanvas function.

canvas.width = width;
canvas.height = height;

Javascript, how to save image changed by javascript

1 Answers1