Generating small image previews in JavaScript without distorting proportions

Question

Generating small image previews in JavaScript without distorting proportions

I am currently working on a client-side Drag and Drop file upload script as a bookmarklet. To prepare for the upload process, I am utilizing the File API to convert the images into base64 format and showcase them as thumbnails.

These are examples of how my current thumbnails appear. I am hoping to achieve a more square-like appearance without distorting their aspect ratio (please disregard the progress bar).

The desired outcome for the thumbnails is to have them centered and cropped based on the minimum height and width.

Is it possible to accomplish this using only JavaScript (adjusting styles through scripts)? Additionally, it's important to ensure that the solution is compatible with base64 images (after they have been converted via the file API as DATA URL).

You can view the exact set of images I have uploaded here.

Thank you in advance for any assistance provided.

javascript css html base64 bookmarklet

Answer 1

Answer №1

Happy to share my solution for this problem! To achieve a JavaScript-only approach, I utilized throwaway canvas elements for the necessary tasks.

Below is the code snippet showcasing my implementation:

function adjustImageSize(url, width, height, callback, file) {
  console.log("Inside_adjustImageSize");
  var originalImage = new Image();

  originalImage.onload = (function (f) {
      return function (evt) {
        console.log("Inside_originalImage_onload");
        console.log("originalImage.width:" + originalImage.width);
        console.log("originalImage.height:" + originalImage.height);
        var canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;

        if (originalImage.width == originalImage.height) {
          canvas.getContext("2d").drawImage(originalImage, 0, 0, width, height);
        } else {
          minVal = Math.min(originalImage.width, originalImage.height);
          if (originalImage.width > originalImage.height) {
            canvas.getContext("2d").drawImage(originalImage, (originalImage.width - minVal) / 2, 0, minVal, minVal, 0, 0, width, height);
          } else {
            canvas.getContext("2d").drawImage(originalImage, 0, (originalImage.height - minVal) / 2, minVal, minVal, 0, 0, width, height);
          }
        }
        callback(canvas.toDataURL(), f);
      }
    })(file);

  originalImage.src = url;
}

Since I was working directly with image files, I could utilize the Image object. However, some adjustments may be needed for others to implement this solution.

Answer 2

Happy to share my solution for this problem! To achieve a JavaScript-only approach, I utilized throwaway canvas elements for the necessary tasks.

Below is the code snippet showcasing my implementation:

function adjustImageSize(url, width, height, callback, file) {
  console.log("Inside_adjustImageSize");
  var originalImage = new Image();

  originalImage.onload = (function (f) {
      return function (evt) {
        console.log("Inside_originalImage_onload");
        console.log("originalImage.width:" + originalImage.width);
        console.log("originalImage.height:" + originalImage.height);
        var canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;

        if (originalImage.width == originalImage.height) {
          canvas.getContext("2d").drawImage(originalImage, 0, 0, width, height);
        } else {
          minVal = Math.min(originalImage.width, originalImage.height);
          if (originalImage.width > originalImage.height) {
            canvas.getContext("2d").drawImage(originalImage, (originalImage.width - minVal) / 2, 0, minVal, minVal, 0, 0, width, height);
          } else {
            canvas.getContext("2d").drawImage(originalImage, 0, (originalImage.height - minVal) / 2, minVal, minVal, 0, 0, width, height);
          }
        }
        callback(canvas.toDataURL(), f);
      }
    })(file);

  originalImage.src = url;
}

Since I was working directly with image files, I could utilize the Image object. However, some adjustments may be needed for others to implement this solution.

Answer 3

Answer №2

Instantiate a different html element (I prefer using a table, but I'm a bit old-fashioned) and position the image as a background image with CSS, something like this:

thetable { background: url('planets.jpg') 0px -150px no-repeat; width: 60 px; height: 60 px}

All credit goes to the original source: How to create CSS-sprites

Answer 4

Instantiate a different html element (I prefer using a table, but I'm a bit old-fashioned) and position the image as a background image with CSS, something like this:

thetable { background: url('planets.jpg') 0px -150px no-repeat; width: 60 px; height: 60 px}

All credit goes to the original source: How to create CSS-sprites

Answer 5

Answer №3

This feature enables support for both images and videos while maintaining the media aspect ratio by creating thumbnails.

Furthermore, this functionality includes a cleanup process to prevent event leaks from persisting, ensuring smooth thumbnail image generation.

/* Example: Resize an image to 300px width 
while preserving the aspect ratio */ 
resizeMedia('/images/logo.jpg', 300, function(data)
{
    console.log(data); // The new thumbnail data URI 
});  


/* This function creates a thumbnail of an image or video 
preserving the aspect ratio.
@param (string | object) media = image file path or video object 
@param (int) width = desired width for the media 
@param (function) callBack = callback function to handle 
the generated image data URI */ 
function resizeMedia(media, width, callBack) 
{
    var self = this; 

    /* Check whether the media type is string or object
    to determine if it's an image or video */ 
    var type = typeof media === 'string'? 'image' : 'video'; 

    /* Calculate the modified height based on the update size 
    while maintaining the aspect ratio. 
    @param (int) updateSize = new width value  
    @param (int) width = current width 
    @param (int) height = current height 
    @return (object) containing the updated width and height for modification
    of the media */ 
    var getModifySize = function(updateSize, width, height) 
    { 
        var getModifyAspect = function(max, min, value)
        {
            var ratio = max / min;
            return value * ratio;
        };   

        return { 
            width: updateSize,
            height: getModifyAspect(updateSize, width, height) 
        }; 
    }; 

    /* Create a canvas element and draw the media content onto it.
    @param (object) media = image or video object 
    @param (int) width = canvas width
    @param (int) height = canvas height 
    @return (object) representing the new canvas with media content */ 
    var createCanvas = function(media, width, height)
    { 
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d"); 

        canvas.width = width;
        canvas.height = height;

        ctx.mozImageSmoothingEnabled = true;
        ctx.webkitImageSmoothingEnabled = true;
        ctx.msImageSmoothingEnabled = true;
        ctx.imageSmoothingEnabled = true;

        /* Drawing the media content on load ensures its ready for use */
        ctx.drawImage(media, 0, 0, width, height);

        /* Convert the canvas to a data URI using JPEG for optimization.
        For transparency preservation, remove the MIME type to default to PNG */ 
        callBack(canvas.toDataURL('image/jpeg'));

        return canvas; 
    }; 

    if(type === 'image') 
    { 
        var img = new window.Image();
        img.crossOrigin = "anonymous";
        img.addEventListener('load', function loadImage() 
        {
            var modify = getModifySize(width, img.width, img.height);

            createCanvas(img, modify.width, modify.height); 
            img.removeEventListener('load', loadImage);
        });

        img.src = media;
    } 
    else if(type === 'video') 
    { 
        var modify = getModifySize(width, media.videoWidth, media.videoHeight);
        createCanvas(media, modify.width, modify.height);
    }
};

Answer 6

This feature enables support for both images and videos while maintaining the media aspect ratio by creating thumbnails.

Furthermore, this functionality includes a cleanup process to prevent event leaks from persisting, ensuring smooth thumbnail image generation.

/* Example: Resize an image to 300px width 
while preserving the aspect ratio */ 
resizeMedia('/images/logo.jpg', 300, function(data)
{
    console.log(data); // The new thumbnail data URI 
});  


/* This function creates a thumbnail of an image or video 
preserving the aspect ratio.
@param (string | object) media = image file path or video object 
@param (int) width = desired width for the media 
@param (function) callBack = callback function to handle 
the generated image data URI */ 
function resizeMedia(media, width, callBack) 
{
    var self = this; 

    /* Check whether the media type is string or object
    to determine if it's an image or video */ 
    var type = typeof media === 'string'? 'image' : 'video'; 

    /* Calculate the modified height based on the update size 
    while maintaining the aspect ratio. 
    @param (int) updateSize = new width value  
    @param (int) width = current width 
    @param (int) height = current height 
    @return (object) containing the updated width and height for modification
    of the media */ 
    var getModifySize = function(updateSize, width, height) 
    { 
        var getModifyAspect = function(max, min, value)
        {
            var ratio = max / min;
            return value * ratio;
        };   

        return { 
            width: updateSize,
            height: getModifyAspect(updateSize, width, height) 
        }; 
    }; 

    /* Create a canvas element and draw the media content onto it.
    @param (object) media = image or video object 
    @param (int) width = canvas width
    @param (int) height = canvas height 
    @return (object) representing the new canvas with media content */ 
    var createCanvas = function(media, width, height)
    { 
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d"); 

        canvas.width = width;
        canvas.height = height;

        ctx.mozImageSmoothingEnabled = true;
        ctx.webkitImageSmoothingEnabled = true;
        ctx.msImageSmoothingEnabled = true;
        ctx.imageSmoothingEnabled = true;

        /* Drawing the media content on load ensures its ready for use */
        ctx.drawImage(media, 0, 0, width, height);

        /* Convert the canvas to a data URI using JPEG for optimization.
        For transparency preservation, remove the MIME type to default to PNG */ 
        callBack(canvas.toDataURL('image/jpeg'));

        return canvas; 
    }; 

    if(type === 'image') 
    { 
        var img = new window.Image();
        img.crossOrigin = "anonymous";
        img.addEventListener('load', function loadImage() 
        {
            var modify = getModifySize(width, img.width, img.height);

            createCanvas(img, modify.width, modify.height); 
            img.removeEventListener('load', loadImage);
        });

        img.src = media;
    } 
    else if(type === 'video') 
    { 
        var modify = getModifySize(width, media.videoWidth, media.videoHeight);
        createCanvas(media, modify.width, modify.height);
    }
};

Answer 7

Answer №4

To add a centered square image directly onto the canvas using drawImage(), you simply need to include the following parameters:

canvas.getContext("2d").drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

sx: Optional. Starting x coordinate for clipping.

sy: Optional. Starting y coordinate for clipping.

swidth: Optional. Width of the clipped image.

sheight: Optional. Height of the clipped image.

x: The x coordinate to place the image on the canvas.

y: The y coordinate to place the image on the canvas.

width: Optional. The width of the image to use (stretch or reduce).

height: Optional. The height of the image to use (stretch or reduce).

Best regards,

Pierrick

Answer 8

To add a centered square image directly onto the canvas using drawImage(), you simply need to include the following parameters:

canvas.getContext("2d").drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

sx: Optional. Starting x coordinate for clipping.

sy: Optional. Starting y coordinate for clipping.

swidth: Optional. Width of the clipped image.

sheight: Optional. Height of the clipped image.

x: The x coordinate to place the image on the canvas.

y: The y coordinate to place the image on the canvas.

width: Optional. The width of the image to use (stretch or reduce).

height: Optional. The height of the image to use (stretch or reduce).

Best regards,

Pierrick

Generating small image previews in JavaScript without distorting proportions

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Clearing all data in a form upon opening

Nodejs and express authentication feature enables users to securely access their accounts by verifying their identity before they

Position the flex item adjacent to the initial flex item using wrap mode only if there is extra space

Connecting Next.js to a Database: A Step-by-Step Guide

What could be causing the absence of a background image in CSS?

AngularJS Error: Attempting to Access Undefined Object - Jasmine Testing

Calculate the sum of floating point or decimal numbers from a textarea using JavaScript

React component using Highcharts is displaying categories as numeric values instead of text

``The presence of symlink leading to the existence of two different versions of React

Comparing Yii's CHtml::link() function with the use of regular <a href=''></a> HTML tags

Transferring binary fragments to Node.js for assembly into a complete file. Creating a file

I'm facing an issue with the footer and header that is preventing me from properly positioning any content on the website

Configuring Jest unit testing with Quasar-Framework version 0.15

Unable to fetch data from MongoDB in Node.js when using objectid

Utilizing the synchronous approach to access the Facebook Messenger API

The focal point of a Three JS rotation

Issues with button padding in Firefox and Opera

Accelerate loading times of HTML files on Android apps

What is the method for obtaining the viewModel in a Knockout component?

Running into an issue while attempting to generate functions in nodejs