How do I save a manipulated image?

Question

I use a javascript image processing library to manipulate an image, and when I'm done I want to have the possibility to save the image (a new file) to the server and keep track of it in a database. The database part is no problem, but how do I save the image without losing the manipulation done?

Are there any libraries for that or is it easiest to just do it myself?

possible duplicate of [Capture HTML Canvas as gif/jpg/png/pdf?](http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf) — phihag, Apr 05 '11 at 18:38

score 3 · Accepted Answer · edited May 23 '17 at 09:58

It doesn't seem like Pixastic provides an interface for this, specifically, but there is a property in the options giving you the resulting canvas:

var options = {};
Pixastic.process(image, "action", options);
options.resultCanvas; // <- holds new canvas

This canvas object you can use to obtain a "data URL":

options.resultCanvas.toDataURL('image/jpeg')

Uploading 'canvas' image data to the server

The "data URL" is a tiny header (see the so-post linked) and the file content in a string. You can post this to the server for storage.

How do I save a manipulated image?

1 Answers1