What is the best way to resize an image within a canvas?

Question

What is the best way to resize an image within a canvas?

As I work on displaying an image using the cover simulation in canvas, I came across a helpful solution.

Currently, the image changes based on screen resolution, but only updates after a page refresh.

https://i.sstatic.net/qEL26.gif

Is there a way to achieve the desired scaling effect without needing to refresh the page? Feel free to test resizing the window.

HTML

<canvas id="canvas"></canvas>

JS

var ctx = canvas.getContext('2d'),
    img = new Image;

canvas.setAttribute('width', window.innerWidth);
canvas.setAttribute('height', window.innerHeight);

img.onload = draw;
img.src = 'https://upload.wikimedia.org/wikipedia/commons/0/0f/2010-02-19_3000x2000_chicago_skyline.jpg';

function draw() {
    drawImageProp(ctx, this, 0, 0, canvas.width, canvas.height);
}

/**
 * By Ken Fyrstenberg
 *
 * drawImageProp(context, image [, x, y, width, height [,offsetX, offsetY]])
 *
 * If image and context are only arguments rectangle will equal canvas
*/
function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {

    if (arguments.length === 2) {
        x = y = 0;
        w = ctx.canvas.width;
        h = ctx.canvas.height;
    }

    /// default offset is center
    offsetX = offsetX ? offsetX : 0.5;
    offsetY = offsetY ? offsetY : 0.5;

    /// keep bounds [0.0, 1.0]
    if (offsetX < 0) offsetX = 0;
    if (offsetY < 0) offsetY = 0;
    if (offsetX > 1) offsetX = 1;
    if (offsetY > 1) offsetY = 1;

    var iw = img.width,
        ih = img.height,
        r = Math.min(w / iw, h / ih),
        nw = iw * r,
        nh = ih * r,
        cx, cy, cw, ch, ar = 1;

    if (nw < w) ar = w / nw;
    if (nh < h) ar = h / nh;
    console.log(ar)
    nw *= ar;
    nh *= ar;

    cw = iw / (nw / w);
    ch = ih / (nh / h);

    cx = (iw - cw) * offsetX;
    cy = (ih - ch) * offsetY;

    if (cx < 0) cx = 0;
    if (cy < 0) cy = 0;
    if (cw > iw) cw = iw;
    if (ch > ih) ch = ih;

    ctx.drawImage(img, cx, cy, cw, ch,  x, y, w, h);
}

javascript html css canvas

Answer 1

Answer №1

Make sure to include a reference to draw when the window is resized:

window.onresize = draw;

By following this step, the functionality should be in place.

Rather than:

drawImageProp(ctx, this, 0, 0, canvas.width, canvas.height);

Insert img within the draw function:

drawImageProp(ctx, img, 0, 0, canvas.width, canvas.height);

Next, move the width and height settings into the draw function, like so:

function draw() {
    canvas.setAttribute('width', window.innerWidth);
    canvas.setAttribute('height', window.innerHeight);
    drawImageProp(ctx, img, 0, 0, canvas.width, canvas.height);
}

You might also consider adding a debounce for re-drawing purposes:

var timeOut;
window.onresize = function(){
    if(timeOut)
        clearTimeout(timeOut);
    timeOut = setTimeout(draw, 10);
}

This method helps prevent multiple calls to the draw function when resizing the window frequently.

For a working demonstration, check out this example, modified from your codepen.

Answer 2

Make sure to include a reference to draw when the window is resized:

window.onresize = draw;

By following this step, the functionality should be in place.

Rather than:

drawImageProp(ctx, this, 0, 0, canvas.width, canvas.height);

Insert img within the draw function:

drawImageProp(ctx, img, 0, 0, canvas.width, canvas.height);

Next, move the width and height settings into the draw function, like so:

function draw() {
    canvas.setAttribute('width', window.innerWidth);
    canvas.setAttribute('height', window.innerHeight);
    drawImageProp(ctx, img, 0, 0, canvas.width, canvas.height);
}

You might also consider adding a debounce for re-drawing purposes:

var timeOut;
window.onresize = function(){
    if(timeOut)
        clearTimeout(timeOut);
    timeOut = setTimeout(draw, 10);
}

This method helps prevent multiple calls to the draw function when resizing the window frequently.

For a working demonstration, check out this example, modified from your codepen.

Answer 3

Answer №2

Success! Check it out!

http://codepen.io/anon/pen/KdRwVY

var context = canvas.getContext('2d'),
  image = new Image;

canvas.setAttribute('width', window.innerWidth);
canvas.setAttribute('height', window.innerHeight);

image.onload = draw;
image.src = 'https://upload.wikimedia.org/wikipedia/commons/0/0f/2010-02-19_3000x2000_chicago_skyline.jpg';

function draw() {
  drawImageProportionally(context, image, 0, 0, canvas.width, canvas.height);
}
window.onresize = resizeCanvas;

function resizeCanvas() {
  canvas.setAttribute('width', window.innerWidth);
  canvas.setAttribute('height', window.innerHeight);
  draw()
}

/**
 * By Ken Fyrstenberg
 *
 * drawImageProp(context, image [, x, y, width, height [,offsetX, offsetY]])
 *
 * If image and context are only arguments rectangle will equal canvas
 */
function drawImageProportionally(context, image, x, y, width, height, offsetX, offsetY) {

  if (arguments.length === 2) {
    x = y = 0;
    width = context.canvas.width;
    height = context.canvas.height;
  }

  /// default offset is center
  offsetX = offsetX ? offsetX : 0.5;
  offsetY = offsetY ? offsetY : 0.5;

  /// keep bounds [0.0, 1.0]
  if (offsetX < 0) offsetX = 0;
  if (offsetY < 0) offsetY = 0;
  if (offsetX > 1) offsetX = 1;
  if (offsetY > 1) offsetY = 1;

  var imgWidth = image.width,
    imgHeight = image.height,
    ratio = Math.min(width / imgWidth, height / imgHeight),
    newWidth = imgWidth * ratio, /// new prop. width
    newHeight = imgHeight * ratio, /// new prop. height
    centerX, centerY, cropWidth, cropHeight, aspectRatio = 1;

  /// decide which gap to fill    
  if (newWidth < width) aspectRatio = width / newWidth;
  if (newHeight < height) aspectRatio = height / newHeight;
  newWidth *= aspectRatio;
  newHeight *= aspectRatio;

  /// calculate source rectangle
  cropWidth = imgWidth / (newWidth / width);
  cropHeight = imgHeight / (newHeight / height);

  centerX = (imgWidth - cropWidth) * offsetX;
  centerY = (imgHeight - cropHeight) * offsetY;

  /// make sure source rectangle is valid
  if (centerX < 0) centerX = 0;
  if (centerY < 0) centerY = 0;
  if (cropWidth > imgWidth) cropWidth = imgWidth;
  if (cropHeight > imgHeight) cropHeight = imgHeight;

  /// fill image in dest. rectangle
  context.drawImage(image, centerX, centerY, cropWidth, cropHeight, x, y, width, height);
}

<canvas id="canvas"></canvas>

Answer 4

Success! Check it out!

http://codepen.io/anon/pen/KdRwVY

var context = canvas.getContext('2d'),
  image = new Image;

canvas.setAttribute('width', window.innerWidth);
canvas.setAttribute('height', window.innerHeight);

image.onload = draw;
image.src = 'https://upload.wikimedia.org/wikipedia/commons/0/0f/2010-02-19_3000x2000_chicago_skyline.jpg';

function draw() {
  drawImageProportionally(context, image, 0, 0, canvas.width, canvas.height);
}
window.onresize = resizeCanvas;

function resizeCanvas() {
  canvas.setAttribute('width', window.innerWidth);
  canvas.setAttribute('height', window.innerHeight);
  draw()
}

/**
 * By Ken Fyrstenberg
 *
 * drawImageProp(context, image [, x, y, width, height [,offsetX, offsetY]])
 *
 * If image and context are only arguments rectangle will equal canvas
 */
function drawImageProportionally(context, image, x, y, width, height, offsetX, offsetY) {

  if (arguments.length === 2) {
    x = y = 0;
    width = context.canvas.width;
    height = context.canvas.height;
  }

  /// default offset is center
  offsetX = offsetX ? offsetX : 0.5;
  offsetY = offsetY ? offsetY : 0.5;

  /// keep bounds [0.0, 1.0]
  if (offsetX < 0) offsetX = 0;
  if (offsetY < 0) offsetY = 0;
  if (offsetX > 1) offsetX = 1;
  if (offsetY > 1) offsetY = 1;

  var imgWidth = image.width,
    imgHeight = image.height,
    ratio = Math.min(width / imgWidth, height / imgHeight),
    newWidth = imgWidth * ratio, /// new prop. width
    newHeight = imgHeight * ratio, /// new prop. height
    centerX, centerY, cropWidth, cropHeight, aspectRatio = 1;

  /// decide which gap to fill    
  if (newWidth < width) aspectRatio = width / newWidth;
  if (newHeight < height) aspectRatio = height / newHeight;
  newWidth *= aspectRatio;
  newHeight *= aspectRatio;

  /// calculate source rectangle
  cropWidth = imgWidth / (newWidth / width);
  cropHeight = imgHeight / (newHeight / height);

  centerX = (imgWidth - cropWidth) * offsetX;
  centerY = (imgHeight - cropHeight) * offsetY;

  /// make sure source rectangle is valid
  if (centerX < 0) centerX = 0;
  if (centerY < 0) centerY = 0;
  if (cropWidth > imgWidth) cropWidth = imgWidth;
  if (cropHeight > imgHeight) cropHeight = imgHeight;

  /// fill image in dest. rectangle
  context.drawImage(image, centerX, centerY, cropWidth, cropHeight, x, y, width, height);
}

<canvas id="canvas"></canvas>

What is the best way to resize an image within a canvas?

Answer №1

Answer №2

Similar questions

How can I get rid of the table borders and set colors for every other row in the

Trouble with displaying list bullets in jQTouch framework

What language should be used for JSON data formats?

Instructions for downloading a .zip file sent through a HTTP response (using an axios PUT request)

Obtaining only a portion of the text when copying and editing it

The canvas element's drawImage() method fails to render the specified video thumbnail

Retrieve error message from 400 error in AngularJS and WebAPI

Error in Angular form validation: Attempting to access property 'name' of an undefined value

Listening for events to wait for all XMLHttpRequest requests within an iframe

Is there a way to instruct Google to include my site in its index using Angular.js?

Error in JQuery Document Ready AJAX function causing image to not load initially without a page refresh

Converting a JSON PHP array into Javascript

Struggling to make Datatables function properly with basic JSON data

Show the details of a location directly on Google Maps API marker

Ways to retrieve specific information using an ID from a JSON file with Angular.js

Troubles encountered when creating select/drop-down optgroup using jquery

Retrieving Results from Sequenced Promises

Disabling the onClick event on HTML tags with personalized WooCommerce messages

Tips for optimizing search functionality in Angular to prevent loading all data at once

In Node.js, I encountered an issue where req.body was returning as undefined, despite the fact that when I logged req, I could