Resize a Base-64 Image in JavaScript Without Using Canvas

Resize image before sending to BASE64 (without using img element)

If your target browser supports the file input attribute, then you can use URL.createObjectURL to create an image source that you can manipulate with the canvas element.

Given a maximum desired size of maxW x maxH you can calculate the scaling factor that will resize the image while maintaining the original aspect ratio like this:

var scale=Math.min((maxW/img.width),(maxH/img.height));

Here's example code and a Demo.

Note that the demo does draw the image to the canvas, but you could just as easily substitute an in-memory canvas with document.createElement('canvas').

var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");var cw=canvas.width;var ch=canvas.height;
// limit the image to 150x100 maximum sizevar maxW=150;var maxH=100;
var input = document.getElementById('input');input.addEventListener('change', handleFiles);
function handleFiles(e) {  var img = new Image;  img.onload = function() {    var iw=img.width;    var ih=img.height;    var scale=Math.min((maxW/iw),(maxH/ih));    var iwScaled=iw*scale;    var ihScaled=ih*scale;    canvas.width=iwScaled;    canvas.height=ihScaled;    ctx.drawImage(img,0,0,iwScaled,ihScaled);    alert(canvas.toDataURL());  }  img.src = URL.createObjectURL(e.target.files[0]);}

body{ background-color: ivory; }#canvas{border:1px solid red;}

<input type="file" id="input"/><br><canvas id="canvas" width=300 height=300></canvas>

Resizing a image with Javascript without rendering a canvas on the DOM

you get a Base-64 image when load is complete.

function resizeImage(file) {      var canvas = document.createElement('canvas');      var context = canvas.getContext('2d');      var maxW = 400;      var maxH = 400;      var img = document.createElement('img');
      img.onload = function() {        var iw = img.width;        var ih = img.height;        var scale = Math.min((maxW / iw), (maxH / ih));        var iwScaled = iw * scale;        var ihScaled = ih * scale;        canvas.width = iwScaled;        canvas.height = ihScaled;        context.drawImage(img, 0, 0, iwScaled, ihScaled);        console.log(canvas.toDataURL());        document.body.innerHTML+=canvas.toDataURL();      }      img.src = URL.createObjectURL(file);    }    document.getElementById("file").addEventListener("change", function() {      file = file.files[0];      if (file) {        resizeImage(file);      }    });

<input id="file" type="file">

What is more efficiente resize an image and the convert to base64 or convert to base64 and then resize it? (node.js - no canvas)

As it's have been commented: even if a image processing lib allows you to pass a base64 encoded version of an image and work on it directly, behind the scenes it will always decode the base64 into an image format, do the processing (resize) and then probably encode it again, so starting with b64 is certainly slower.

Answering the original question - in terms of fast and efficiency is better:

Resize the image (using sharp or a similar npm packet
Convert the resized image to base64

how to resize base64 image in angular

Add this helper function outside of the given component:

function compressImage(src, newX, newY) {
  return new Promise((res, rej) => {
    const img = new Image();
    img.src = src;
    img.onload = () => {
      const elem = document.createElement('canvas');
      elem.width = newX;
      elem.height = newY;
      const ctx = elem.getContext('2d');
      ctx.drawImage(img, 0, 0, newX, newY);
      const data = ctx.canvas.toDataURL();
      res(data);
    }
    img.onerror = error => rej(error);
  })
}

Then call like so:

compressImage(base64, 100, 100).then(compressed => {
  this.resizedBase64 = compressed;
})

Resize a Base-64 Image in JavaScript Without Using Canvas

Resize image before sending to BASE64 (without using img element)

Resizing a image with Javascript without rendering a canvas on the DOM

What is more efficiente resize an image and the convert to base64 or convert to base64 and then resize it? (node.js - no canvas)

how to resize base64 image in angular

Related Topics

Leave a reply