Question

据我所知，canvas.toDataURL函数只会以96dpi的速度导出，我需要增加画布大小才能获得所需的输出比例，例如300dpi。

这个问题在答案2中有很好的dpi功能： Higher DPI graphics with HTML5 canvas

当按下按钮时，我使用以下代码将OpenLayers3地图导出为png图像文件 - 按钮包含在标签中：

<a download="map.png" id='export-png'">


      function setDPI(canvas, dpi) {
       // Set up CSS size if it's not set up already
        if (!canvas.style.width)
            canvas.style.width = canvas.width + "px";
        if (!canvas.style.height)
            canvas.style.height = canvas.height + "px";

        var scaleFactor = dpi / 96;
        canvas.width = Math.ceil(canvas.width * scaleFactor);
        canvas.height = Math.ceil(canvas.height * scaleFactor);
        var ctx = canvas.getContext("2d");
        ctx.scale(scaleFactor, scaleFactor);
    }

    var exportPNGElement = document.getElementById("export-png");
    if ("download" in exportPNGElement) {
        exportPNGElement.addEventListener("click", function(e) {
            map.once("postcompose", function(event) {
                var canvas = event.context.canvas;
                setDPI(canvas, 300);
                exportPNGElement.href = canvas.toDataURL("image/png");
            });
            map.renderSync();
            //alert(en + " image created");
        }, false);
    }

但脚本失败并调用了setDPI函数 - 没有正常工作。即使明确设置画布宽度也没有区别：

                var canvas = event.context.canvas;
                canvas.width=1024;
                exportPNGElement.href = canvas.toDataURL("image/png");

我可以在css中增加地图图像大小，但是toDataURL调用似乎在较高分辨率下会出现 - 例如1000 x 1000。

如何更改或设置画布大小以便我可以将更高的分辨率输出到PNG？

Answer 1

我认为你需要在precompose-event中调用该函数。

    map.once('precompose', function(event) {
       setDPI('mycanvas',150);
    });

然后使用...toDataURL('image/png');...

进行后期合成

另一个主题中提到的解决方案是针对已查看的画布，其中＆＃34; DOM-size＆＃34;由css-container包装缩小（CSS大小）。导出它的结果：是一个更大的图像，其中矢量源看起来可用。

光栅来源未显示增加＆＃34;详细信息＆＃34;当他们不是高飞的时候。他们只是模糊/ pixeled。但它对我有用 - 或多或少。我从setDPI（） - 函数中删除了if部分。

如果你想获得更好的结果（在光栅图像上）你需要设置css-viewport然后（当加载光栅图块时）你可以导出图像（仍然只是一个更大的图像在结束）。之后，您可以设置视口。

使用高DPI时的toDataURL导出为PNG

1 个答案: