Fabric.js图片缩放适配模式：避免拉伸且保留控制框调整功能

使用Fabric.js在Canvas中显示图片时，默认调整图片大小会拉伸图片、破坏宽高比，如何配置才能避免拉伸，同时允许调整控制框大小？

原代码示例 #

JavaScript代码 #

const canvas = new fabric.Canvas('demo', {
  backgroundColor: '#DDDEEE',
  centeredScaling: true,
  centeredRotation: true
});
const CANVAS_WIDTH = 540;
const CANVAS_HEIGHT = CANVAS_WIDTH;
canvas.setDimensions({ width: CANVAS_WIDTH, height: CANVAS_HEIGHT });


fabric.Image.fromURL('https://via.placeholder.com/300', (img) => {
  canvas.add(img);
});

HTML代码 #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>
</head>
<body class="mat-typography">
<canvas id="demo"></canvas>
</body>
</html>

解决方案 #

Fabric.js内置了lockUniScaling属性，开启后可强制保持元素宽高比，调整控制框大小时图片不会被拉伸，完全匹配你想要的「调整大小并保持比例」的效果。

有两种配置方式：

1. 全局配置（对画布内所有元素生效） #

初始化Canvas时添加lockUniScaling: true，所有添加到该画布的元素都会默认保持宽高比：

const canvas = new fabric.Canvas('demo', {
  backgroundColor: '#DDDEEE',
  centeredScaling: true,
  centeredRotation: true,
  lockUniScaling: true // 全局开启比例锁定
});

2. 单独给图片设置（仅对当前图片生效） #

如果只需要特定图片保持比例，在图片加载完成后给实例设置属性即可：

fabric.Image.fromURL('https://via.placeholder.com/300', (img) => {
  img.lockUniScaling = true; // 单独锁定该图片的比例
  canvas.add(img);
});

效果说明 #

开启lockUniScaling后，拖动图片控制框的边角时，图片会按照原始宽高比同步缩放，不会出现拉伸变形；同时控制框的大小依然可以自由调整，满足缩放需求。

内容的提问来源于stack exchange，提问作者Mariano