Saving HTML canvas as an image is pretty easy, it can be done by just right-clicking on the canvas and save it as an image. But saving canvas as an image on the server is quite different. This article will show you how to achieve that. Sometimes it is required to save canvas image after doing some server processing and this article will help in sending canvas image over the server for processing.
Here you will see, how to convert an HTML content into an image using JQuery. We know that there is a plugins html2canvas, by using that plugin we can easily convert the HTML content into image content after that we can save that file by right-clicking and choosing the save image option.
After that, we will convert that CANVAS image into the URL format and that to the server by using ajax after that the main part will be done by the PHP code. The PHP code will save that image on your server.
Below steps will illustrate the approach clearly.
Step 1: HTML code to convert canvas into image.
Step 2: Display the output to check that the canvas is successfully converted into an image.
- Before clicking the Button:
- After clicking the Button:
Step 3: Converting the image into URL format using canvas.toDataURL() method.
Step 4: Sending the converted URL format into your server via Ajax.
Step 5: This php code will save the image into the server.
- What is the difference between --save and --save-dev in Node.js ?
- How to specify an image as a server-side image-map in HTML ?
- Save Pages as HTML in ElectronJS
- How to resize an image in an HTML 5 canvas ?
- iptables-save command in Linux with examples
- HTTP headers | Save-Data
- PHP | DOMDocument save() Function
- Save Files in ElectronJS
- Mongoose | save() Function
- p5.js | save() Function
- What is the meaning of --save for NPM install ?
- How to auto-save data when application is offline in Angular 8?
- How to Make, Save, and Run a Simple VBScript Program?
- Difference Between Web server and Application server
- Difference between Apache Tomcat server and Apache web server
- How to create a canvas image using Fabric.js ?
- How to crop an image using canvas ?
- Convert an image into grayscale image using HTML/CSS
- HTML | Canvas Basics
- HTML | canvas lineWidth Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.