Resize Image Using HTML Canvas in JavaScript

xcv answered on July 14, 2022 Popularity 9/10 Helpfulness 4/10

answer Resize Image Using HTML Canvas in JavaScript

Resize Image Using HTML Canvas in JavaScript

Comment

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.src = "https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg?auto=compress&cs=tinysrgb&dpr=2";

img.onload = function () {
    // set height proportional to destination image
    canvas.height = canvas.width * (img.height / img.width);
    // step 1 - resize to 75%
    const oc = document.createElement('canvas');
    const octx = oc.getContext('2d');
    // Set the width & height to 75% of image
    oc.width = img.width * 0.75;
    oc.height = img.height * 0.75;
    // step 2, resize to temporary size
    octx.drawImage(img, 0, 0, oc.width, oc.height);
    // step 3, resize to final size
    ctx.drawImage(oc, 0, 0, oc.width * 0.75, oc.height * 0.75, 0, 0, canvas.width, canvas.height);
}

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: www.delftstack.com

Tags: canvas html javascript resize-image using

Link to this answer
Share Copy Link

Contributed on Jul 14 2022

xcv

0 Answers Avg Quality 2/10

Resize Image Using HTML Canvas in JavaScript

Contents

More Related Answers

Resize Image Using HTML Canvas in JavaScript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.