我来帮你搞定这个图片适配Canvas的问题，下面分基础实现和不同适配方案的优劣来讲解：

1. 基础实现：直接拉伸填充（最简单但可能变形） #

如果不在意图片比例，只想快速让图片填满整个Canvas，直接使用drawImage的全参数形式，指定绘制的宽高为Canvas的固定尺寸即可：

function init2() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const img = document.getElementById('myImage');
  
  // 直接将图片拉伸至Canvas的宽高
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}

这种方式代码最简单，但缺点是会让图片强制变形，适合对比例要求不高的场景（比如抽象背景、装饰图）。

2. 等比例适配方案（更常用，分两种场景） #

如果需要保持图片比例，有两种主流适配方式，根据你的需求选择：

方案A：完整显示图片（包含模式） #

这种方式会让图片按比例缩放，完整显示在Canvas内，空白区域留空，适合需要展示图片全部内容的场景（比如产品图、证件照）：

function init2() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const img = document.getElementById('myImage');
  
  const canvasW = canvas.width;
  const canvasH = canvas.height;
  const imgW = img.width;
  const imgH = img.height;
  
  // 计算缩放比例：取宽/高比例的较小值，保证图片能完整放入Canvas
  const scale = Math.min(canvasW / imgW, canvasH / imgH);
  const scaledW = imgW * scale;
  const scaledH = imgH * scale;
  
  // 计算居中绘制的位置
  const x = (canvasW - scaledW) / 2;
  const y = (canvasH - scaledH) / 2;
  
  // 绘制适配后的图片
  ctx.drawImage(img, x, y, scaledW, scaledH);
}

方案B：填满Canvas（覆盖模式） #

这种方式会让图片按比例缩放，填满整个Canvas，超出部分被裁剪，适合需要视觉饱满的背景图、海报等场景：

function init2() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const img = document.getElementById('myImage');
  
  const canvasW = canvas.width;
  const canvasH = canvas.height;
  const imgW = img.width;
  const imgH = img.height;
  
  // 计算缩放比例：取宽/高比例的较大值，保证图片能填满Canvas
  const scale = Math.max(canvasW / imgW, canvasH / imgH);
  const scaledW = imgW * scale;
  const scaledH = imgH * scale;
  
  // 计算居中裁剪后的绘制位置
  const x = (canvasW - scaledW) / 2;
  const y = (canvasH - scaledH) / 2;
  
  // 绘制适配后的图片
  ctx.drawImage(img, x, y, scaledW, scaledH);
}

3. 更换图片后重新适配的处理 #

更换图片后，需要重新触发绘制逻辑，建议把绘制逻辑封装成独立函数，然后在图片加载完成后调用：

// 封装通用的绘制函数
function drawImageToCanvas(img) {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const canvasW = canvas.width;
  const canvasH = canvas.height;
  
  // 这里可以替换成你需要的适配逻辑，比如下面用覆盖模式
  const scale = Math.max(canvasW / img.width, canvasH / img.height);
  const scaledW = img.width * scale;
  const scaledH = img.height * scale;
  const x = (canvasW - scaledW) / 2;
  const y = (canvasH - scaledH) / 2;
  
  ctx.clearRect(0, 0, canvasW, canvasH); // 先清空Canvas
  ctx.drawImage(img, x, y, scaledW, scaledH);
}

// 初始化函数
function init2() {
  const img = document.getElementById('myImage');
  
  // 图片加载完成后执行绘制
  img.onload = function() {
    drawImageToCanvas(this);
  };
  
  // 更换图片的示例：
  // img.src = '你的新图片地址';
  // 更换src后，浏览器会自动触发onload事件，重新绘制
}

最优方案选择 #

• 若不要求比例：选直接拉伸填充，成本最低。
• 若需要完整展示图片内容：选包含模式，保证信息不缺失。
• 若需要视觉饱满填满Canvas：选覆盖模式，兼顾比例和视觉效果。

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