Faire pivoter l'image de 90 degrés sur HTML5 Canvas

J'ai du mal à la rotation d'une image à l'aide d'un HTML5 canvas. Je suppose que j'ai juste les calculs faux, et serais reconnaissant de toute aide dans l'obtention de ce droit.

Sur un appareil mobile, je suis à la capture d'un utilisateur signature sur un 150px par 558px toile. Je suis que d'essayer de créer un 558px par 150px de l'image qui est juste la capture de signature, rotation de 90 degrés. Ci-dessous est un extrait du code que j'ai actuellement. Comme vous pouvez probablement le deviner, je n'ai pas une bonne adhérence sur les mathématiques qui vont dans cette. Je crois que j'ai la procédure correcte, mais pas les chiffres.

Ce que j'essaie de faire c'est:
1) définir le centre de la toile à la moyenne, la compensation par la hauteur et la largeur de mon image
2) tournez la toile de 90 degrés
3) dessiner l'image
4) traduire le dos toile.

EDIT: Voici un JSFiddle: http://jsfiddle.net/x9FyK/

    var $signature = $("#signature");
    var signatureData = $signature.jSignature("getData");

    console.log(signatureData);

    var img= new Image();
    img.onload = function() {
        var rotationCanvas = document.createElement('canvas');
        rotationCanvas.width = img.height;
        rotationCanvas.height = img.width;

        var context = rotationCanvas.getContext("2d");
        context.translate((rotationCanvas.width/2) - (img.width/2), -(rotationCanvas.height/2) - img.height/4);

        context.rotate(Math.PI/2);
        context.drawImage(img,0,0);
        context.translate(-((rotationCanvas.width/2) - (img.width/2)), -(-(rotationCanvas.height/2) - img.height/4));
        var rotatedData = rotationCanvas.toDataURL();

        ...Handling rotated data here

    };
    img.src = signatureData;

Si je peux donner plus d'informations, s'il vous plaît laissez-moi savoir.

Merci d'avance pour votre aide,

pouvez-vous poster un jsfiddle lien?
J'ai édité le post avec le violon: jsfiddle.net/x9FyK

OriginalL'auteur user3582127 | 2014-04-28

  1. 11

    Il y a plusieurs façons de la réinitialisation d'un transformé (traduit+rotation) en toile de retour à son état d'origine.

    Faible Pointeur de la réponse est à l'aide de contexte.enregistrer pour enregistrer le contexte est original non transformée état et à l'aide du contexte.restaurer pour restaurer le contexte de son état d'origine après le dessin est fait.

    De l'autre il pour annuler votre transformations dans l'ordre inverse dans lequel elles ont été exécutées.

    Notez également que le contexte.traduire seront en fait de déplacer la toile d'origine au centre de la toile. Puisque les images sont tirés de leur haut à gauche (pas de leur centre de), vous devez décaler drawImage par la moitié de la largeur de l'image et de la hauteur si vous voulez que l'image sera centrée dans la toile.

    Ici et exemple: http://jsfiddle.net/m1erickson/EQx8V/

    //translate to center-canvas 
//the origin [0,0] is now center-canvas

ctx.translate(canvas.width/2,canvas.height/2);

//roate the canvas by +90% (==Math.PI/2)

ctx.rotate(Math.PI/2);

//draw the signature
//since images draw from top-left offset the draw by 1/2 width & height

ctx.drawImage(img,-img.width/2,-img.height/2);

//un-rotate the canvas by -90% (== -Math.PI/2)

ctx.rotate(-Math.PI/2);

//un-translate the canvas back to origin==top-left canvas

ctx.translate(-canvas.width/2,-canvas.height/2);

//testing...just draw a rect top-left

ctx.fillRect(0,0,25,10);

    Faire pivoter l'image de 90 degrés sur HTML5 Canvas

    Merci beaucoup!!!!!!!!!
    Pensez-vous que si nous le mettre sur une case, il va passer? 😮 Oh, une troisième façon de réinitialiser transforme consiste à utiliser setTransform (abs. les valeurs).
    LOL--Avec autant de dette nationale comme nous l'avons peut pas clair! Et vous avez raison, comme d'habitude sur l'utilisation de setTransform pour réinitialiser appliquer des transformations.

    OriginalL'auteur markE

  2. 4

    ce sera sûrement vous aider >>HTML5 Canvas Rotation de l'Image 🙂

    utilisation des js fonction pour dessiner votre toile :

     function drawRotated(degrees){
     contex_var.clearRect(0,0,canvas.width,canvas.height);
     contex_var.save();
     contex_var(canvas.width/2,canvas.height/2);
     contex_var.rotate(degrees*Math.PI/180);
     contex_var.drawImage(image,-image.width/2,-image.width/2);
     contex_var.restore();
          }

    De lui donner un angle à toute buttonclick fonction:

    $("#clockwise").click(function(){ 
    angleInDegrees+=30;
    drawRotated(angleInDegrees);
});
    Je ne suis pas sûr que je comprends ce que tu veux. Aussi loin que je peux dire, et s'il vous plaît corrigez-moi ici si je me trompe, je suis en utilisant le contexte.traduire et le contexte.faites tourner
    voir ci-dessus la modifier
    Je vais donner un coup de feu, merci

    OriginalL'auteur Low-Pointer