How to compress image size in JavaScript?

Question

I am trying to compress image size using JavaScript. but it returns canvas error. below is my code.

 var reader = new FileReader();
        reader.readAsDataURL(fileItem._file);
        reader.onload = function (event) {
            var base64 = event.target.result.substring(event.target.result.indexOf(',') + 1, event.target.result.length);
     var cvs = document.createElement('canvas');
            var source_img_obj = event.target.result;
            cvs.width = source_img_obj.naturalWidth;
            cvs.height = source_img_obj.naturalHeight;
            var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
            var newImageData = cvs.toDataURL(type, 70 / 100);
            var result_image_obj = new Image();
            result_image_obj.src = newImageData;
            console.log(result_image_obj);
};

Error:

Answer 1

I think you are looking something like this~

Update This implementation has two methods to reduce the size of the image. One method resize the image the other method compress the image maintaining the same size but it reduces the quality.

 //Console logging (html) if (!window.console) console = {}; var console_out = document.getElementById('console_out'); var output_format = "jpg"; console.log = function(message) { console_out.innerHTML += message + '<br />'; console_out.scrollTop = console_out.scrollHeight; } var encodeButton = document.getElementById('jpeg_encode_button'); var encodeQuality = document.getElementById('jpeg_encode_quality'); function previewFile() { var preview = document.getElementById('source_image'); var previewCompress = document.getElementById('result_compress_image'); var file   = document.querySelector('input[type=file]').files[0]; var reader  = new FileReader(); reader.addEventListener("load", function(e) { preview.src = e.target.result; preview.onload = function() { resizeFile(this, preview); compressFile(this, previewCompress) }; // preview.src = reader.result; }, false); if (file) {  reader.readAsDataURL(file); } } function resizeFile(loadedData, preview) { console.log(loadedData.width + ' ' + loadedData.height); var canvas = document.createElement('canvas'), ctx; canvas.width = Math.round(loadedData.width / 2); canvas.height = Math.round(loadedData.height / 2); var resizedImage = document.getElementById('result_resize_image'); resizedImage.appendChild(canvas); // document.body.appendChild(canvas); ctx = canvas.getContext('2d'); ctx.drawImage(preview, 0, 0, canvas.width, canvas.height); } function compressFile(loadedData, preview) { console.log('width: ' + loadedData.width + ' height: ' + loadedData.height); var result_image = document.getElementById('result_compress_image'); var quality = parseInt(encodeQuality.value); console.log("Quality >>" + quality); console.log("process start..."); var time_start = new Date().getTime(); var mime_type = "image/jpeg"; if (typeof output_format !== "undefined" && output_format == "png") { mime_type = "image/png"; } var cvs = document.createElement('canvas'); cvs.width = loadedData.width; cvs.height = loadedData.height; var ctx = cvs.getContext("2d").drawImage(loadedData, 0, 0); var newImageData = cvs.toDataURL(mime_type, quality / 100); var result_image_obj = new Image(); result_image_obj.src = newImageData; result_image.src = result_image_obj.src; result_image.onload = function() {} var duration = new Date().getTime() - time_start; console.log("process finished..."); console.log('Processed in: ' + duration + 'ms'); }

 <input type="file" onchange="previewFile()"><br> <div> <h3>Original Image</h3> <img id="source_image" /> </div> <div> <h3>Resized Image</h3> <div id="result_resize_image"> </div> </div> <div> <h3>Compressed Image</h3> <img id="result_compress_image" class='img_container' /> </div> <br><br> <div> <fieldset> <legend>Compressor settings</legend> <div id='controls-wrapper'> Compression ratio : <input id="jpeg_encode_quality" size='3' readonly='true' type="text" value="30" /> % </div> </fieldset> </div> <div> <fieldset> <legend>Console output</legend> <div id='console_out'></div> </fieldset> </div>

Answer 2

You might have to resize the canvas size

refer the following example here

function resizeImg(base, width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var context = canvas.getContext("2d");
    var deferred = $.Deferred();
    $("<img/>").attr("src", "data:image/gif;base," + base).load(function() {
        context.scale(width/this.width,  height/this.height);
        context.drawImage(this, 0, 0); 
        deferred.resolve($("<img/>").attr("src", canvas.toDataURL()));               
    });
    return deferred.promise();    
}

Answer 3

To compress a File (got from input type file) you can use this function. Just call it with the file, and it will return the same file but compressed:

const compressImage = (imageFile, quality) => {
    return new Promise((resolve, reject) => {
        const $canvas = document.createElement("canvas");
        const image = new Image();
        image.onload = () => {
            $canvas.width = image.width;
            $canvas.height = image.height;
            $canvas.getContext("2d").drawImage(image, 0, 0);
            $canvas.toBlob(
                (blob) => {
                    if (blob === null) {
                        return reject(blob);
                    } else {
                        resolve(blob);
                    }
                },
                "image/jpeg",
                quality / 100
            );
        };
        image.src = URL.createObjectURL(imageFile);
    });
};