Image rotation captchaa

by flaiming

HTML

<script src="http://flaiming.draci.info/temp/test.jpg"></script>
<canvas id="drawing_area" width="400" height="400" style="border: 1px solid green;"></canvas><br />
Uhel: <span id="angle"></span><br />
<div id="result"></div>

JavaScript

var canvas;
var ctx;
var WIDTH = 400;
var HEIGHT = 400;
var TOLERANCE = 15;
var dragok = false;
var angleImg = getInitialAngle(TOLERANCE);
var startAngle = angleImg;
var oldAngleImg = angleImg;
var angleCur = 0;

var img = new Image();

function getInitialAngle(tolerance) {
    var angle = Math.random()*(360-tolerance*2)+1;
    return (angle + tolerance) % 360;
}

function clear() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
    canvas =  document.getElementById("drawing_area");
    ctx = canvas.getContext('2d');
    img.src = 'http://flaiming.draci.info/temp/test.jpg';  

    return setInterval(draw, 50);
}

function draw() {
    clear();
    
    ctx.save();
    
    ctx.translate(canvas.width/2, canvas.height/2); 
    
    ctx.rotate(angleImg/(180/Math.PI));
    //ctx.translate( -(canvas.width/2) , -(canvas.height/2) );  
    
    ctx.drawImage(img, -img.width/2, -img.height/2);  
    
    ctx.restore(); 
    
    //vykreslit stred
    ctx.strokeStyle = "white";
    ctx.beginPath();
    ctx.arc(canvas.width/2, canvas.height/2, img.width/2 + 20, 0, Math.PI * 2);
    ctx.lineWidth = 40;
    ctx.stroke(); 
}

function getAngle(x,y) {
    var center = {'x': canvas.width/2, 'y': canvas.height/2};
    //alert('x: '+ (x-center.x) + ', y: '+ (center.y-y) );
    var angle =  Math.abs( Math.atan((center.y-y) / (x-center.x)) * (180/Math.PI) );
    if (center.x < x && center.y > y) //vpravo nahore
        angle = 90 - angle;
    else if (center.x < x && center.y <= y) //vpravo dole
        angle = 90 + Math.abs(angle);
    else if (center.x >= x && center.y <= y) //vlevo dole
        angle = 270 - angle;
    else if (center.x >= x && center.y > y) //vlevo nahore
        angle = 270 + Math.abs(angle); 
    return angle;
}

function myMove(e){
    if (dragok){
        x = e.pageX - canvas.offsetLeft;
        y = e.pageY - canvas.offsetTop;
        angle = getAngle(x,y); 
        if (angle != angleCur) {
            angleImg += angle - angleCur;
           ...