crop and resize input file preview image

preview.js

       var reader = new FileReader(); 
                reader.onload = function (e) {
                    // get loaded data and render thumbnail.
                    var imgTmp = new Image();
                     imgTmp.onload = function(evt) {                       
                        var tempCanvas = document.createElement("canvas"),
                        tCtx = tempCanvas.getContext("2d");
                        if (this.width > this.height) {
                            var width = this.height;
                            var imgX = (this.width - this.height)/2;
                            var imgY = 0;
                        } else {
                            var width = this.width;
                            var imgX = 0;
                            var imgY = (this.height - this.width)/2;
                        }
                        tempCanvas.width = width;
                        tempCanvas.height = width;    
                        tCtx.drawImage(imgTmp,imgX,imgY, width,width, 0,0, width, width);  
                        // write on screen
                        var imgCroped = tempCanvas.toDataURL("image/png");
                        document.getElementById("fileAvatarImg").src = imgCroped;
                    };
                    imgTmp.src = e.target.result;
                    
                };
                reader.readAsDataURL(this.files[0]);