晚上好，亲爱的同事们！我的任务是上传一个gif文件到织物。为此，我使用官方文档中提供的代码。上传文件的代码如下。
(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/fabric@4.6.0/dist/fabric.js"></script>我想上传gif文件，但现在我得到下面的错误显示
"message": "Uncaught TypeError: Cannot read properties of undefined (reading 'fromURL')"
我应该如何解决这个问题？
恐怕发生这种情况只是因为Sprite扩展不是fabric.js核心库的一部分。
你需要从下载http://fabricjs.com/js/sprite.class.js并将其包含在html文档的<head>部分中
<script src="sprite.class.js"></script>
在包含fabric.js本身之后。
(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/fabric@4.6.0/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>