JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<script src="https://pixijs.download/v6.0.2/pixi.min.js"></script>
<script src="https://ytiurin.github.io/downscale/dist/downscale.js"></script>

JavaScript

/* const imgSrc = "https://d1c7ic18uy0m4b.cloudfront.net/480x480/test1619729254096YSHCWKWE.jpeg"; */
const imgSrc = "https://images.homify.com/c_fill,f_auto,q_0,w_740/v1571637820/p/photo/image/3235863/c7b90fae-b304-48fc-81ba-f3775e4314d0.jpg";
const width = 350;
const height = 350;

// --------- HTML IMAGE ----------
const image = new Image();
image.crossorigin = true;
image.src = imgSrc;
image.width = width;
image.height = height;

document.body.appendChild(image);

// -------- CANVAS --------

const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;

ctx.drawImage(image, 0, 0, width, height);

// ---- down scale image

downscale(imgSrc, width, height).
then(function(dataURL) {
  var destImg = document.createElement('img');
  destImg.src = dataURL;
  document.body.appendChild(destImg);
}).catch(e => console.log(e));