javascript - 更改生成的图像分辨率 Fabric.js

Question

我正在创建一个Fabric.js基于图像的编辑器，但最终图像分辨率存在问题。我需要以高分辨率生成图像，但我的编辑器的尺寸在低分辨率下以像素为单位。

例如：画布有 800 像素 x 600 像素，我需要一个 100 厘米 x 400 厘米的最终图像，换句话说，是实际大小。

Answer 1

让我从我的经验中提出一些想法 -

1. 如果最终分辨率很大，但不是特别大，您可以在生成图像数据之前将画布缩放到其大小（例如 toDataURL）
2. 如果最终分辨率非常大，我建议你可以直接从 PHP 处理

对于第一个 -

    var originWidth = canvas.getWidth();

    function zoom (width)
        {
            var scale = width / canvas.getWidth();
            height = scale * canvas.getHeight();

            canvas.setDimensions({
                "width": width,
                "height": height
            });

            canvas.calcOffset();
            var objects = canvas.getObjects();
            for (var i in objects) {
                var scaleX = objects[i].scaleX;
                var scaleY = objects[i].scaleY;
                var left = objects[i].left;
                var top = objects[i].top;

                objects[i].scaleX = scaleX * scale;
                objects[i].scaleY = scaleY * scale;
                objects[i].left = left * scale;
                objects[i].top = top * scale;

                objects[i].setCoords();
            }
            canvas.renderAll();
    }

    zoom (2000);

    // here you got width = 2000 image
    var imageData = canvas.toDataURL({
            format: 'jpeg',
            quality: 1
        });
    zoom (originWidth);

我从来没有在 100cm x 400cm 上试过，因为它真的很大，所以如果你不能从 fabric.js 做，用 PHP 做，否则这个链接可能有助于使用 PHP 将 SVG 图像转换为 PNG

100cm = 39.3 英寸和 400cm = 39.3 * 4 英寸，如果您有 300dpi 图像用于最终输出。您将需要宽度 = 39.3 * 300 和高度 39.3 * 4 * 300 大小，如果浏览器可以处理它，我不确定。