Resizing Base64 Images

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;
})

How to resize a base64 image to occupy less?

To make it smaller you have to get rid of information. Do something like JPEG, it will focus on removing information that is less relevant, many times a JPEG image looks just fine but is like 10 times smaller.

How to resize file and then convert to base64?

The ImagePicker library has two properties for resizing the image maxHeight and maxWidth

Here's an example:

var image = await ImagePicker.pickImage(
              source: ImageSource.camera,
              maxHeight: 150.0,
              maxWidth: 150.0,
          );

---

Related Topics