Question

195

JavaScript reduce the size and quality of image with based64 encoded code

rated 0 times [ 196] [ 1] / answers: 1 / hits: 88362 / 11 Years ago, wed, december 4, 2013, 12:00:00

I have the based64 encoded code of an image. Now I want to reduce the size and quality of the image. How can I do this in JavaScript or jQuery?

Resolve here is the working code : Index.php
Here is javascript code which worked form me

<html>

<head>

<title>JavaScript Image Resize</title>

<meta http-equiv=content-type content=text/html; charset=UTF-8>

<style>

body {

    font-size: 16px;

    font-family: Arial;

}



</style>

<script type=text/javascript>

function _resize(img, maxWidth, maxHeight) 

{

    var ratio = 1;

    var canvas = document.createElement(canvas);

    canvas.style.display=none;

    document.body.appendChild(canvas);



    var canvasCopy = document.createElement(canvas);

    canvasCopy.style.display=none;

    document.body.appendChild(canvasCopy);



    var ctx = canvas.getContext(2d);

    var copyContext = canvasCopy.getContext(2d);



        if(img.width > maxWidth)

                ratio = maxWidth / img.width;

        else if(img.height > maxHeight)

                ratio = maxHeight / img.height;



        canvasCopy.width = img.width;

        canvasCopy.height = img.height;

try {

        copyContext.drawImage(img, 0, 0);

} catch (e) { 

    document.getElementById('loader').style.display=none;

    alert(There was a problem - please reupload your image);

    return false;

}

        canvas.width = img.width * ratio;

        canvas.height = img.height * ratio;

        // the line to change

        //ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);

        // the method signature you are using is for slicing

        ctx.drawImage(canvasCopy, 0, 0, canvas.width, canvas.height);

        var dataURL = canvas.toDataURL(image/png);

        document.body.removeChild(canvas);

        document.body.removeChild(canvasCopy);



        return dataURL.replace(/^data:image/(png|jpg);base64,/, );





};



function resize() { 

    var photo = document.getElementById(photo);



    if(photo.files!=undefined){ 

        var loader = document.getElementById(loader);

        loader.style.display = inline;

        var file  = photo.files[0];

        document.getElementById(orig).value = file.fileSize;

        var preview = document.getElementById(preview);

        var r = new FileReader();

        r.onload = (function(previewImage) { 

            return function(e) { 

                var maxx = 500;

                var maxy = 500;

                previewImage.src = e.target.result; 

                var k = _resize(previewImage, maxx, maxy);

                if(k!=false) { 

                document.getElementById('base64').value= k;

                document.getElementById('upload').submit();

                } else {

                alert('problem - please attempt to upload again');

                }

            }; 

        })(preview);

        r.readAsDataURL(file);

    } else {

        alert(Seems your browser doesn't support resizing);

    }

    return false;

}



</script>

</head>

<body>



<div align=center>

<h2>Image Resize Demo</h2>



    <input type=file name=photo id=photo>

    <br> 

    <br>    

    <input type=button onClick=resize(); value=Resize>

    <img src=loader.gif id=loader />

    <img src= alt=Image preview id=preview>

   <form name=upload id=upload method='post' action='show.php'>

        <textarea name=base64 id=base64 rows='10' cols='90'></textarea>

        <input type=hidden id=orig name=orig value=/>

   </form>

</div>



</body>

</html>

Show.php file

<html>

<head>

<title>JavaScript file upload</title>

<meta http-equiv=content-type content=text/html; charset=UTF-8>

<style>

body {

    font-size: 16px;

    font-family: Arial;

}

#preview {

    display:none;

}

#base64 {

    display:none;

}

</style>

</head>

<body>

<?php

$base64size = strlen($_POST['base64']);

$f = base64_decode($_POST['base64']);

$name = microtime(true)..png;

file_put_contents(./$name, $f);

#header(Content-type: image/png);

#header(Content-Disposition: attachment; filename=shrunk.png);

#echo $f;

#die();

?>

<h2>Shrunk file</h2>

<p>Original file was: <?=$_POST['orig'];?> bytes</p>

<p>Transmitted size was: <?=$base64size;?> bytes (due to base64)</p>

<p>New file is: <?=filesize(./$name);?> bytes</p>

<p><img src=<?=$name;?>/></p>

</body>

</html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

judydestiniem

Add To Favorites

Follow

Total Points: 215

Total Questions: 109

Total Answers: 86

Location: Indonesia

Member since Wed, Jul 7, 2021

3 Years ago

answered 11 Years ago karivictoriab · Accepted Answer

You can use canvas, put image into it, scale it and get image src with new base64 code.

Here's the function doing that, it returns promise object, as image needs to be loaded (cached) first before drawing canvas out of it and getting its encoded src.

function resizeBase64Img(base64, 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;base64, + base64).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();    

}

Can be used like this:

resizeBase64Img(oldBase64, 100, 100).then(function(newImg){

    $(body).append(newImg);

});

here's the jsfiddle