JSFiddle - React, Tailwind, and code Playground
JavaScript
handleOpenedFile('http://www.electricscotland.com/pictures/images/views30.jpg');
function handleOpenedFile(fullPath, blobData) {
var image = new Image();
image.src = fullPath; //path to image
image.onload = function () {
var resized = resizeMe(image); // send it to canvas
//Do stuff with the DataURL returned from resizeMe()
};
}
function resizeMe(img) {
var canvas = document.createElement('canvas');
var width = Math.round(img.width / 2);
var height = Math.round(img.height / 2);
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
ctx.drawImage(img, 0, 0, width, height);
return canvas.toDataURL("image/jpeg", 0.8);
}