canvas绘制图片等比缩放

核心步骤

• 获取原始图片尺寸
• 计算缩放比例
  • 根据目标区域尺寸和原始比例计算最小缩放比
• 计算新尺寸
  新宽度 = 原始宽度 × 缩放比例
新高度 = 原始高度 × 缩放比例
• 绘制图片
  使用 drawImage() 方法绘制缩放后的图片

代码实现

// 获取Canvas上下文
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");// 创建图片对象
const img = new Image();
img.src = "your-image.jpg";img.onload = function () {// 1. 获取原始尺寸const originalWidth = img.width;const originalHeight = img.height;// 2. 设置目标区域尺寸（示例：Canvas尺寸）const targetWidth = canvas.width;const targetHeight = canvas.height;// 3. 计算缩放比例（保持比例）const scale = Math.min(targetWidth / originalWidth, targetHeight / originalHeight);// 4. 计算新尺寸const newWidth = originalWidth * scale;const newHeight = originalHeight * scale;// 5. 居中绘制const x = (targetWidth - newWidth) / 2;const y = (targetHeight - newHeight) / 2;// 绘制缩放后的图片ctx.drawImage(img, x, y, newWidth, newHeight);
};

关键参数说明