Rotate images on browser Javascript by degrees
(function() {
function createCanvas() {
var canvas = document.createElement('canvas');
canvas.style.position = 'fixed';
canvas.style.left = '-5000px';
canvas.style.maxWidth = '3000px';
document.body.appendChild(canvas);
return canvas;
}
window.pwgiImagemRotateImg = function(img, deg) {
var canvas,
context;
if (! img.dataset.original) {
img.dataset.original = img.src;
}
var cloneImg = new Image();
cloneImg.crossOrigin= 'anonymous';
cloneImg.addEventListener('load', function() {
canvas = createCanvas();
context = canvas.getContext('2d');
canvas.width = this.height;
canvas.height = this.width;
context.clearRect(0, 0, this.width, this.height);
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(deg*Math.PI/180);
context.drawImage(this, -this.width/2, -this.height/2);
context.restore();
img.src = canvas.toDataURL('image/jpeg');
img.dataset.rotated = deg;
canvas.parentElement.removeChild(canvas);
cloneImg = null;
});
cloneImg.src = img.dataset.original;
};
}());
Written by ms_bit
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Javascript rotate degrees image
Authors
Related Tags
#javascript rotate degrees image
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#