Image file (URL) -> base64 String (converter)

In this example below you will see how to do a Image file (URL) -> base64 String (converter) with some HTML / CSS and Javascript

This awesome code was written by alan8r, you can see more from this user in the personal repository.
You can find the original code on
Copyright alan8r ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Image file (URL) -> base64 String (converter)</title>


  after the image is visible in the canvas, click the "convert to base64" button and it should autopopulate with the 'data:' string for the image!<br />uses <a href=""></a> to keep the canvas... pure?</span><br /><br /><br />
  Image URL: <input id="txtURL" type="text" />
<input id="bLoad" type="button" value="load" />
<br /><br /><canvas id="canvasMain"></canvas>
<br /><br /><input id="bBase64" type="button" value="convert to base64"><br />
<textarea cols=40 rows=15 id="txtArea"></textarea>

    <script  src="js/index.js"></script>



/*Downloaded from */
var bLoad = document.getElementById("bLoad");
var bBase64 = document.getElementById("bBase64");
var txtArea = document.getElementById("txtArea");
var canvas = document.getElementById("canvasMain"); = "#000";

var url = "";

bLoad.onclick = function() {
  url = document.getElementById("txtURL").value;
  var image = new Image();
  image.crossOrigin = "anonymous";
  image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(image, 0, 0);
  image.src = "" + url;

bBase64.onclick = function() {
  txtArea.value = canvas.toDataURL();