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.
- How to resize an image in an HTML 5 canvas ?
- What is the difference between --save and --save-dev in Node.js ?
- Convert an image into grayscale image using HTML/CSS
- HTML | canvas Tag
- How to get Pixel from HTML Canvas ?
- HTML | Canvas Basics
- HTML | canvas arc() Method
- HTML | DOM Canvas Object
- HTML | canvas lineJoin Property
- HTML | canvas strokeText() Method
- HTML | canvas textAlign Property
- HTML | canvas globalAlpha Property
- HTML | <canvas> height Attribute
- HTML | canvas textBaseline Property
- HTML | canvas beginPath() Method
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.