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
HTML5 Canvas to PNG File
To convert HTML5 canvas to PNG, follow the below-given steps −
You need to add the generated data URL to the href attribute of an <a> tag.
Dialog for base64 image −
<img src="data:image/png;base64,iOBVRw0KGgoAAAANSUhEUg...." class="image" />
Add a filename −
<a download="newimg.png" href="...">
Now define http headers −
headers=Content-Disposition: attachment; filename=newimg.png
To deal with the RAM of the web browser and make its utilization less −
// generated the data URL dynamically
function myCanvas() {
var d = canvas.toDataURL('image/png');
this.href = d;
};
d.addEventListener('click', myCanvas, false);
Updated on: 24-Jun-2020
470 Views
Advertisements