如何在JavaScript中为导出图像设置图像分辨率更改？

Question

我是三个新手。 我使用了WebGLRenderer 。 我的导出图像分辨率基于画布renderer大小。 我的画布尺寸为1159 * 262。 我的导出图像效果很好，但是我需要尝试调整导出图像分辨率的大小。 这个怎么做？ 请有人给个提示。 此处附上示例一' https://jsfiddle.net/2pha/art388yv/ '我将如何调整分辨率png图像的大小？

var renderer3D ,imgWidth ,imgHeight ;

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

this.ExportImage = function(){

            imgWidth = 640; //resolution width
            imgHeight = 480; //resolution height

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

      };

Answer 1

我得到答案。 这种工作良好的image resolution大小的宽度和高度是基于three js renderer更改的。

var renderer3D ,imgWidth ,imgHeight ;

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

    this.ExportImage = function(){

      if(imgSize =='small'){

                imgWidth = 640;
                imgHeight = 480;

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

                imgWidth = 1024;
                imgHeight = 768;

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

                imgWidth = 1536;
                imgHeight = 1024;

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

                imgWidth = 1600;
                imgHeight = 1200;
            }


          renderer3D.setSize(imgWidth, imgHeight);

          fileName = 'construction'+".png";
          var a = window.document.createElement("a");
          renderer3D.render(scene3D, camera3D);
          a.href = renderer3D.domElement.toDataURL("image/png", 1.0);
          a.download = fileName;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);

          renderer3D.setSize(canvas3D.clientWidth, canvas3D.clientHeight);
    };