Question

未捕获的类型错误：将 gif 上传到画布时无法读取未定义的属性（读取“fromURL”）

2022-07-19

784

javascript canvas html5-canvas fabricjs gif

各位同事晚上好！我的任务是将一个 gif 文件上传到 fabric。为此，我使用了官方文档中提供的代码。上传文件的代码如下。

(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);
  })();
})();

<canvas id="myCanvas" width="100" height="100">
</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/[email protected]/dist/fabric.js"></script>

我想上传 gif 文件，但现在出现以下错误

"message": "Uncaught TypeError: Cannot read properties of undefined (reading 'fromURL')"

我应该如何解决这个问题？

Answer 1

我担心发生这种情况的原因仅仅是因为 Sprite 扩展不是 fabric.js 核心库的一部分。

您需要从 http://fabricjs.com/js/sprite.class.js 下载它，并将其包含在 html 文档的 <head> 部分中

<script src="sprite.class.js"></script>

紧接着包含 fabric.js 本身之后。

Answer 2

(function() {
  var canvas = this.__canvas = new fabric.Canvas('myCanvas');
  fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
  fabric.Object.prototype.transparentCorners = false;
  //console.log(fabric.Sprite,fabric)
 // for (var i = 0, len = 5; i < len; i++) {
  //  for (var j = 0, jlen = 5; j < jlen; j++) {
      fabric.Sprite.fromURL('https://hot_data_kuzovkin_info_private.hb.bizmrg.com/sprite.png', createSmth()); //createSprite(i, j)
//    }
//  }

  function createSprite(i, j) {
    return function(sprite) {
      sprite.set({
        left: i * 100 + 50,
        top: j * 100 + 50,
        angle: 0
      });
      canvas.add(sprite);
      setTimeout(function() {
        sprite.set('dirty', true);
        sprite.play();
      }, fabric.util.getRandomInt(1, 10) * 100);
    };
  }
    function createSmth() {
    return function(sprite) {
      sprite.set({
        left:  50,
        top:   50,
        angle: 0
      });
      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);
  })();
})();

<canvas id="myCanvas" width="300" height="300">
</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/[email protected]/dist/fabric.js"></script>
<script>
fabric.Sprite = fabric.util.createClass(fabric.Image, {

  type: 'sprite',

  spriteWidth: 50,
  spriteHeight: 72,
  spriteIndex: 0,
  frameTime: 100,

  initialize: function(element, options) {
    options || (options = { });

    options.width = this.spriteWidth;
    options.height = this.spriteHeight;

    this.callSuper('initialize', element, options);

    this.createTmpCanvas();
    this.createSpriteImages();
  },

  createTmpCanvas: function() {
    this.tmpCanvasEl = fabric.util.createCanvasElement();
    this.tmpCanvasEl.width = this.spriteWidth || this.width;
    this.tmpCanvasEl.height = this.spriteHeight || this.height;
  },

  createSpriteImages: function() {
    this.spriteImages = [ ];

    var steps = this._element.width / this.spriteWidth;
    for (var i = 0; i < steps; i++) {
      this.createSpriteImage(i);
    }
  },

  createSpriteImage: function(i) {
    var tmpCtx = this.tmpCanvasEl.getContext('2d');
    tmpCtx.clearRect(0, 0, this.tmpCanvasEl.width, this.tmpCanvasEl.height);
    tmpCtx.drawImage(this._element, -i * this.spriteWidth, 0);

    var dataURL = this.tmpCanvasEl.toDataURL('image/png');
    var tmpImg = fabric.util.createImage();

    tmpImg.src = dataURL;

    this.spriteImages.push(tmpImg);
  },

  _render: function(ctx) {
    ctx.drawImage(
      this.spriteImages[this.spriteIndex],
      -this.width / 2,
      -this.height / 2
    );
  },

  play: function() {
    var _this = this;
    this.animInterval = setInterval(function() {

      _this.onPlay && _this.onPlay();
      _this.dirty = true;
      _this.spriteIndex++;
      if (_this.spriteIndex === _this.spriteImages.length) {
        _this.spriteIndex = 0;
      }
    }, this.frameTime);
  },

  stop: function() {
    clearInterval(this.animInterval);
  }
});

fabric.Sprite.fromURL = function(url, callback, imgOptions) {
  fabric.util.loadImage(url, function(img) {
    callback(new fabric.Sprite(img, imgOptions));
  },null,{'crossOrigin':'Anonymous'});
};

fabric.Sprite.async = true;

</script>