动态设置Fabric Canvas的背景图片 使用Canvas的现有解决方案我当前的Fabric JS代码问题

如何解决动态设置Fabric Canvas的背景图片 使用Canvas的现有解决方案我当前的Fabric JS代码问题

我想在图像上添加绘图形状，因此决定使用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);   
}

参考-https://stackoverflow.com/a/14013068/2094670 我喜欢这个解决方案。 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将背景图像渲染为其实际的高度和宽度？由于图片是动态生成的，因此我可能不知道确切的高度和宽度来对其进行硬编码。

解决方法

这是通过fabric.js根据图像大小设置画布大小的方法。

通过在onload回调中启动Fabric画布，我们可以获取图像的宽度和高度，然后将其设置为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>