Fabric JS - 我可以将画布另存为图像但带有 <img> 标签的背景吗？

Question

我将 canvas 元素放置在 div 中，并将 img 元素放置在背景中。当然我可以使用

canvas.toDataURL('image/png')

，但是这只保存canvas元素内的所有对象，我想将

div id="custom-cloth"

中的所有内容保存为图像，该怎么做？

例如代码

<div id="custom-cloth">

        <!-- Tshirt Image -->
        <div class="w-full h-[38rem] overflow-hidden">
            <img id="img" src="http://sakaw.test/storage/editor/depan.png" class="mx-auto"> <--- Here is the background
        </div>

        <!-- Canvas -->
        <div
            class="absolute top-20 inset-x-0 w-[17rem] h-[30.5rem] mx-auto border-2 border-dashed border-transparent rounded-lg hover:border-orange-500">
            <canvas id="c"></canvas>
        </div>

    </div>

显示输出代码

抱歉我不擅长解释

Answer 1

假设您的最终目标是将 dom 转换为图像。 也许你可以尝试 dom-to-image https://github.com/tsayen/dom-to-image

domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'my-image-name.jpeg';
        link.href = dataUrl;
        link.click();
    });

这是codesandbox演示 https://codesandbox.io/s/dom-node-to-png-10odz2