Last Updated: August 31, 2018
·
164
· ms_bit

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;
    };

}());