JSFiddle - React, Tailwind, and code Playground

by vrmtm

HTML

<script src="http://code.createjs.com/createjs-2014.12.12.combined.js"></script>
<canvas id="cc"></canvas>
<br />
Resized in: <span id="timer">-</span> s
<br />
<a href="https://i.imgur.com/8VsK7gS.png">Original image</a>
<button onclick="save()">
 save
</button>

CSS

canvas{
    border:1px solid grey;
    width: 100%;
}
#timer{
  font-weight:bold;
}

JavaScript

var canvas = document.getElementById("cc");
var ctx = canvas.getContext("2d");

var img = new Image();
img.crossOrigin = "Anonymous"; //cors support
img.onload = function(){
    var W = img.width;
    var H = img.height;
    canvas.width = W;
    canvas.height = H;
    ctx.drawImage(img, 0, 0); //draw image
    var time1 = Date.now();	
    
    //resize
    //resample_single(canvas, 850, 638, true);
    
    document.getElementById('timer').innerHTML = Math.round(Date.now() - time1)/1000;
}
img.src = 'https://i.imgur.com/8VsK7gS.png';

function save() {	
	var canvas = document.getElementById("cc");
	var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  window.location.href=image;
}