Basically we need (all the necessary libraries are included in our ready example):
– PHP files, where we will process the data,
– images (jpg, png) to process.
Steps to do:
1. Load image from file JPG or PNG file to the HTML5 Canvas element (or draw a simple picture directly, using Canvas methods)
2. Perform some graphics operations on this picture
3. Get the modified contents of the Canvas, so that you can save it in a file
The 3rd point was most important in our case.
A whole magic was performed through one simple method — toDataURL() of the HTML5 Canvas object:
var strDataURI = oCanvas.toDataURL(); // returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgA…"
This method returns the Canvas content as data: URI. This allows for further operations, such as converting and saving the data in the form of the final file.