Skip to content

Instantly share code, notes, and snippets.

@Zyndoras
Last active April 29, 2024 11:41
Show Gist options
  • Star 17 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • 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);
});
@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