Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Convert Canvas Graphics to Image?
HTML canvas graphics provide lots of options to create versatile objects. While working with Canvas you might want to convert the graphics into real images which you can download or print. This article will help you create the graphics and save them on your device.
Example
Here, we create graphics in javascript Canvas and then converting the graphics to images. In this example, we will create a solid red square and then download it to the device using a button.
Algorithm
Step 1 :Create the graphics on the canvas.
Step 2 :After creating the graphics get the id of the graphic element.
Step 3 :Create an image object and use toDataURL() function to set the image's source (src) as the canvas's data URL.
Step 4 :Now assign the image source to the link's href property.
Step 5 :Create a unique file name for the canvas image as your image will be saved with this name.
Step 6 :Insert a button element to save this image.
Example
<!DOCTYPE html>
<html>
<head>
<title>Canvas to Image Conversion</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<button onclick="convertToImage()">Convert to Image</button>
<script>
function convertToImage() {
// Get the canvas element
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
// Clear the canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// Draw a red square on the canvas
context.fillStyle = 'red';
context.fillRect(50,50,100,100);
// Create an image element
const image = new Image();
// Assign the canvas content as the source of the image
image.src = canvas.toDataURL();
// Create a temporary link element to download the image
const link = document.createElement('a');
link.href = image.src;
link.download = 'canvas_image.png';
// Trigger the link programmatically to start the download
link.click();
}
</script>
</body>
</html>
Example
In this example, we will try converting complex canvas graphics into an image.
Algorithm
Step 1 :Create the graphics on the canvas.
Step 2 :Get the id of the graphic element and create an image object.
Step 3 :Use toDataURL() function to set the image's source.
Step 4 :Create the canvas graphics.
Step 5 :Specify an image file name.
Step 6 :Create the graphics by setting the image color and dimensions.
Step 7 :Set the image conversion button.
Example
<!DOCTYPE html>
<html>
<head>
<title>Canvas to Image Conversion</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<button onclick="convertToImage()">Convert to Image</button>
<script>
function convertToImage() {
// Get the canvas element
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
// Clear the canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// Draw a red square on the canvas
context.fillStyle = 'red';
context.fillRect(50,50,100,100);
// Create an image element
const image = new Image();
// Assign the canvas content as the source of the image
image.src = canvas.toDataURL();
// Create a temporary link element to download the image
const link = document.createElement('a');
link.href = image.src;
link.download = 'canvas_image.png';
// Trigger the link programmatically to start the download
link.click();
}
</script>
</body>
</html>
Conclusion
One can convert canvas graphics to images effortlessly by following few lines of code and a trigger event. In this article, we had covered tow methods to create graphics on canvas and save them as separate image files.
2K+ Views
