JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<input id="width" type="range" />
<img />
<canvas />

CSS

img {
  max-width: 300px;
}

canvas {
  max-width: 300px;
}

JavaScript

var imageUrl = 'https://rsz.auctionclub.com/imageproxy/historic/b2a98833e5a0f327cab4821da26e7033',
		image = document.querySelector('img'),
		canvas = document.querySelector('canvas'),
		context = canvas.getContext('2d');

var settings = {
	width: 300
};


var widthControl = document.querySelector('input#width');

widthControl.addEventListener('change', function () {
	settings.width = this.value;
  render();
});

var serialize = function(obj) {
  var str = [];
  for(var p in obj)
    if (obj.hasOwnProperty(p)) {
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    }
  return str.join("&");
};




var imageLoader = new Image();
imageLoader.addEventListener('load', function () {
	widthControl.setAttribute('min', 0);
	widthControl.setAttribute('max', this.width * 2);
	widthControl.setAttribute('step', 1);

	render();
});
imageLoader.src = imageUrl;

    
function render () {
	image.src = imageUrl + '?' + serialize(settings);
  
  var scale = 1;
  if (settings.width && settings.width < imageLoader.width) {
		scale = settings.width / imageLoader.width;
  }
  
  canvas.width = imageLoader.width * scale;
  canvas.height = imageLoader.height * scale;
  context.drawImage(imageLoader, 0, 0, canvas.width, canvas.height);
}