resizeWithCanvas

resizeImage(image){
            var img = new Image();
            img.src = image.src ;  
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);
            var MAX_WIDTH = 3000;
            var MAX_HEIGHT = 3000;
            var width = img.width;
            var height = img.height;

            if (width > height) {
                if (width > MAX_WIDTH) {
                    height *= MAX_WIDTH / width;
                    width = MAX_WIDTH;
                }
            } else {
                if (height > MAX_HEIGHT) {
                    width *= MAX_HEIGHT / height;
                    height = MAX_HEIGHT;
                }
            }        
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(img, 0, 0, width, height);
            var dataurl = canvas.toDataURL("image/jpeg",0.8).replace("image/jpeg","image/png");            
            
            var blobBin = atob(dataurl.split(',')[1]);
            var array = [];
            for(var i = 0; i < blobBin.length; i++) {
                array.push(blobBin.charCodeAt(i));
            }
            var blob=new Blob([new Uint8Array(array)], {type: 'image/png'});

            var file = new File([new Uint8Array(array)], "filename", {type: 'image/png'});            
            
            this.reviewImage = blob;

            this.$el.querySelector(".uploaded-img").src = dataurl;
            console.log(file);
                    
            // var head = 'data:image/png;base64,';
            // this.imageSize.size = Math.round((dataurl.length - head.length)*3/4) ;          
            console.log(width,this.imageSize.size);            

        },