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

Guide on implementing Regular Expressions in Directives for validation in Angular 8

"Woops! An error occurred with the message: "SassError: Could not locate the specified target selector" while working with SCSS Modules and incorporating

Tips for aligning a custom icon to the left in a Jquery mobile header

Directional Div CSS Transition

Identify when a user switches tabs within the browser and when they switch applications away from the

Error: Unable to access unknown properties (reading 'extend')

Trouble with mapping an array in my Next JS application

Is there a way to enable code completion for Firebase on VS Code?

Struggling to delete event listeners in TypeScript using object-oriented programming with JavaScript

Sending information to a jQuery UI Dialog

Energetic flair for Vue animations

Modifying Data with MomentJS when Saving to Different Variable

Modifying the chart width in Chart.js: A step-by-step guide

Angular2: the setTimeout function is executed just a single time

React.memo is failing to stop unnecessary re-renders of a stateless functional child component that does not receive any props

javascript utilizing key inputs

Strange HTML antics

Background and checked styles for radio buttons

Ajax: The response from xmlhttp.responseText is displaying the entire inner HTML rather than the specified text needed

Struggling to add a border to an HTML div element