JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<p>OG</p>
<div id="og"></div>
<p>Resized</p>
<div id="resized"></div>

CSS

img {
  max-width: 100%;
}

JavaScript

var image = 'https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F973877158_1280x800.webp&src1=https%3A%2F%2Ff.vimeocdn.com%2Fimages_v6%2Fshare%2Fplay_icon_overlay.png';

function toDataUrl(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
      if (xhr.status >= 400) {
        reject('Invalid thumbnail');
        return;
      }

      var reader = new FileReader();

      reader.onloadend = function() {
        resolve(reader.result);
      };
      reader.readAsDataURL(xhr.response);
    };
    xhr.onerror = function(error) {
      reject(error);
    };
    xhr.open('GET', url);
    // xhr.setRequestHeader('auth-token', 'eu--session--20b41bb9054db7fe88cb8739ca48ed84-988-953-2620');
    xhr.send();
  });
}

function getStringSize(str) {
  return (new TextEncoder().encode(str)).length + ' bytes';
}

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('image/jpeg', 0.8);
}

function resizeImage() {
  var newDataUri = imageToDataUri(this, 768, 480);

	console.log('Resized', getStringSize(newDataUri));

  var img3 = new Image;

  img3.src = newDataUri;
  document.querySelector('#resized').appendChild(img3);
}

var img1 = new Image;

img1.src = image;
document.querySelector('#og').appendChild(img1);

toDataUrl(image)
  .then((base64) => {
    console.log('OG', getStringSize(base64));    
    
    var img2 = new Image;

    img2.onload = resizeImage;
    img2.src = base64;    
  });