如何在JavaScript中设置不同尺寸的图像分辨率并获取导出图像？

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';

以下是演示