fabric.js 生成与我的 canvas 大小相同的图像

Question

我有一个 1000x1000 canvas。我想生成一个与 canvas 大小相同的图像。该图像已在桌面视图中完美生成，但在响应式或移动视图中生成的尺寸比原始 canvas 尺寸大 3 倍。例如：如果 canvas 大小为 1000，则生成的图像大 3 倍（3000）。

这是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script>

<canvas id="canvas" width="1000" height="1000"></canvas>

<script>
    var canvas = new fabric.Canvas('test-canvas');
    var text = new fabric.Text('Hello World');
    canvas.add(text);
    canvas.setActiveObject(text);
    canvas.renderAll();
    var image = canvas.toDataURL('png',{
        format: 'png',
        multiplier: 1,
        left: 0,
        top: 0,
        width: 50,
        height: 50
    });
</script>

任何人都可以就此提供帮助吗？

Answer 1

试试下面对我有用的代码

fabric.Image.fromURL(canvas.toDataURL('png'),function (img) {
     img.set({
            top: imageTop,
            left: imageLeft,
            scaleX: 1,
            scaleY: 1,
            width: 1000,
            height: 1000,
     });                            
});

fabric.js 生成与我的 canvas 大小相同的图像

fabric.js generate an image that is the same size as my canvas

javascript

fabricjs