Fabric.js - 图像质量差

Question

这是加载到 canvas 上的 svg 图像。如您所知，它看起来非常像光栅图像。为了提供更多上下文，浅蓝色框为 1000 像素 x 400 像素。

另请注意，IText 对象的图像看起来像光栅图像而不是矢量图像。

有人知道这里发生了什么以及如何解决它吗？

---更新---

抱歉，这花了这么长时间才出来...我被跟踪了，但按照要求：

<html>
    <head>
        <title>
            Debug Me
        </title>
        
        <!--jQuery CDN-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <!--Path to fabric.js-->
        <script type='text/javascript' src="./CreekWareJava/fabric.js-3.6.3/dist/fabric.js"></script>

        <!--bootstrap related-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

    </head>

<body>
    <div class="container">
        <div class="row">
            <div class="col" id="canvas_container">
                <canvas id="canvas">
                    Canvas is not supported by this browser! Please upgrade your browser.
                </canvas>
            </div>
        </div>
    </div>

    <style>

#canvas_container
{
    display: flex !important;
    justify-content: center !important;
}
canvas
{
    position: absolute !important;
    height: 100% !important;
    width: 100% !important;

    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
.canvas-container
{
    width: 1000px !important;
    height: 400px !important;
    border: 5px solid green !important;
    position: relative !important;
}

    </style>

    <script>

window.onload = function()
{
    canvas = new fabric.Canvas('canvas');

    // – Raman Nikitsenka's proposal
    // it shouldn't hurt to have it in here...
    fabric.Object.prototype.objectCaching = false;

    //Adding some text
    addText("Some text");
    addImage("http://fabricjs.com/assets/1.svg");

}

function addText(text)
{
    var canH = canvas.getHeight() / 2;
    var canW = canvas.getWidth() / 2;
    var text = new fabric.IText(text, { left: canW, top: canH, fill: "Black", textAlign: 'center' });
    text.originX = 'center';
    text.originY = 'center';
    canvas.add(text);
    canvas.bringToFront(text);
    canvas.requestRenderAll();
}

function addImage(source)
{
    fabric.loadSVGFromURL(source ,function(objects,options) {

    var loadedObjects = fabric.util.groupSVGElements(objects, options);

        loadedObjects.set({
            width: 200,
            height: 200
        });

        canvas.add(loadedObjects);
        canvas.renderAll();

    });
}

    </script>

</body>
</html>

这是简化后的代码。正如您在加载它时所知道的那样，svg 和文本都会变得非常模糊。当您调整龙或文本的大小时，您可以看出它正在尝试渲染它但没有正确渲染。

一些额外的观察：

fabric.js 采用初始 canvas 元素并创建 2 个新的 canvas 元素，然后将它们包装在一个 div 中，其中包含一个名为 .canvas-容器。我有一个 ID 为 #canvas_container.

的容器的包装器 div

-- 再次更新... --

我在新结构对象之后直接将以下代码添加到 window.onload 事件监听器...

for (var i = 0; i < 4; i++)
{
    canvas.setHeight(document.getElementById('canvas').height);
    canvas.setWidth(document.getElementById('canvas').width);
    canvas.requestRenderAll();
    console.log(i, "fw", canvas.width, "fh", canvas.height, "cw", document.getElementById("canvas").width, "ch", document.getElementById("canvas").height, "fr", canvas.width / canvas.height, "cr", document.getElementById("canvas").width / document.getElementById("canvas").height);
}

我从中观察到，我增加循环计数器的次数越多，图像质量和文本质量就越好。然而，另一方面，它会使调整大小的框和边界框更薄，并减小对象的物理尺寸。控制台将输出 fabric 的 canvas 的宽度和高度，然后是物理的 html canvas 元素的宽度和高度，然后是每个元素的比例。想法？

Answer 1

所以问题是 fabric.js 检查标签的宽度和高度以初始化新结构 canvas，如果您不将其包含在标签中，它就不会'无法正确渲染 canvas。要修复它，您可以使用

canvas.setHeight(document.getElementById("your_canvas_id").style.height);
canvas.requestRenderAll();

宽度也是如此。

Fabric.js changes my canvas size to 300x150 after initialization 是这个问题的另一个资源。

Fabric.js - 图像质量差

Fabric.js - Bad image quality

javascript

fabricjs