Fabric js适合给定尺寸的图像而不拉伸答案

【问题标题】：Fabric js fit image in given size without stretchingFabric js适合给定尺寸的图像而不拉伸
【发布时间】：2019-05-02 08:54:43
【问题描述】：

您好，我正在开发在线打印应用程序，我们在 FabricJS 中创建一些设计，然后用户可以编辑那些设计，用自己的替换文本和图像...一切正常，但是当用户使用图像替换时，我们会遇到问题替换图像，我们希望它适合画布上已经存在的图像，同时保持纵横比。下面是替换图像的当前代码，但如果图像是垂直的，它不适合图像。

o  = activeCanvas.getActiveObject();
fabric.Image.fromURL(src, function(m) {
                var i = m.set({
                id: o.id,
                left: o.left,
                top: o.top,
                width: m.width,
                height: m.height
                });
                i.scaleToWidth(o.getScaledWidth());
                activeCanvas.remove(o);
                activeCanvas.add(i);
                renderAppChange();
                zoomoutIn(1);
                setActiveNew(i);
            });

【问题讨论】：

标签： javascript jquery fabricjs

【解决方案1】：

据我所知，您希望缩放新图像以适合旧图像的 width 和 height 最小尺寸：

const widthFactor = old.getScaledWidth() / newImg.width
const heightFactor = old.getScaledHeight() / newImg.height
const minFactor = Math.min(widthFactor, heightFactor)
newImg.scale(minFactor)

这里，scale() 将保留纵横比。

还有一个要测试的 sn-p：

const canvas = new fabric.Canvas("c")

const url = "https://via.placeholder.com/100x50"
const url2 = "https://via.placeholder.com/50x100"
const url3 = "https://via.placeholder.com/100x100"

fabric.Image.fromURL(url, (img) => {
  canvas.add(img)
}, {
  left: 0,
  top: 10,
})

fabric.Image.fromURL(url2, (img) => {
  canvas.add(img)
}, {
  left: 120,
  top: 10,
})

fabric.Image.fromURL(url3, (img) => {
  canvas.add(img)
}, {
  left: 200,
  top: 10,
})

function insertAndFit (imageURL) {
  const o = canvas.getActiveObject();
  if (!o) {
    throw new Error('select an object first')
  }
  fabric.Image.fromURL(imageURL, function(m) {
    m.set({
      left: o.left,
      top: o.top
    })
    const widthFactor = o.getScaledWidth() / m.width
    const heightFactor = o.getScaledHeight() / m.height
    const minFactor = Math.min(widthFactor, heightFactor)
    m.scale(minFactor)
    canvas.remove(o)
    canvas.add(m)
  })
}

document.getElementById('b1').onclick = () => {
  insertAndFit("https://via.placeholder.com/100x300")
}

document.getElementById('b2').onclick = () => {
  insertAndFit("https://via.placeholder.com/300x100")
}

document.getElementById('b3').onclick = () => {
  insertAndFit("https://via.placeholder.com/200x200")
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.2/fabric.js"></script>
<canvas id='c' width="400" height="200"></canvas>
<button id='b1'>insert 100x300</button>
<button id='b2'>insert 300x100</button>
<button id='b3'>insert 200x200</button>

【讨论】：