Comment faire pivoter une image et l'enregistrer

Question

Dans mon application, j'ai une image dans un div, un bouton.

Je veux faire pivoter l'image affichée et enregistrer l'image pivotée lorsque je clique sur le bouton en utilisant jquery.

J'ai déjà utilisé le code :

http://code.google.com/p/jquery-rotate/

et du code jquery :

$(function() {                                    // doc ready
                var rotation = 0;                             // variable to do rotation with
                $("#img").click(function() {
                    rotation = (rotation + 45) % 360; // the mod 360 probably isn't needed
                    $("#cropbox").rotate(rotation);
                });
            });

code html :

<img src="demo_files/pool.jpg" id="cropbox" />
<input type="button" id="img" name="img" value="click" />

Quand j'utilise le code ci-dessus, il y a deux images, l'une est l'ancienne image et l'autre est l'image tournée.

Ici, je veux faire tourner la même image et n'afficher que l'image tournée, et enregistrer l'image tournée dans un répertoire.

Comment puis-je faire cela en utilisant jquery ? Si ce n'est pas possible avec jquery alors comment puis-je le faire avec php/ajax ?

Answer 1

La seule solution Javascript basée sur celle de nagarjun daram utilisant une image et un canevas.

Fonctionne avec des données URL, échantillon complet de travail : https://jsfiddle.net/f8d46umz/7/

Attention, les images d'origine croisée peuvent ne pas fonctionner, du moins sur le violon.

Code de rotation principal :

function rotateDegrees(degrees, imgSrc, callback){
  var canvasElement = document.getElementById('canvas'); //or create
  if (!canvasElement || !canvasElement.getContext) {
    return showUnsupported();
  }
  //We use an additional img to get the sizes
  var img = document.getElementById('tmpImg'); //or create
  img.onload = function(){
      var cw = img.width,
        ch = img.height,
        cx = 0,
        cy = 0;
      switch (degrees) {
        case 90:
          cw = img.height;
          ch = img.width;
          cy = img.height * (-1);
          break;
        case 180:
          cx = img.width * (-1);
          cy = img.height * (-1);
          break;
        case 270:
          cw = img.height;
          ch = img.width;
          cx = img.width * (-1);
          break;
      }
      var context = canvas.getContext('2d');
      canvas.setAttribute('width', cw);
      canvas.setAttribute('height', ch);
      context.rotate(degrees * Math.PI / 180);
      context.drawImage(img, cx, cy);
      var result = canvas.toDataURL();
      callback && callback(result);
  }
  img.src = imgSrc;
}

Notez le callback pour attendre le chargement de l'image dans le fichier temporaire img