6 Replies - 997 Views - Last Post: 08 July 2013 - 01:50 PM

#1 Zel2008  Icon User is offline

  • D.I.C Addict

Reputation: 14
  • View blog
  • Posts: 790
  • Joined: 06-January 09

Save image data to disk

Posted 06 July 2013 - 04:56 PM

Hi all,

I'm using the lake.js plugin to animate an image on my web site, and in order to do this it calculates multiple images, then cycles through them. I would like to save the images that it calculates -- just once, that's all I'd need -- so it doesn't have to calculate them every time and won't slow down my site. It puts the image pixel data in a Javascript array called frames, one image pixel array per index. (That is, each index of "frames" holds a 2D array of image data.) How would I take the contents of that array and write them out to separate JPEG images?

I know there are a lot of solutions out there that talk about saving images from an HTML5 canvas (I've looked through them ad nauseam and haven't found something that works for this), but this has nothing whatsoever to do with a canvas -- just pure Javascript data.

If anyone could help me figure this out, I'd appreciate it.

Thanks,
Zel2008

This post has been edited by Zel2008: 06 July 2013 - 04:58 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Save image data to disk

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1138
  • View blog
  • Posts: 7,110
  • Joined: 07-September 06

Re: Save image data to disk

Posted 06 July 2013 - 11:15 PM

I have a quick question here: Are you displaying actual images? Or just displaying HTML elements positioned over each other and animated to look like an image?

If the first one, then you should be able to just send the image data back to your server (or right click and save-as from your local computer) for each frame of the image and then create either (A ) a gif image, or (B ) a series of images named something along the lines of image-01.jpg, image-02.jpg... etc.

If the latter, then you have a little more fun, but I would suggest stringifying (JSON.stringify) your array to a JSON string, storing that string on the server and loading it when you load the page. The string will remain the same allowing you to parse it (JSON.parse) and not calculate all the intermediate steps for the animation.

Hope that is of use.
Was This Post Helpful? 0
  • +
  • -

#3 Zel2008  Icon User is offline

  • D.I.C Addict

Reputation: 14
  • View blog
  • Posts: 790
  • Joined: 06-January 09

Re: Save image data to disk

Posted 07 July 2013 - 10:52 AM

Thanks BetaWar,

They're actual images, but I don't have access to all of them. Basically, I have my original image, and then the plugin calculates a group of images from that image (and saves their pixel data in a Javascript array), and then shuffles through the images that it calculates.

What you're saying, though, is that I can save the array as a string? Would I be saving that as a text file and then reading it? I've used JSON once or twice, but I don't have that much experience with it.

EDIT: I tried converting to JSON and logging to the console, but it froze my browser; the JSON strings from the image are too big to handle.

Thanks,
Zel2008

This post has been edited by Zel2008: 07 July 2013 - 11:35 AM

Was This Post Helpful? 0
  • +
  • -

#4 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1138
  • View blog
  • Posts: 7,110
  • Joined: 07-September 06

Re: Save image data to disk

Posted 07 July 2013 - 11:33 AM

Yeah, a plain text file would be capable of storing the json string. To use it though you would probably want to have it in a javascript file or passed in from a server-side script (though there are other ways, these are likely the easiest).
Was This Post Helpful? 1
  • +
  • -

#5 Zel2008  Icon User is offline

  • D.I.C Addict

Reputation: 14
  • View blog
  • Posts: 790
  • Joined: 06-January 09

Re: Save image data to disk

Posted 07 July 2013 - 01:51 PM

Thanks BetaWar,

I think that would work for little images, but not the big backgrounds I'm handling. Thanks for the idea though.

If it will help anyone else who needs to do something similar with animating images, I figured out that if the image switching is on a delay, you can slow the delay to a minute or so, take screenshots of each frame, and then manually crop out any pieces you don't want. It's a bit tedious, but it works as long as you make sure all your cropped pieces are the same size and area.

Thanks,
Zel2008
Was This Post Helpful? 0
  • +
  • -

#6 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1138
  • View blog
  • Posts: 7,110
  • Joined: 07-September 06

Re: Save image data to disk

Posted 07 July 2013 - 03:48 PM

One last thought, if it is an actual image that you are displaying you may be able to slow it down and right-click->save as the image to avoid having to crop it.
Was This Post Helpful? 1
  • +
  • -

#7 Zel2008  Icon User is offline

  • D.I.C Addict

Reputation: 14
  • View blog
  • Posts: 790
  • Joined: 06-January 09

Re: Save image data to disk

Posted 08 July 2013 - 01:50 PM

Thanks again, I'll keep that in mind next time. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1