Question

我可以上传背景图片。但我不知道如何伸展覆盖整个画布。示例代码

var fr = new FileReader;
fr.onload = function() {
    var image = new Image();
    image.onload = function() {
        var imgwidth = this.width;
        currentcanvas.setBackgroundImage(fr.result, currentcanvas.renderAll.bind(currentcanvas), {

          scaleX: currentcanvas.width / imgwidth,
            scaleY: currentcanvas.height / imgwidth
        });
        currentcanvas.renderAll();
    };

Answer 1

您可以根据画布的高度和宽度给出背景图像的高度和宽度，如下所示：

canvas.backgroundImage.width = canvas.getWidth();
canvas.backgroundImage.height = canvas.getHeight();

Answer 2

在fabricjs 2.x中，情况大不相同。这是将背景图像拉伸为fabricjs 2.x的画布大小的代码：

// Assume fcanvas is fabricjs canvas:
fabric.Image.fromURL('background.png', function(img){
   img.scaleToWidth(fcanvas.width);
   img.scaleToHeight(fcanvas.height);
   fcanvas.setBackgroundImage(img);
   fcanvas.requestRenderAll();
});

Answer 3

将高度和宽度道具设置为画布的高度和宽度。

canvas.setBackgroundImage(imgObj, canvas.renderAll.bind(canvas), {
   width: canvas.width,
   height: canvas.height,
   originX: 'left',
   originY: 'top'
});

Answer 4

这对我有用。希望对您有帮助！

canvas.setBackgroundImage(url, function() {
  let img = canvas.backgroundImage;
  img.originX = 'left';
  img.originY = 'top';
  img.scaleX = canvas.getWidth() / img.width;
  img.scaleY = canvas.getHeight() / img.height;
  canvas.renderAll();
});

需要背景图像拉伸以覆盖fabricjs中的整个画布

4 个答案: