如何通过JavaScript在浏览器控制台实现Canvas内上传图片居中适配尺寸

完全可以通过控制台执行JS实现该需求，以下是可直接运行的落地方案：

功能说明 #

代码会自动唤起本地文件选择窗口，你选中图片后会自动完成以下操作：

• 自动等比缩放图片，不会出现拉伸变形
• 自动计算居中偏移量，将图片绘制到目标Canvas的中心区域
• 适配任意目标Canvas的尺寸，无需手动调整参数

控制台运行代码 #

// 可修改此处配置目标Canvas：canvas1（主画布）/canvas3/canvas4
const TARGET_CANVAS_ID = 'canvas1';

const targetCanvas = document.getElementById(TARGET_CANVAS_ID);
if (!targetCanvas) {
  alert('未找到目标Canvas，请检查ID配置是否正确');
  throw new Error('目标Canvas不存在');
}

const ctx = targetCanvas.getContext('2d');
const canvasW = targetCanvas.width;
const canvasH = targetCanvas.height;

// 创建图片选择器
const fileSelector = document.createElement('input');
fileSelector.type = 'file';
fileSelector.accept = 'image/*';
fileSelector.onchange = (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  // 加载选中的图片
  const imgReader = new FileReader();
  imgReader.onload = (readerEvent) => {
    const img = new Image();
    img.onload = () => {
      // 等比缩放计算
      const scaleRatio = Math.min(canvasW / img.width, canvasH / img.height);
      const finalW = img.width * scaleRatio;
      const finalH = img.height * scaleRatio;
      // 计算居中坐标
      const offsetX = (canvasW - finalW) / 2;
      const offsetY = (canvasH - finalH) / 2;

      // 清空画布并绘制图片
      ctx.clearRect(0, 0, canvasW, canvasH);
      ctx.drawImage(img, offsetX, offsetY, finalW, finalH);
    };
    img.src = readerEvent.target.result;
  };
  imgReader.readAsDataURL(selectedFile);
};

fileSelector.click();

使用步骤 #

• 打开浏览器开发者工具：Windows/Linux按F12或Ctrl+Shift+I，Mac按Cmd+Opt+I，切换到「控制台」标签页
• 把上述代码完整粘贴到控制台输入区域，按下回车键执行
• 在弹出的系统文件选择窗口中，选中你需要导入的图片即可自动完成适配绘制

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