为 Fabric Canvas 动态设置背景图片

Question

我想在图像上添加绘制形状，所以决定使用 Fabric JS。我能够让所有形状和物体正常工作。现在我如何将背景设置为图像。图片是动态的，我想在那个图片上画画，基本上存储对象的注释供后端处理。

现有解决方案使用Canvas

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = 903;
canvas.height = 657;


var background = new Image();
background.src = "http://www.samskirrow.com/background.png";

// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
    ctx.drawImage(background,0,0);   
}

参考 - 我喜欢这个解决方案。 Live Demo

我当前的 Fabric JS 代码

// Initialize a simple canvas
var canvas = new fabric.Canvas("c", {
    hoverCursor: 'pointer',
    selection: true,
    selectionBorderColor: 'green',
    backgroundColor: null
});

// Define the URL where your background image is located
var imageUrl = "../dog.jpg";

// Define
canvas.setBackgroundImage(imageUrl, canvas.renderAll.bind(canvas), {
    // Optionally add an opacity lvl to the image
    backgroundImageOpacity: 0.5,
    // should the image be resized to fit the container?
    backgroundImageStretch: false
});

Html

   <canvas id="c"></canvas>

问题。

狗的图像是全高清图像，但我只看到了它的一部分。如何使用 Fabric Canvas 将背景图像渲染为其实际高度和宽度？由于图片是动态输入的，我可能不知道确切的高度和宽度来对其进行硬编码。

Answer 1

这里是通过 fabric.js.

根据图像大小设置 canvas 大小的方法

在 onload 回调中启动 Fabric canvas，这样我们就可以获取图像的宽度和高度，然后将它们设置到 setDimesions 方法中。

img.onload = function () {
  ... 

  canvas.setDimensions({ width: img.width, height: img.height });
};

var imageUrl = "http://i.imgur.com/yf6d9SX.jpg";
var background = new Image();
background.src = imageUrl;

// wait for the image to load, then set Fabric Canvas on the callback that runs after image finishes loading
background.onload = function () {
  var canvas = new fabric.Canvas("c", {
    hoverCursor: "pointer",
    selection: true,
    selectionBorderColor: "green",
    backgroundColor: null,
  });

  // set canvas width and height based on image size
  canvas.setDimensions({ width: background.width, height: background.height });
  canvas.setBackgroundImage(imageUrl, canvas.renderAll.bind(canvas), {
    // Optionally add an opacity lvl to the image
    backgroundImageOpacity: 0.5,
    // should the image be resized to fit the container?
    backgroundImageStretch: false,
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
<canvas id="c"></canvas>

为 Fabric Canvas 动态设置背景图片

Set background image for Fabric Canvas dynamically

javascript

canvas

fabricjs

现有解决方案使用Canvas

我当前的 Fabric JS 代码

问题。