Javascript Browser Image Compression

Untuk mengupload gambar ke server biasanya kita memerlukan ukuran yang kecil untuk mengurangi beban penyimpanan.

Untuk itu diperlukan sistem kompresi di browser untuk mengurangi beban server.

<script src="https://cdn.jsdelivr.net/npm/browser-image-compression@1.0.17/dist/browser-image-compression.js" type="text/javascript"></script>

<script>
//  document.querySelector('#version').innerHTML = imageCompression.version
function compressImage(event, useWebWorker) {
    var file = event.target.files[0]
    var logDom, progressDom
    if (useWebWorker) {
        logDom = document.querySelector('#web-worker-log')
        progressDom = document.querySelector('#web-worker-progress')
    } else {
        logDom = document.querySelector('#main-thread-log')
        progressDom = document.querySelector('#main-thread-progress')
    }
    //document.getElementById('preview').src = URL.createObjectURL(file)

    logDom.innerHTML = 'Source image size:' + (file.size / 1024 / 1024).toFixed(2) + 'mb'
    console.log('input', file)
    imageCompression.getExifOrientation(file).then(function(o) {
        console.log('ExifOrientation', o)
    })

    var options = {
        maxSizeMB: parseFloat(document.querySelector('#maxSizeMB').value),
        maxWidthOrHeight: parseFloat(document.querySelector('#maxWidthOrHeight').value),
        useWebWorker: useWebWorker,
        onProgress: onProgress
    }
    imageCompression(file, options)
        .then(function(output) {
            logDom.innerHTML += ', output size:' + (output.size / 1024 / 1024).toFixed(2) + 'mb'
            //console.log('output', output)
            const downloadLink = URL.createObjectURL(output)


            logDom.innerHTML += '&nbsp;<a href="' + downloadLink + '" download="' + file.name +
                '">download compressed image</a>'
            document.getElementById('preview-after-compress').src = downloadLink;
            console.log(downloadLink);
            var reader = new FileReader();

            reader.readAsDataURL(output);
            reader.onloadend = function() {
                var base64data = reader.result;
                console.log(base64data);
                

            //return uploadToServer(output)
        })
        .catch(function(error) {
            alert(error.message)
        })


    function onProgress(p) {
        progressDom.innerHTML = '(' + p + '%' + ')'
    }
}

function uploadToServer(file) {
    const formData = new FormData()
    formData.append('image', file, file.name)
    const url = 'http://urlserver'
    console.log('calling api', url, 'with data', Array.from(formData.entries())[0])
    return fetch(url, {
            method: 'POST',
            body: formData
        }).then(res => res.json())
        .then(body => console.log('got server response', body))
}
</script>

File HTML

<div class="callout callout-info">
<div style="display:none">
        <label for="maxSizeMB">maxSizeMB: <input type="number" id="maxSizeMB" name="maxSizeMB"
                value="0.5" /></label><br />
        <label for="maxWidthOrHeight">maxWidthOrHeight: <input type="number" id="maxWidthOrHeight"
                name="maxWidthOrHeight" value="1024" /></label>
    </div>
    <div style="padding:5px">
        <label for="web-worker">
            Upload Foto : <span id="web-worker-progress"></span><br>
            <div class="form-group">
            <!-- <label for="customFile">Custom File</label> -->

            <div class="custom-file">
                <input type="file" class="custom-file-input" id="web-worker" type="file" accept="image/*"
                onchange="compressImage(event, true);" >
                <label class="custom-file-label" for="customFile">Pilih Gambar</label>
            </div>
            </div>

        </label>
        <p style="display:none" id="web-worker-log"></p>
    </div>
    <img id="preview-after-compress" style="width:100%;display:none" />
    </div>