How to set image resolution change for export image in javascript?

Question

I am new in three js. I used WebGLRenderer. MY export image resolution based on canvas renderer size. My canvas size 1159*262. My export image works well but I need attempt resize my export image resolution. How to do this? please, someone, give the hints. Here attached sample one 'https://jsfiddle.net/2pha/art388yv/' How would I do resize resolution png image?

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

      };

change the size of your renderer (renderer.setSize) then set your camera aspect to match the new size and update the projection matrix then render the scene and finally call toDataURL. Then put the render back to the size it was before and put the camera aspect back to match — user128511
– user128511, Commented Apr 23, 2018 at 15:49

karthick187 · Accepted Answer · 2018-04-24 10:33:12Z

I get the answer. This working well image resolution size width and height changed is based on 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);
    };

Collectives™ on Stack Overflow

How to set image resolution change for export image in javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related