直リン画像回転くん.user.js for Google Chrome

直リン画像回転くん.user.js

// ==UserScript==

// @name		直リン画像回転くん
// @namespace	http://ethertank.jp
// @version		0.2
// @description	直リン画像回転くん
// @include		*.jpg
// @include		*.jpeg
// @include		*.png
// @include		*.gif
// @include		*.woff
// @include		*.bmp
// @include		*.tiff
// @copyright	2013+, ethertank

// ==/UserScript==
;(function() {
    var DOC = document,
        BODY = DOC.body,
        IMG = DOC.images[0],
        BUTTONS = "",
        H = ["-90°", "90°", "180°", "0°"],
        i = 0;
    
    for(i = 0; i < 4; ++i) {
        BUTTONS += '<button id="b' + i + '">' + H[i] + '<\/button>';
    }
    
    BUTTONS = '<div id="buttons" style="z-index:2;position:fixed;top:0;left:0;">' +
        BUTTONS +
        '</div>';
    BODY.style.marginTop ="1.75em";
    BODY.insertAdjacentHTML("afterbegin", BUTTONS);
    
    DOC.getElementById("b0").addEventListener("click", function() {
        IMG.style.webkitTransformOrigin = "100% 0";
        IMG.style.webkitTransform = "rotate(-90deg) translate(0, -" + IMG.width + "px)";        
    }, false);
    
    DOC.getElementById("b1").addEventListener("click", function() {
        IMG.style.webkitTransformOrigin = "0 0";
        IMG.style.webkitTransform = "rotate(90deg) translate(0, -" + IMG.height + "px)";        
    }, false);
    
    DOC.getElementById("b2").addEventListener("click", function() {
        IMG.style.webkitTransformOrigin = "50% 50%";
        IMG.style.webkitTransform = "rotate(180deg)";        
    }, false);
    
    DOC.getElementById("b3").addEventListener("click", function() {
        IMG.style.webkitTransform = "none";        
    }, false);

	function fix() {
        var transform = IMG.style.webkitTransform.replace(/rotate\(/,"").replace(/deg.*/, "");
        //console.log(transform);
        switch (transform) {
            case "-90":
                IMG.style.webkitTransform = "rotate(-90deg) translate(0, -" + IMG.width + "px)";        
                break;
            case "90":
                IMG.style.webkitTransform = "rotate(90deg) translate(0, -" + IMG.height + "px)";
                break;
            default:
                break;
        }
    }
    
    IMG.addEventListener("click", fix, false);
    window.addEventListener("resize", fix, false);
})();

奇数幅の時に 1px ずれる。
相対的な回転もあった方が良い? (+10度 ...etc.) その場合三角関数が要る。計算めんどいけど出来たらすっきりするかも。
そもそも lightbox の横長画像を縦に回転したかったのがきっかけなのになんで直リン画像用にしたのか。
lightbox のそれは img 要素 じゃなくて背景なので、やる場合、ちとめんどい。亜種対応も考えるとあんまり現実的ではない。
カラーフィルターとか、多機能。