如何在JavaScript中按比例缩小Base64图片生成图标？

Absolutely—hardcoding dimensions will always lead to inconsistent icon sizes when dealing with images of varying aspect ratios. Instead, we can calculate the scaled dimensions dynamically based on the original image's aspect ratio, either by adapting the canvas size to fit the scaled image or by centering the image within a fixed-size canvas (with optional blank space around it).

Solution 1: Adapt Canvas Size to Scaled Image #

This approach resizes the canvas to match the scaled image dimensions, ensuring no blank space while preserving the perfect aspect ratio:

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
const maxIconSize = 50; // Set your desired maximum icon dimension (width or height)

// Calculate original image's aspect ratio
const aspectRatio = this.width / this.height;
let scaledWidth, scaledHeight;

if (this.width > this.height) {
  // Landscape image: cap width at max size, scale height proportionally
  scaledWidth = maxIconSize;
  scaledHeight = maxIconSize / aspectRatio;
} else if (this.height > this.width) {
  // Portrait image: cap height at max size, scale width proportionally
  scaledHeight = maxIconSize;
  scaledWidth = maxIconSize * aspectRatio;
} else {
  // Square image: use max size for both dimensions
  scaledWidth = scaledHeight = maxIconSize;
}

// Set canvas to the calculated scaled dimensions
canvas.width = scaledWidth;
canvas.height = scaledHeight;

// Draw the original image scaled to fit the canvas
ctx.drawImage(image, 0, 0, this.width, this.height, 0, 0, scaledWidth, scaledHeight);

var scaledImage = new Image();
scaledImage.src = canvas.toDataURL();

Solution 2: Fixed Canvas Size with Centered Image #

If you want all icons to have a consistent fixed footprint (with blank space around non-square images), we can center the scaled image within a fixed-size canvas:

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
const fixedIconSize = 50; // Fixed width/height for all icons (e.g., 50x50)
canvas.width = fixedIconSize;
canvas.height = fixedIconSize;

// Calculate original image's aspect ratio
const aspectRatio = this.width / this.height;
let scaledWidth, scaledHeight;

if (this.width > this.height) {
  scaledWidth = fixedIconSize;
  scaledHeight = fixedIconSize / aspectRatio;
} else if (this.height > this.width) {
  scaledHeight = fixedIconSize;
  scaledWidth = fixedIconSize * aspectRatio;
} else {
  scaledWidth = scaledHeight = fixedIconSize;
}

// Calculate offsets to center the image on the fixed canvas
const xOffset = (fixedIconSize - scaledWidth) / 2;
const yOffset = (fixedIconSize - scaledHeight) / 2;

// Draw the centered, scaled image
ctx.drawImage(image, 0, 0, this.width, this.height, xOffset, yOffset, scaledWidth, scaledHeight);

var scaledImage = new Image();
scaledImage.src = canvas.toDataURL();

Key Notes #

• Adjust maxIconSize or fixedIconSize to match your desired icon size (e.g., 40, 50, 60 pixels).
• Both methods prevent stretching/squashing by strictly preserving the original image's aspect ratio.
• Always ensure your image is fully loaded before running the scaling code. If using a Base64 string, wrap the code in the image's onload handler:

  const image = new Image();
  image.src = 'data:image/png;base64,...'; // Your Base64 string
  image.onload = function() {
    // Run scaling code here
  };
  

内容的提问来源于stack exchange，提问作者Jaydeep