SOURCE

const canvasElement = document.getElementById('canvas');

// 创建Fabric.js的canvas对象
const canvas = new fabric.Canvas('canvas');

// 图片资源数组
const imageUrls = [
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4acc801d-2d98-438c-b4d5-e7098b2807a2%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688265221&t=c3044b398900a58a17497956674e5fa5',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4acc801d-2d98-438c-b4d5-e7098b2807a2%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688265221&t=c3044b398900a58a17497956674e5fa5',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4acc801d-2d98-438c-b4d5-e7098b2807a2%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688265221&t=c3044b398900a58a17497956674e5fa5',
    // ...
];

// 全局变量初始化
const images = [];
const padding = 10; // 图片间距
let x = padding;
let y = padding;

// 加载图片资源并创建Fabric.js的图片对象
imageUrls.forEach((url, index) => {
    fabric.Image.fromURL(url, (img) => {
        // 调整图片大小
        const maxDimension = 200;
        const scaleFactor = Math.min(maxDimension / img.width, maxDimension / img.height);
        img.scale(scaleFactor);

        // 设置图片的位置
        img.set({
            left: x,
            top: y,
        });

        // 计算下一张图片的位置
        x += img.getScaledWidth() + padding;

        // 每3张图片换行
        if (index % 3 === 2) {
            y += img.getScaledHeight() + padding;
            x = padding;
        }

        // 添加图片到画布
        canvas.add(img);

        // 将Fabric.js图片对象添加到数组
        images.push(img);
    });
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>


<canvas id="canvas" width="350" height="200"></canvas>