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

【问题标题】：Fabric JS, How To Make The Image SRC File Stretch Or Repeat To The Image Object?Fabric JS，如何使图像SRC文件拉伸或重复到图像对象？
【发布时间】：2018-03-15 17:56:10
【问题描述】：

如果我有一个 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();
                });

【问题讨论】：

添加蓝色图像后，应调整源图像（红色图像）的大小以适合蓝色图像的大小。这真的是你想要达到的吗？请分享您如何将图像添加到画布的代码。
添加了我从 url 加载图像的代码。你可以看到我设置了我需要的对象的宽度和高度，但是因为图像本身小于对象边界的大小，但图像没有填充它。所以这里的蓝色是对象容器，红色是我需要拉伸以适应蓝色的 JPG。到目前为止，我唯一的解决方案是使 JPG 大于对象容器，以便完全适合。

标签： javascript fabricjs

【解决方案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);
});

【讨论】：

不，不想要背景图片，它是从 url 加载的图片对象。
只需设置 scaleX/Y 因子并确保图像位于左上角，我已经添加了上面的代码