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

Question

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

例如：画布有800px x 600px，我需要一个100 cm x 400 cm的最终图像，换句话说，实际尺寸。

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大小，如果浏览器可以处理或不处理，我不确定。