CODEWITHSUNDEEP
javascriptthree.jsexport
karthick187
karthick187

Reputation: 21

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

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

      };

Upvotes: 0

Views: 678

Answers (1)

karthick187
karthick187

Reputation: 21

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

Upvotes: 1

Related Questions