How to rotate a base 64 image by X degrees and return new base64 image with JavaScript?

Sometimes, we want to rotate a base 64 image by X degrees and return new base64 image with JavaScript.

In this article, we’ll look at how to rotate a base 64 image by X degrees and return new base64 image with JavaScript.

How to rotate a base 64 image by X degrees and return new base64 image with JavaScript?

To rotate a base 64 image by X degrees and return new base64 image with JavaScript, we can put the image in a canvas.

Then we do the rotation in the canvas and return the image.

For instance, we write:

<img>

to add an img element.

Then we write:

const img = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAARElEQVR42u3PMREAAAgEIE1u9DeDqwcN6FSmHmgRERERERERERERERERERERERERERERERERERERERERERERERERkYsFbE58nZm0+8AAAAAASUVORK5CYII='

const rotateBase64Image = (base64data) => {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const image = new Image();
  image.src = base64data;
  return new Promise(resolve => {
    image.onload = () => {
      ctx.translate(image.width, image.height);
      ctx.rotate(45 * Math.PI / 180);
      ctx.drawImage(image, 0, 0);
      resolve(canvas.toDataURL())
    };
  })
}

(async () => {
  const rotatedImg = await rotateBase64Image(img)
  const imgEl = document.querySelector('img')
  imgEl.src = rotatedImg
})()

to define the rotateBase64Image function to rotate the base64data image by 45 degrees.

In it, we create a canvas with `createElement.

Then we get its context with getContext.

Next, we create a new Image instance and set its src property to base64data to load the image.

Then when the image is loaded, image.onload is run.

In onload, we rotate the image with rotate.

And we draw the rotated image with drawImage.

Finally, we call resolve with the base64 string version of the rotated image that we get from canvas.toDataURL.

Next, in the async function, we get call rotateBaseImage to rotate img.

Then we select the img element with querySelector.

And then we set imgEl.src to the rotateImg string.

Now we see the pink square rotated 45 degrees.

Conclusion

To rotate a base 64 image by X degrees and return new base64 image with JavaScript, we can put the image in a canvas.

Then we do the rotation in the canvas and return the image.