Konversi Image ke Base64 & Resize Gambar yang di Upload front End HTML + Javascript

Sederhananya :

1. buat 2 input :

<input type="file" class='form-control' onchange="onfile_uploadkelengkapan0()" id='file_uploadkelengkapan0'>

                                <input type="hidden" name='file_uploadkelengkapan' id='file_uploadkelengkapan'>

untuk input yang pertama digunakan untuk menampung gambar yang telah di upload

field input yang ke dua untuk menampung file yang jadi base 64 dan telah di resize

2. Selanjutnya bikin javascript :

var onfile_uploadkelengkapan0 = function () {

    var uploadImage = document.getElementById("file_uploadkelengkapan0");

    //check and retuns the length of uploded file.

    if (uploadImage.files.length === 0) {

        return;

    }

    //Is Used for validate a valid file.

    var uploadFile = document.getElementById("file_uploadkelengkapan0").files[0];

    if (!filterType.test(uploadFile.type)) {

        alert("Please select a valid image.");

        return;

    }

    onfile_uploadkelengkapan1.readAsDataURL(uploadFile);

}

var onfile_uploadkelengkapan1 = new FileReader();

onfile_uploadkelengkapan1.onload = function (event) {

    var image = new Image();

    image.onload = function () {

        var canvas = document.createElement("canvas");

        var context = canvas.getContext("2d");

        canvas.width = image.width / 2;

        canvas.height = image.height / 2;

        context.drawImage(image,

            0,

            0,

            image.width,

            image.height,

            0,

            0,

            canvas.width,

            canvas.height

        );

        var tx = canvas.toDataURL();

        var nn = document.getElementById("file_uploadkelengkapan").value = tx;

    }

    image.src = event.target.result;

};

.

untuk ukuran gambar (width,height) bisa dibuat fixed misal canvas.width=600 ; canvas.height=400