JSFiddle - React, Tailwind, and code Playground

HTML

<img/>
<img/>

CSS

body {
  background-color: grey;
}
canvas {
  background-color: orange;
}
img {
  display: inline-block;
  border: solid 1px red;
  box-sizing: border-box;
  /* margin: 5px; */
}

JavaScript

var src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAklEQVR4AewaftIAAAHdSURBVL3BwWnzWABG0Rsh8PrrQQUExBTgNrRUA2nhtTANaKk2VEAQTAHu4e6yzeRBBMLITpw/M+c8vb29vfM/ajiQhCT8FxquJEGlSkISflPLpyRUKpXKJgl7Kj/V8iEJlcoRlb0kVCqPejqdTu98UHlUEiqV73o6nU7vKn8iCSrf0fALVJLwHQ2/RCUJX2m4IwmPSsLe5Vy4nAuXc6Fq2UlCpfKIJKioVEl4fX5h0y2FTcuOShL2kqDylSTsdUvhSMtOEqokqFQqSahUblG5nAtVtxRuabiick1FJQlJOHI5F6puKdzTckAlCddUkpCEI91S+ErLpyTckwQVlb0kvD6/0C2FzdyPDOvEkZYdlSoJ11SSsKfy+vxCtxSquR+phnVi7keGdeJay5UkqBxR2bucC91S2AzrxGZYJ440KknYqHzH5Vz4iZYDSdioVEmoVDbdUtjM/Ug1rBP3NHxQqZKwUbnlci50S2FvWCeGdWLuR+Z+ZO5HjrR8UklCEvaSsFH5yrBO3NNwQGVPZXM5F7ql8FMNNyShUqlUkvCnGm5QUUnCb2q4ovITcz8y9yNfaXnQX//8jRSuDetENfcj1bBO7M39SNXyAJUkXM6FbikcGdaJau5H9oZ1ovoXKqXpWz9wo8gAAAAASUVORK5CYII=";

function resizeBase64(base64, zoom) {
    return new Promise(function(resolve, reject) {
        var img = document.createElement("img");

        // once image loaded, resize it
        img.onload = function() {
            // get image size
            var imageWidth = img.width;
            var imageHeight = img.height;

            // create and draw image to our first offscreen canvas
            var canvas1 = document.createElement("canvas");
            canvas1.width = imageWidth;
            canvas1.height = imageHeight;
            var ctx1 = canvas1.getContext("2d");
            ctx1.drawImage(this, 0, 0, imageWidth, imageHeight);

            // get pixel data from first canvas
            var imgData = ctx1.getImageData(0, 0, imageWidth, imageHeight).data;

            // create second offscreen canvas at the zoomed size
            var canvas2 = document.createElement("canvas");
            canvas2.width = imageWidth * zoom;
            canvas2.height = imageHeight * zoom;
            var ctx2 = canvas2.getContext("2d");

            // draw the zoomed-up pixels to a the second canvas
            for (var x = 0; x < imageWidth; ++x) {
                for (var y = 0; y < imageHeight; ++y) {
      ...