Search code examples
phpjavascriptdatabaseimage-processingpixastic

How do I save a manipulated image?

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?

Solution

  • 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.