JSFiddle - React, Tailwind, and code Playground

by Thomas Gladdines

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/2.0.4/js/Jcrop.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/2.0.4/css/Jcrop.min.css">
<img id="image" />

CSS

.jcrop-active canvas {
	display: none;
}

JavaScript

var maxWidth = 200;
var img = new Image();

img.onload = function() {


  var canvas = document.createElement('canvas');
  canvas.width = maxWidth;
  canvas.height = img.height * (maxWidth / img.width);

  var ctx = canvas.getContext('2d');
  
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

	document.getElementById('image').src = canvas.toDataURL();
  
  $('#image').Jcrop({
  	bgColor:'',
    setSelect: [0, 0, canvas.width, canvas.height]
  });
  $(".jcrop-active").css({"background": "url(\""+img.src+"\")", "background-size": "100%"});
  

}
img.setAttribute('crossOrigin', 'anonymous');
img.src = 'https://z1.porter21.com/wp-content/uploads/sites/2/2015/02/sprite1.png';