Skip to content

Instantly share code, notes, and snippets.

@Zyndoras
Last active April 29, 2024 11:41
Show Gist options
  • Save Zyndoras/6897abdf53adbedf02564808aaab94db to your computer and use it in GitHub Desktop.
Save Zyndoras/6897abdf53adbedf02564808aaab94db to your computer and use it in GitHub Desktop.
Rotate base64 image (Javascript)
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);
});
@Davi9130
Copy link

Davi9130 commented Jun 3, 2022

Thanks

@acetilholin
Copy link

works like a charm!

@tanihuang
Copy link

thanks

@cnhjp
Copy link

cnhjp commented Sep 23, 2022

nice! It solved my problem.

@sh-ravan
Copy link

sh-ravan commented Dec 21, 2022

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.

@ArcherArash
Copy link

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;

@apipkurniawan
Copy link

thank you.

@omedinapr
Copy link

Thank you for this 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment