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

Change generated image resolution Fabric.js

本文关键字：分辨率 结构 js 图像      更新时间：2023-09-26

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

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

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

  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 上，因为它真的很大，所以如果你不能从织物.js做，用 PHP 做，否则，这个链接可能会有所帮助 使用 PHP 将 SVG 图像转换为 PNG

100cm = 39.3

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

相关文章：