更改生成的图像分辨率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大小,如果浏览器可以处理或不处理,我不确定.