JSFiddle - React, Tailwind, and code Playground

by Sillvva

HTML

<div id="output"></div>

CSS

body { background: #fff; }

JavaScript

let baseImage = document.createElement("img");
baseImage.crossOrigin = 'anonymous';
baseImage.src = 'https://cores-fvtt.herokuapp.com/https://media-waterdeep.cursecdn.com/avatars/thumbnails/4740/109/150/150/636758626692370980.png';
$(baseImage).on('load', () => {
	var canvas = document.createElement("canvas");
    canvas.width = baseImage.width;
    canvas.height = baseImage.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(baseImage, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    document.getElementById('output').innerHTML = '<img src="'+dataURL+'" />';
});