Fabric JS：如何让图片源文件拉伸适配画布上的大尺寸图片对象？

当然可以实现你要的效果！核心就是在绘制或设置图片对象时，明确指定目标区域的宽高，让渲染引擎忽略原图片比例，强制拉伸填满整个区域。下面分两种常见场景给出具体实现：

场景1：使用HTML5 Canvas API #

如果你是直接用原生Canvas来处理，drawImage方法提供了多参数版本，可以直接指定绘制的目标尺寸。默认只传图片和位置的话，会用原图尺寸绘制，加上宽高参数就能强制拉伸：

// 获取Canvas元素和上下文
const canvas = document.getElementById('targetCanvas');
const ctx = canvas.getContext('2d');

// 加载图片
const sampleImg = new Image();
sampleImg.src = 'sample.jpg';

sampleImg.onload = function() {
  // 关键：指定目标宽高为1000×1000，位置从左上角(0,0)开始
  ctx.drawImage(sampleImg, 0, 0, 1000, 1000);
};

这段代码会把500×500的原图直接拉伸到1000×1000的Canvas区域，完全填满，不管比例是否失真。

场景2：使用Fabric.js等Canvas框架 #

如果是用Fabric.js这类封装好的Canvas库，直接设置图片对象的width和height属性即可，不需要考虑缩放比例：

// 假设你已经初始化了Fabric Canvas实例
const canvas = new fabric.Canvas('targetCanvas');

fabric.Image.fromURL('sample.jpg', function(img) {
  // 强制设置图片对象的宽高为1000×1000，位置在左上角
  img.set({
    width: 1000,
    height: 1000,
    left: 0,
    top: 0
  });
  canvas.add(img);
  canvas.renderAll();
});

核心思路 #

不管用哪种方式，本质都是告诉渲染引擎：我不要用图片的原始尺寸，而是把它拉伸到我指定的目标尺寸里。只要明确指定了目标区域的宽高，就能实现你要的填满效果，完全不用在意原比例。

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