Fabric JS，如何使图像SRC文件拉伸或重复到图像对象？

Question

如果我有一个图像说500x500作为文件，让我们称之为sample.jpg，然后我将一个图像对象添加到画布上，例如1000x1000，载荷在sample.jpg图像中没有拉伸或重复以适应1000x1000，但它位于左上角500x500的图像对象。

有没有办法强制源图像伸展到画布上的图像对象，以便填充整个区域？不要真的关心图像比例的失真，只是希望它适合整个更大的区域。拉伸它，或者有没有办法只重复图像，直到它适合整个容器？ - 我可能在这里的文件中遗漏了一些东西。

我的意思是，深蓝色是1000x1000容器（织物js图像对象），红色是500x500 JPG，我想拉伸或重复整个蓝色区域：

var image = fabric.Image.fromURL('<?php echo $object->url; ?>', function(oImg) {
                    oImg.set({
                        top:parseInt('<?php echo $object->top; ?>'),
                        left:parseInt('<?php echo $object->left; ?>'),
                        width:parseInt('<?php echo $object->width; ?>'),
                        height:parseInt('<?php echo $object->height; ?>'),
                    });
                      designerCanvas.add(oImg);
                      designerCanvas.renderAll();
                });

Answer 1

拉伸非常简单（docs）

中有一些例子

canvas.setBackgroundImage('http://your_image_url', 
canvas.renderAll.bind(canvas), {
    width: canvas.width,
    height: canvas.height,
    // Needed to position backgroundImage at 0/0
    originX: 'left',
    originY: 'top'
});

或者，如果您不希望它作为背景图像

fabric.Image.fromURL('http://your_image_url', function(oImg) {
  oImg.set({ scaleX: canvas.width/oImg.width, scaleY: canvas.height/oImg.height, 
left: 0, top: 0 });
  canvas.add(oImg);
});