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

Question

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

例如: Canvas 有 800 像素 x 600 像素，我需要一张 100 厘米 x 400 厘米的最终图像，换句话说，实际尺寸。

Answer 1

让我根据我的经验在这里提出一些想法 -

1. 如果最终分辨率很大，但不是特别大，您可以在生成图像数据(例如 toDataURL)之前将 Canvas 缩放到它的大小
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 或其他方式做，这个链接可能会有帮助 Convert SVG image to PNG with PHP

100cm = 39.3inch 和 400cm = 39.3 * 4inch，如果最终输出的图像为 300dpi。您将需要 width = 39.3 * 300 和 height 39.3 * 4 * 300 大小，如果浏览器可以处理它，我不确定。