JSFiddle - React, Tailwind, and code Playground

change img class on lick each function

by Shah Danial

HTML

<div id="WTF">

</div>

<a class="center_img"  href="https://assets.servedby-buysellads.com/p/manage/asset/id/32054"><img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054"/></a>
<br/>

<a class="center_img"  href="https://jsfiddle.net/img/logo.png"><img src="https://jsfiddle.net/img/logo.png"/></a>
<br/>

<a class="center_img" href="http://static.jsbin.com/images/dave.min.svg"><img src="http://static.jsbin.com/images/dave.min.svg"/></a>
<br/>

JavaScript

function imageToDataUri(img, width, height) {

    // create an off-screen canvas
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');

    // set its dimension to target size
    canvas.width = width;
    canvas.height = height;

    // draw source image into the off-screen canvas:
    ctx.drawImage(img, 0, 0, width, height);

    // encode image to data-uri with base64 version of compressed image
    return canvas.toDataURL();
}

document.getElementById('wtf').innerHtml = imageToDataUri('https://jsfiddle.net/img/logo.png"><img src="https://jsfiddle.net/img/logo.png', 15, 15)