Fabric.js上传GIF至Canvas报错：Cannot read properties of undefined (reading 'fromURL')

错误原因 #

你使用的Fabric.js 4.6.0标准构建版本默认不包含Sprite模块，导致fabric.Sprite为undefined，调用其fromURL方法时触发类型错误。

解决方案 #

1. 引入Sprite扩展模块 #

在现有fabric.js脚本之后，添加Sprite扩展的引入，确保fabric.Sprite类能被正确加载：

<script src="https://unpkg.com/fabric@4.6.0/dist/fabric.js"></script>
<!-- 引入Sprite扩展文件 -->
<script src="https://unpkg.com/fabric@4.6.0/dist/fabric.sprite.js"></script>

2. 调整画布尺寸适配内容 #

当前画布设置为width="100" height="100"，但代码中生成的精灵位置会超出这个范围，建议修改画布尺寸以完整显示所有元素：

<canvas id="myCanvas" width="500" height="500"></canvas>

修正后的完整代码 #

<canvas id="myCanvas" width="500" height="500"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/fabric@4.6.0/dist/fabric.js"></script>
<script src="https://unpkg.com/fabric@4.6.0/dist/fabric.sprite.js"></script>

<script>
(function() {
  var canvas = this.__canvas = new fabric.Canvas('myCanvas');
  fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
  fabric.Object.prototype.transparentCorners = false;

  for (var i = 0, len = 5; i < len; i++) {
    for (var j = 0, jlen = 5; j < jlen; j++) {
      fabric.Sprite.fromURL('https://i.ibb.co/3TkHBVg/sprite.png', createSprite(i, j));
    }
  }

  function createSprite(i, j) {
    return function(sprite) {
      sprite.set({
        left: i * 100 + 50,
        top: j * 100 + 50,
        angle: fabric.util.getRandomInt(-30, 30)
      });
      canvas.add(sprite);
      setTimeout(function() {
        sprite.set('dirty', true);
        sprite.play();
      }, fabric.util.getRandomInt(1, 10) * 100);
    };
  }

  (function render() {
    canvas.renderAll();
    fabric.util.requestAnimFrame(render);
  })();
})();
</script>

额外说明 #

如果你的需求是加载GIF动画文件而非序列帧PNG，fabric.Sprite并不适用，需要结合第三方GIF解析库，将GIF拆分为帧后再通过自定义逻辑或Sprite实现动画播放。

内容的提问来源于stack exchange，提问作者Владимир Кузовкин