在Fabric.js中如何忽略宽高比缩放图片实现拉伸铺满效果？

问题原因 #

你当前代码出现裁剪的核心原因是：fabric.Image.fromURL的第三个参数是图片加载阶段的配置项，你传入的width、height不会直接作用于加载完成的图片对象，图片默认会保留原始宽高比，超出目标区域的部分就会被裁剪。

解决方案 #

修改代码如下，在图片加载完成的回调中手动计算缩放比例，强制忽略宽高比拉伸到目标尺寸：

const getPanelling = (hex) => {
  const imageSrc = self.$nuxt.$store.getters['component_data/data']('wallImgURL')

  var filter = new fabric.Image.filters.BlendColor({
    mode: 'overlay',
    alpha: 0.7,
    color: hex
  })
  // 提前计算目标尺寸参数
  const targetTop = ceilingHeight()
  const targetHeight = floorLevel() - ceilingHeight()
  const targetWidth = canvas.width

  fabric.Image.fromURL(imageSrc, (image) => {
    image.filters.push(filter)
    image.applyFilters()
    // 手动设置缩放比例，强制拉伸适配目标尺寸，忽略原始宽高比
    image.scaleX = targetWidth / image.width
    image.scaleY = targetHeight / image.height
    // 配置图片属性
    image.top = targetTop
    image.originY = 'top'
    image.hoverCursor = 'default'
    image.selectable = false
    image.type = 'wall'

    canvas.add(image)
    canvas.sendToBack(image)
    canvas.renderAll() // 主动刷新画布，确保修改立即生效
  }, {
    // 仅保留加载阶段需要的跨域配置
    crossOrigin: 'anonymous'
  })
}

关键修改说明 #

• 提前计算目标宽高、top值，避免重复执行函数
• 移除加载配置中无效的尺寸、交互类参数，仅保留跨域配置
• 通过scaleX和scaleY计算拉伸比例，实现无宽高比限制的适配，保证图片完全覆盖整面墙不会出现裁剪
• 新增主动刷新画布的逻辑，避免渲染延迟问题

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