Fabric.js 背景图案仅在调整画布缩放值后才显示的问题如何解决

问题原因 #

你遇到的现象本质是外部图片资源异步加载导致的时序问题：直接传入url创建fabric.Pattern时，图片还未完成下载初始化，Pattern的实际宽高参数为空，首次调用renderAll时无法正确渲染背景。缩放操作会触发画布的强制重绘，此时图片已经加载完成，所以背景会正常显示。

操作问题 #

你没有等待图片资源加载完成就直接创建Pattern并设置背景，属于时序逻辑疏漏。

修复方案 #

先预加载图片，等资源加载完成后再执行背景设置操作，有两种常用实现方式：

1. 原生Image预加载

const bgImg = new Image();
// 跨域公共图片需要添加跨域配置，避免后续画布导出时报污染错误
bgImg.crossOrigin = 'anonymous';
bgImg.src = 'https://cdn.pixabay.com/photo/2016/02/20/02/21/colorful-1211510_960_720.png';
bgImg.onload = () => {
  this.canvas.setBackgroundColor(new fabric.Pattern({
    source: bgImg,
    repeat: 'repeat'
  }), () => {
    this.canvas.renderAll();
  });
};

2. 用fabric内置工具方法加载，代码更简洁

fabric.util.loadImage(
  'https://cdn.pixabay.com/photo/2016/02/20/02/21/colorful-1211510_960_720.png',
  (img) => {
    this.canvas.setBackgroundColor(new fabric.Pattern({
      source: img,
      repeat: 'repeat'
    }), () => this.canvas.renderAll());
  },
  { crossOrigin: 'anonymous' }
);

如果使用的是本地无跨域限制的图片，可以去掉crossOrigin相关配置。

内容的提问来源于stack exchange，提问作者Fede Dávila