JSFiddle - React, Tailwind, and code Playground

HTML

Image <br>
<div id="mydiv" ></div>

   
<br><br>   
<img id="image2">

CSS

#image2 {
    border: 1px solid red;
    
}

#mydiv {
    border: 2px solid lime;
}

#image2 {
    border: 3px solid green;
}

JavaScript

var mydiv = document.getElementById('mydiv'),
    image2 = document.getElementById('image2');

image2.crossOrigin="anonymous";

var image3 = new Image();
mydiv.appendChild(image3);
image3.onload = function() {
    
    var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

    canvas.width = image3.width;
    canvas.height = image3.height;
    
    ctx.drawImage(image3,0,0, canvas.width, canvas.height);

    var dataUrl = canvas.toDataURL("image/png");
    
    image2.src = dataUrl;
    

}
image3.crossOrigin="anonymous";
image3.src = "https://p0.ssl.cdn.btime.com/dmfd/480_270_/t01365e2142061c3143.jpg?size=480x340";