Question

我是three js的新人。我在WebGL renderer中获得导出图像png格式。它运作良好。现在我确实尝试了我的导出图像different custom size resolution，并获取了我的导出图像。我的导出图像效果很好，但分辨率不会改变。如何设置image resolution？

var width,height,renderer3D;
renderer3D = new THREE.WebGLRenderer({
               antialias: true,preserveDrawingBuffer: true
});

this.ExportImage = function(){
var imgSize = document.getElementById('imageSizeOption').value;
if(imgSize =='small'){    

            imgWidth = 640;
            imgHeight = 480;

}else if(imgSize =='medium'){

            imgWidth = 1024;
            imgHeight = 768;

}else if(imgSize =='large'){

            imgWidth = 1536;
            imgHeight = 1024;

}

        fileName = 'construction'+".png";
        var a = window.document.createElement("a");
        a.href = renderer3D.domElement.toDataURL("image/png", 1.0);
        a.style.width= imgWidth + 'px';    //resolution width 
        a.style.height= imgHeight + 'px';  //resolution height it's not work
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);

  };

Answer 1

看起来你正试图改变图像大小，

尝试按照以下方式使用元素的样式设置图像的宽度和高度。

var imgElement = document.getElementById('imageSizeOption')
imgElement.style.width = '640px';
imgElement.style.height = '480px';

以下是demo

如何在javascript中设置不同大小的图像分辨率并获取导出图像？

1 个答案: