JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Original Image</h1>
<img src="https://i.imgur.com/5YJ3HQ9.jpg" id="sourceImage">

<h1>Canvas Rendered Image</h1>
<canvas id="myCanvas"></canvas>

<h1>Base64 Encoded Image</h1>
<img id="base64Image">

CSS

img {
    max-width: 100%;
}

JavaScript

var canvas = document.getElementById("myCanvas");
var srcImg = document.getElementById("sourceImage");
var final = document.getElementById("base64Image");

function convertImageToBase64() {
	var img = new Image();
	img.crossOrigin = 'Anonymous';
	img.onload = function(){
		canvas.height = this.height;
		canvas.width = this.width;
	  	canvas.getContext('2d').drawImage(this,0,0);
	  	var dataURL = canvas.toDataURL();
	  	canvas = null;
        final.src = dataURL;
	};
	img.src = srcImg.src;
}

convertImageToBase64();