Question

我找到并编辑了下面的代码，将我的html5画布保存为.png-image。画布由Three.js / Potree生成这段代码完美无缺。但是，我想要一个更高分辨率的图像作为输出。通常，THREEjs渲染器的大小根据客户端浏览器大小而定。我已经手动将其放大到3000x2000。此编辑将提供更高分辨率的图像，但是当增加更多时，不再可见任何效果。

下载高分辨率输出图像是否有一个简单的（我不是那个javascript ..）解决方法？

首先，图像仅供我使用。没有用户需要下载它或需要将其传递到服务器上。虽然，如果它是一个简洁的解决方案，我也希望为用户提供保存图像的可能性。

function saveAsImage() {
    var strDownloadMime = "image/octet-stream";
    //alert("function saveimage")
    var imgData, imgNode;

    try {
        var strMime = "image/png";
        imgData = viewer.renderer.domElement.toDataURL(strMime);

        saveFile(imgData.replace(strMime, strDownloadMime), "test.png");

    } catch (e) {
        console.log(e);
        return;
    }

}

var saveFile = function (strData, filename) {
    //alert("savefilefunction");
    var link = document.createElement('a');
    if (typeof link.download === 'string') {
        document.body.appendChild(link); //Firefox requires the link to be in the body
        link.download = filename;
        link.href = strData;
        link.click();
        document.body.removeChild(link); //remove the link when done
    } else {
        location.replace(uri);
    }
}

三种渲染器设置：

    let width = 3000;
    let height= 2000;

    this.renderer = new THREE.WebGLRenderer({premultipliedAlpha: false, preserveDrawingBuffer: true});
    this.renderer.setSize(width, height);

保存高分辨率图像html5 / threejs-canvas

0 个答案: