JSFiddle - React, Tailwind, and code Playground

HTML

<image id="i" />

JavaScript

function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // The following line produces the following error:
    // Uncaught Error: SECURITY_ERR: DOM Exception 18
    var dataURL = canvas.toDataURL("image/png");
    
    alert(dataURL);
}

var $image = $('#i');
var image = $image.get(0);
$image.load(function() {
    getBase64Image(image);
});
image.src =...