Rotate base64 image (Javascript)

rotate.js

function rotate(srcBase64, degrees, callback) {
  const canvas = document.createElement('canvas');
  const ctx    = canvas.getContext('2d');
  const image  = new Image();

  image.onload = function () {
    canvas.width  = degrees % 180 === 0 ? image.width : image.height;
    canvas.height = degrees % 180 === 0 ? image.height : image.width;

    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(degrees * Math.PI / 180);
    ctx.drawImage(image, image.width / -2, image.height / -2);

    callback(canvas.toDataURL());
  };

  image.src = srcBase64;
}

// Usage:
const img = document.getElementById('image');

rotate(img.attributes.src.value, 90, function(resultBase64) {
  img.setAttribute('src', resultBase64);
});

Hi,

this is working fine, except, that it is cropping the edges which protrude, when rotation for example 22.5 or 45 degrees.

Do you have any idea, what I have to change, to prevent this?

Hi @Bart1909

Uuh, i only intended this to be used with [90, 180, 270] degrees. That's why the canvas size is calculated very naively. You would need the canvas.width and canvas.height to match your image's diagonal lengths.

Thanks

works like a charm!

thanks

nice! It solved my problem.

Here's an async version of this function that uses HTMLImageElement.decode()

From the docs:

This can be used to initiate loading of the image prior to attaching it to an element in the DOM (or adding it to the DOM as a new element), so that the image can be rendered immediately upon being added to the DOM. This, in turn, prevents the rendering of the next frame after adding the image to the DOM from causing a delay while the image loads.

Thank you!
I just needed these 2 lines:
canvas.width = degrees % 180 === 0 ? image.width : image.height;
canvas.height = degrees % 180 === 0 ? image.height : image.width;

thank you.

Thank you for this 👍