Javascript resize base64 image

Question

I have a function that send a base64 image to my input, but I want to resize the image before send to input. I need a 250x250 image, but when take shot from mobile the image goes 3096x3096... There is my code:

function sendPhoto() {

            if (this.files && this.files[0]) {

                var FR = new FileReader();

                FR.addEventListener("load", function (e) {
                    var permitted_files = ['image/png', 'image/jpeg', 'image/bmp'];
                    var baseImg = e.target.result;
                    var parteImg = baseImg.substring(11, 15);

                    if (((parteImg).includes('jpeg')) || ((parteImg).includes('png')) || ((parteImg).includes('bmp'))) {
                        document.getElementById("sendedPhoto").src = e.target.result;
                        document.getElementById("btnPhoto").style.display = '';
                    } else {
                        $("body").overhang({
                            type: "error",
                            message: "This is not an image file."
                        });
                        document.getElementById("uploadFoto").value = "";
                    }
                });

                FR.readAsDataURL(this.files[0]);
            }

        }

Any ideas? THX!

Answer 1

You can use HTML5 Canvas to do that Refer: Canvas Image