There are multiple ways in which you can convert an image into its Base64 String, one of those ways is using Canvas,
Example:<!html>
<head>
<title>Image to Base64 String Example: Code2care.org</title>
</head>
<body>
<h2>Image Displayed using IMG Tag:</h2>
<img src="code2care-logo.jpg" id="myImg" alt="myImg"/>
<h2>Image Displayed using Base64 String Tag:</h2>
<div id="myImg64" alt="myImg64"></div>
<script type='text/javascript'>
var image = document.getElementById('myImg');
var canvas = document.createElement('canvas');
canvas.getContext('2d').drawImage(image, 0, 0, image.naturalHeight, image.naturalWidth);
var base64ImageString = canvas.toDataURL();
document.getElementById("myImg64").innerHTML = base64ImageString;
</script>
</body>
</html>
-
Have Questions? Post them here!
More Posts related to JavaScript,
- How to get UTC (GMT) time using JavaScript
- Submit html form on dropdown menu value selection or change using javascript
- How to detect Browser and Operating System Name and Version using JavaScript
- JavaScript : Get current page address
- [javaScript] Convert text case to lowercase
- How to check if a String contains substring or a word using javaScript
- Writing your first Hello, World! 🌍 JavaScript code Tutorial
- JavaScript: Check if variable is a number
- How to send email from JavaScript HTML using mailto
- Meaning of javascript:void(0) explained with example
- How to get query string in JavaScript HTML location.search
- Javascript convert text case from uppercase to lowercase
- Loading previous page using html button using JavaScript
- JavaScript : Get url protocol HTTP, HTTPS, FILE or FTP
- How to get current URL Location using Javascript HTML
- Detect if Cookies are enabled using JavaScript
- Write javaScript code in Swedish using FikaScript
- Add Animated Scrolling to Html Page Title Script
- JavaScript: Convert an Image into Base64 String
- Remove items from JavaScript array
- Send Extra Data with Ajax Get or Post Request
- How to Print from JavaScript HTML using window.print
- Get Device Screen Width and Height using javaScript
- Examples: Convert String to int in JavaScript
- npm WARN saveError ENOENT: no such file or directory, open /mnt/c/package.json
More Posts:
- Fix: Unable to edit text in TextEdit on Mac - MacOS
- [Fix] Restricted View permission level missing in SharePoint Online site library - SharePoint
- Android EditText Cursor Colour appears to be white - Android
- 17: Find Factorial of a Number - 1000+ Python Programs - Python-Programs
- What is Terminal Velocity and its Formula? How to calculate it programmatically? - Python
- Know Bash shell version command - Bash
- [Fix] Linux - bash: useradd: command not found - Linux
- 97 Useful Notepad++ Keyboard Shortcuts - NotepadPlusPlus
