Menu
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> 
995
Answer: Use the JavaScript width and height property You can use either width or height JavaScript property to proportionally increase and decrease the dimension of an image like zoom-in and zoom-out feature.
Encoded size increase So, three 8-bits bytes of the input string/binary file (3×8 bits = 24 bits) can be represented by four 6-bit Base64 digits (4×6 = 24 bits). This means that the Base64 version of a string or file will be at least 133% the size of its source (a ~33% increase).
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
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
