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

by

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

More Related Contents:

  1. How can I execute each switch statement case in JS?
  2. Uncaught ReferenceError: $ is not defined?
  3. Convert XML to JSON (and back) using Javascript
  4. Is there a case insensitive jQuery :contains selector?
  5. jQuery XML error ‘ No ‘Access-Control-Allow-Origin’ header is present on the requested resource.’
  6. Regex to replace multiple spaces with a single space
  7. How to detect Ctrl+V, Ctrl+C using JavaScript?
  8. detect back button click in browser [duplicate]
  9. Jquery load() only working in firefox?
  10. Making custom right-click context menus for my web-app
  11. How to run two jQuery animations simultaneously?
  12. Setting query string using Fetch GET request
  13. Uncaught SyntaxError: Unexpected token with JSON.parse
  14. Hide select option in IE using jQuery
  15. Get query string parameters url values with jQuery / Javascript (querystring)
  16. How to have jQuery restrict file types on upload?
  17. Drop-down box dependent on the option selected in another drop-down box
  18. jQuery get values of checked checkboxes into array
  19. Displaying pdf from arraybuffer
  20. Programmatically focus on next input field in mobile safari
  21. How to build simple tabs with jQuery?
  22. jQuery function not binding to newly added dom elements
  23. Is it possible to append a div inside an SVG element? [duplicate]
  24. Why my $.ajax showing “preflight is invalid redirect error”?
  25. How can I get all a form’s values that would be submitted without submitting [duplicate]
  26. Cancel single image request in html5 browsers
  27. Using .after() to add html closing and open tags
  28. Is there a better jQuery solution to this.form.submit();?
  29. $.post throwing “Illegal invocation “
  30. Google’s Places API and JQuery request – Origin http://localhost is not allowed by Access-Control-Allow-Origin

Leave a Comment