Resize a Base-64 image in JavaScript without using canvas

by

A way to avoid the main HTML to be affected is to create an off-screen canvas that is kept out of the DOM-tree.

This will provide a bitmap buffer and native compiled code to encode the image data. It is straight forward to do:

function imageToDataUri(img, width, height) {

    // create an off-screen canvas
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');

    // set its dimension to target size
    canvas.width = width;
    canvas.height = height;

    // draw source image into the off-screen canvas:
    ctx.drawImage(img, 0, 0, width, height);

    // encode image to data-uri with base64 version of compressed image
    return canvas.toDataURL();
}

If you want to produce a different format than PNG (default) just specify the type like this:

return canvas.toDataURL('image/jpeg', quality);  // quality = [0.0, 1.0]

Worth to note that CORS restrictions applies to toDataURL().

If your app is giving only base64 encoded images (I assume they are data-uri’s with base64 data?) then you need to “load” the image first:

var img = new Image;

img.onload = resizeImage;
img.src = originalDataUriHere;

function resizeImage() {
    var newDataUri = imageToDataUri(this, targetWidth, targetHeight);
    // continue from here...
}

If the source is pure base-64 string simply add a header to it to make it a data-uri:

function base64ToDataUri(base64) {
    return 'data:image/png;base64,' + base64;
}

Just replace the image/png part with the type the base64 string represents (ie. make it an optional argument).

More Related Contents:

  1. How to clear the canvas for redrawing
  2. Real mouse position in canvas
  3. how to draw smooth curve through N points using javascript HTML5 canvas?
  4. HTML5 Canvas Resize (Downscale) Image High Quality?
  5. Resize image with javascript canvas (smoothly)
  6. Why is requestAnimationFrame better than setInterval or setTimeout
  7. Pdf.js: rendering a pdf file using a base64 file source instead of url
  8. Firefox error rendering an SVG image to HTML5 canvas with drawImage
  9. Capture frames from video with HTML5 and JavaScript
  10. How can I stop the alpha-premultiplication with canvas imageData?
  11. Draw border around nontransparent part of image on canvas
  12. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  13. Load image from url and draw to HTML5 Canvas
  14. Canvas image masking / overlapping
  15. Save canvas as jpg to desktop [duplicate]
  16. How to pixelate an image with canvas and javascript
  17. HTML canvas – drawing disappear on resizing
  18. Draw HTML5/Javascript Canvas Path in Time
  19. Saving canvas to image via canvas.toDataURL results in black rectangle
  20. Convert HTML5 Canvas into File to be uploaded?
  21. canvas getContext(“2d”) returns null
  22. clearing circular regions from HTML5 Canvas
  23. Preventing Canvas Clear when Resizing Window
  24. How to detect shape on a transparent canvas?
  25. HTML5 Canvas API – formatting individual words with italics
  26. How to implement SVG’s preserveAspectRatio=”xMinYMin slice” for canvas drawImage method.
  27. How can I animate the drawing of text on a web page?
  28. Scaling an image to fit on canvas
  29. True Isometric Projection with HTML5 Canvas
  30. HTML5 Canvas: Get Event when drawing is finished

Leave a Comment