为何FabricJS在不同设备/浏览器中图案缩放效果不一致？

我之前也碰到过类似的FabricJS图案缩放跨环境不一致的坑，大概率是不同浏览器对Canvas的设备像素比（DPR）、图案变换的默认处理逻辑有差异，给你几个亲测有效的解决方案：

1. 统一校准设备像素比（DPR） #

FabricJS虽然有自动适配Retina屏的机制，但手动校准能彻底避免DPR带来的缩放偏差：

function testPattern(id) {
  const url = 'https://dummyimage.com/200x200/aff/000';
  // 初始化Canvas时开启Retina适配
  const tCanvas = new fabric.Canvas(id, {
    enableRetinaScaling: true
  });
  
  // 获取当前设备的DPR值
  const dpr = window.devicePixelRatio || 1;

  new fabric.Image.fromURL(url, function(img) {
    // 反向缩放图片，抵消DPR带来的自动放大
    img.scale(1/dpr);
    
    const pattern = new fabric.Pattern({
      source: img.getElement(),
      repeat: 'repeat'
    });
    
    const tPoints = [{ x: 0, y: 0 }, { x: 0, y: 200 }, { x: 200, y: 200 }, { x: 200, y: 0 }];
    const polygon = new fabric.Polygon(tPoints, {
      fill: pattern
    });
    
    tCanvas.add(polygon);
  });
}

核心思路：让Canvas和图案都基于设备DPR做统一适配，避免高DPI屏幕上图案被过度拉伸。

2. 手动指定图案变换矩阵 #

有些浏览器会对图案的默认缩放做隐性调整，用patternTransform强制锁定缩放比例就能解决：

new fabric.Image.fromURL(url, function(img) {
  // 按需求设置固定缩放因子，比如要1:1显示图案就设为1
  const scaleFactor = 1;
  const pattern = new fabric.Pattern({
    source: img.getElement(),
    repeat: 'repeat',
    // 用矩阵精确控制缩放
    patternTransform: fabric.util.matrix.scale(scaleFactor, scaleFactor)
  });
  
  const tPoints = [{ x: 0, y: 0 }, { x: 0, y: 200 }, { x: 200, y: 200 }, { x: 200, y: 0 }];
  const polygon = new fabric.Polygon(tPoints, { fill: pattern });
  tCanvas.add(polygon);
});

这个方法能直接绕过浏览器的默认处理逻辑，强制图案按你设定的比例渲染。

3. 预渲染图案到临时Canvas #

如果前两种方法还是有偏差，可以把图案先绘制到一个尺寸固定的临时Canvas，再用这个Canvas作为Pattern的源：

new fabric.Image.fromURL(url, function(img) {
  // 创建和图案尺寸一致的临时Canvas
  const tempCanvas = document.createElement('canvas');
  tempCanvas.width = img.width;
  tempCanvas.height = img.height;
  const ctx = tempCanvas.getContext('2d');
  ctx.drawImage(img.getElement(), 0, 0);
  
  const pattern = new fabric.Pattern({
    source: tempCanvas,
    repeat: 'repeat'
  });
  
  const tPoints = [{ x: 0, y: 0 }, { x: 0, y: 200 }, { x: 200, y: 200 }, { x: 200, y: 0 }];
  const polygon = new fabric.Polygon(tPoints, { fill: pattern });
  tCanvas.add(polygon);
});

临时Canvas的尺寸是完全固定的，不管浏览器怎么处理，图案的源尺寸都不会变，缩放自然就一致了。

另外还要提个小细节：检查你的Canvas元素的CSS样式宽高和HTML属性宽高是否一致，如果两者不匹配，也会导致图案拉伸变形，这也是跨浏览器差异的常见诱因哦。

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