Question

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

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

Answer 1

让我根据自己的经验提出一些想法 -

如果最终分辨率很大但不是极大，你可以在生成图像数据之前将画布缩小到它的大小（例如toDataURL）
如果最终分辨率非常大，我建议您直接从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.3英寸和400cm = 39.3 * 4英寸，如果您有300dpi图像作为最终输出。您需要宽度= 39.3 * 300和高度39.3 * 4 * 300尺寸，如果浏览器可以处理或不处理，我不确定。

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

1 个答案: