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>
Facing issues? Have Questions? Post them here! I am happy to answer!
Author Info:
Rakesh (He/Him) has over 14+ years of experience in Web and Application development. He is the author of insightful How-To articles for Code2care.
Follow him on: X
You can also reach out to him via e-mail: rakesh@code2care.org
More Posts related to JavaScript,
- How to Run JavaScript on Mac Terminal
- Get Current time in GMT/UTC using JavaScript
- How to yarn reinstall all Packages
- [javaScript] Convert text case to lowercase
- Get Device Screen Width and Height using javaScript
- Fix - npm start: sh: index.js: command not found
- npm WARN saveError ENOENT: no such file or directory, open /mnt/c/package.json
- JavaScript : Get url protocol HTTP, HTTPS, FILE or FTP
- JavaScript: Convert an Image into Base64 String
- JavaScript : Get current page address
- How to get query string in JavaScript HTML location.search
- Create React App using npm command with TypeScript
- JavaScript: Count Words in a String
- Add Animated Scrolling to Html Page Title Script
- How to send email from JavaScript HTML using mailto
- Javascript convert text case from uppercase to lowercase
- Submit html form on dropdown menu value selection or change using javascript
- Send Extra Data with Ajax Get or Post Request
- Fix: SyntaxError: The requested module does not provide an export named default
- Examples: Convert String to int in JavaScript
- 10 ways to Convert String to a Number in JavaScript
- Excel Fix: SECURITY RISK Microsoft has blocked macros from running because the source of this file is untrusted.
- Fix: ReferenceError: require is not defined in ES module scope [Node]
- [JavaScript] Remove all Newlines From String
- How to detect Browser and Operating System Name and Version using JavaScript
More Posts:
- AWS SNS CLI Command Publish Message Attributes - AWS
- Fix Error CAA50021 - Number of retry attempts exceeds expectation - Microsoft 365 Apps - Microsoft
- How to add hint text in bootstrap input text field and text area - Bootstrap
- Change Mouse Scrolling in Mac OS X - Mac-OS-X
- Get Client IP address from HTTP Response in Java - Java
- How to Press a Enter in Cell for New Line on Microsoft Excel on Mac - Windows
- Common Microsoft Teams sign in errors and how to fix - Teams
- PowerShell ps1 script is not digitally signed, you cannot run this script on the current system - Powershell