Skip to content

Instantly share code, notes, and snippets.

@feedsbrain
Created November 9, 2020 16:42
Show Gist options
  • Save feedsbrain/9b61ae31e62cf8e1213e2ade14a63cac to your computer and use it in GitHub Desktop.
Save feedsbrain/9b61ae31e62cf8e1213e2ade14a63cac to your computer and use it in GitHub Desktop.
Better Way to Resize Image
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
// set size proportional to image
canvas.height = canvas.width * (img.height / img.width);
// step 1 - resize to 50%
var oc = document.createElement('canvas'),
octx = oc.getContext('2d');
oc.width = img.width * 0.5;
oc.height = img.height * 0.5;
octx.drawImage(img, 0, 0, oc.width, oc.height);
// step 2
octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);
// step 3, resize to final size
ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
0, 0, canvas.width, canvas.height);
}
img.src = "//i.imgur.com/SHo6Fub.jpg";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment