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

Question

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

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

但我发现 $originImage 的尺寸远大于 canvas 的尺寸和 imageObject 的尺寸，所以画布只能显示部分图像。我想知道如何拉伸 $originImage 以适应 canvas 然后 canvas 可以显示所有 $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
});

上面是我的相关代码，下面是显示：

解决了，上一个问题是因为我先调整了$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 可以是你的画布大小，或者它们可以是你想要的特定宽度/高度（在我的项目中，我想做信箱图像，所以我设置了宽度和高度基于我的信箱算法），顶部/左侧是您要将图像放置在画布中的位置（如果您想成为完整的背景图像，请不要放置它）。不要设置任何宽度和高度，因为这会裁剪缩放后的图像，而不是将图像设置为精确大小。

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

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

Answer 2

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

使用 scaleX,scaleY 调整大小。

(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
  });
})();

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

<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>

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)
});