在适当调整大小的画布上绘制，同时保持图像大小

基础概念

在图形处理或前端开发中，"在适当调整大小的画布上绘制，同时保持图像大小"通常涉及以下两个核心概念：

画布（Canvas）：HTML5提供的绘图表面，可通过JavaScript动态渲染图形/图像。
图像保持原始尺寸：绘制时不缩放图像本身，而是通过调整画布尺寸或绘制位置来适应布局需求。

关键问题与解决方案

1. 画布尺寸调整与图像绘制的矛盾

问题现象：画布被缩放时，绘制的图像被拉伸或压缩。
原因：默认情况下，画布的drawImage()方法会按照目标画布的尺寸缩放图像。
解决方案：明确指定绘制时的源图像尺寸和目标绘制区域尺寸。

2. 保持图像原始尺寸的方法

通过以下步骤实现：

获取图像的原始宽度和高度（img.naturalWidth, img.naturalHeight）。
设置画布尺寸时，确保其能容纳原始图像（或按需留白）。
绘制时使用drawImage的三参数形式（不缩放）或九参数形式（精确控制缩放）。

代码示例（HTML/JavaScript）

<canvas id="myCanvas"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();

  img.onload = function() {
    // 画布尺寸调整为图像原始大小（或自定义尺寸）
    canvas.width = img.naturalWidth;  // 保持画布与图像同尺寸
    canvas.height = img.naturalHeight;

    // 绘制图像（不缩放）
    ctx.drawImage(img, 0, 0);  // 三参数形式：image, dx, dy

    /* 如果需要在更大画布中居中绘制原始尺寸图像：
    canvas.width = 800;  // 自定义画布宽度
    canvas.height = 600; // 自定义画布高度
    const x = (canvas.width - img.naturalWidth) / 2;  // 居中计算
    const y = (canvas.height - img.naturalHeight) / 2;
    ctx.drawImage(img, x, y, img.naturalWidth, img.naturalHeight);
    */
  };

  img.src = 'example.jpg';  // 替换为实际图像路径
</script>