Openlayers 3 在高DPI下使用toDataURL导出到PNG

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

这个问题在回答2中有很好的dpi功能：

当按下按钮时，我使用以下代码将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);
    }

我可以在css中增加地图图像的大小，但是toDataURL调用似乎在更高的分辨率下失败了——例如1000 x 1000

---

如何更改或设置画布大小，以便获得更高分辨率的PNG输出？

我认为，您需要在precompose事件中调用该函数

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

然后是带有

…toDataURL（'image/png'）

在另一个线程中提到的解决方案是针对已查看的画布，其中其“DOM大小”由包装它的css容器（css大小）缩小。
导出它的结果是：一个更大的图像，矢量源看起来可用

光栅源在不高DPI时不会显示增加的“细节”。它们只是看起来模糊/像素化。但这对我来说是可行的——或多或少。我从setDPI（）函数中删除了if部分

如果希望（在光栅图像上）获得更好的结果，则需要设置css视口，然后（在加载光栅分幅时）可以导出图像（最后还是一个更大的图像）。之后，可以将视口设置回原位
 你找到工作的方法了吗？
    map.once('precompose', function(event) {
       setDPI('mycanvas',150);
    });