Question

我使用fabricjs来实现图像编辑，我尝试使用fabric.Image对象作为canvas的背景图像来存储数据。以下是代码：

var canvas = new fabric.Canvas('canvasId');
var imageObject = new fabric.Image($originImage);
canvas.add(imageObject);

但是我发现 $ originImage 的大小远远大于 canvas '大小以及 imageObject 的大小，所以画布只能显示部分图像。我想知道如何拉伸 $ originImage 以适应画布然后画布可以显示所有 $ originImage

我在这里做了什么

$canvas.width = $originImage.clientWidth;
$canvas.height = $originImage.clientHeight;
var fabricCanvas = new fabric.Canvas('canvasId');
// canvas.setFabricCanvas(fabricCanvas);
var imageObject = new fabric.Image($originImage);
// fabricCanvas.add(imageObject);
// fabricCanvas.isDrawingMode = true;
fabricCanvas.setBackgroundImage(imageObject, fabricCanvas.renderAll.bind(fabricCanvas), {
  scaleX: fabricCanvas.width / $originImage.naturalWidth,
  scaleY: fabricCanvas.height / $originImage.naturalHeight
});

上面是我的相关代码，下面是显示： enter image description here

它已经解决了，之前的问题是因为我首先调整了$ originImage的大小，所以当我输入图像src作为setBackgroundImage的参数时，它可以正常显示。

Answer 1

对于fabricjs的2.0版本，与以前的版本相比，它们改变了处理宽度/高度的方式。如果应用宽度/高度，则它基本上将图像裁剪为与原始图像大小相比的特定大小。为了将其调整到合适的大小，您必须像其他人建议的那样切换到使用scaleX / scaleY。

例如，我使用image.fromUrl加载图像并将其设置为背景：

fabric.Image.fromURL(imgUrl, function(img) {
  img.set({
    scaleX: currentWidth / img.width,
    scaleY: currentHeight / img.height,
    top: topPosition,
    left: leftPosition
    originX: 'left', originY: 'top'
  });
  canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
});

其中currentWidth / currentHeight可以是你的画布大小，如果你想要完整的背景，或者它们可以是你想要的特定宽度/高度（在我的项目中，我想做信箱图像，所以我设置宽度和高度基于我的letter-boxing算法），top / left是你想要将你的图像放在画布上的位置（如果你想成为完整的背景图像，请保留它）。不要设置任何宽度和高度，因为这会裁剪缩放的图像，而不是将图像设置为精确的大小。

如果这不起作用，请检查画布中的backgroundImage对象，并查看其尺寸和比例属性与手动计算相比是否不同。如果你看一下，你会看到宽度和高度属性是你的自然图像宽度和高度，但是如果你的画布尺寸小于图像尺寸，它将具有scaleX和scaleY小于1，如果它更大，它将具有大于1的尺寸。

此外，我发现您正在将图像直接加载到图像对象中。与加载数据并使用setBackgroundImage直接设置数据相比，这可能会有所不同。

Answer 2

canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
  scaleX: canvas.width / $originalImg.naturalWidth,
  scaleY: canvas.width / $originalImg.naturalHeight
});

使用scaleX，scaleY来调整大小。

＆＃13;

(function() {
  var $originalImg = $('#originalImage')[0];
  console.dir($originalImg)
  var canvas = this.__canvas = new fabric.Canvas('c');
  var img = new fabric.Image($originalImg);
  canvas.setBackgroundImage(img,canvas.renderAll.bind(canvas),{
   scaleX:canvas.width/$originalImg.naturalWidth,
   scaleY:canvas.width/$originalImg.naturalHeight
  });
})();

＆＃13;

canvas{
  border-width: 1pz;
  border-style: solid;
  border-color: #000;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id='originalImage'src='http://fabricjs.com/assets/pug_small.jpg'>
<canvas id='c' width=200 height=200></canvas>

＆＃13;

Answer 3

我使用以下脚本来确保图像不大于画布宽度：

var aspect = image.width / image.height; //Aspect ratio of image

new fabric.Image(image, {
  scaleX: canvas.width / image.width,
  scaleY: canvas.width / (image.height * aspect)
});

如何拉伸图像大小以匹配fabric.Image对象

3 个答案: