Lassen Sie das Bild in einen beliebigen Winkel drehen und führen Sie die Verwendung des JQuery-Plug-Ins ein

Fügen Sie die Datei jquery.rotate.js unten ein und verwenden Sie dann $("selector").rotate(angle);, um in einen beliebigen Winkel zu drehen,
Zum Beispiel $("#rotate-image"). rotation(45 );Fügen Sie diesen Satz in $(document).ready(function(){ });
ein, um das Bild mit der ID rotation-image um 45 Grad zu drehen.

Es scheint jedoch, dass es in Chrome immer nicht angezeigt wird.
Leider habe ich nach zwei Stunden Suche herausgefunden, dass Chrome zu schwierig ist, um die Länge und Breite des Bildes zu ermitteln.
Die Lösung besteht darin, $("#rotate-image").rotate(45); in
$(window).load(function(){ }); einzufügen, da das Bild in Chrome ist nicht geladen, wenn die Anweisung in $(document).ready(function(){ }); ausgeführt wird, was ein Betrug ist.

Außerdem ist es bequemer, um 90 Grad nach rechts und 90 Grad nach links zu drehen, indem man jeweils $("selector").rotateRight() und $("selector").rotateLeft() aufruft .

jquery.rotate.js:

jQuery.fn.rotate = function(angle,whence) { 
var p = this.get(0); 
// we store the angle inside the image tag for persistence 
if (!whence) { 
p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360; 
} else { 
p.angle = angle; 
} 
if (p.angle >= 0) { 
var rotation = Math.PI * p.angle / 180; 
} else { 
var rotation = Math.PI * (360+p.angle) / 180; 
} 
var costheta = Math.round(Math.cos(rotation) * 1000) / 1000; 
var sintheta = Math.round(Math.sin(rotation) * 1000) / 1000; 
//alert(costheta+","+sintheta); 
if (document.all && !window.opera) { 
var canvas = document.createElement('img'); 
canvas.src = p.src; 
canvas.height = p.height; 
canvas.width = p.width; 
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')"; 
} else { 
var canvas = document.createElement('canvas'); 
if (!p.oImage) { 
canvas.oImage = new Image(); 
canvas.oImage.src = p.src; 
} else { 
canvas.oImage = p.oImage; 
} 
canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height); 
canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width); 
var context = canvas.getContext('2d'); 
context.save(); 
if (rotation <= Math.PI/2) { 
context.translate(sintheta*canvas.oImage.height,0); 
} else if (rotation <= Math.PI) { 
context.translate(canvas.width,-costheta*canvas.oImage.height); 
} else if (rotation <= 1.5*Math.PI) { 
context.translate(-costheta*canvas.oImage.width,canvas.height); 
} else { 
context.translate(0,-sintheta*canvas.oImage.width); 
} 
context.rotate(rotation); 
context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height); 
context.restore(); 
} 
canvas.id = p.id; 
canvas.angle = p.angle; 
p.parentNode.replaceChild(canvas, p); 
} 
jQuery.fn.rotateRight = function(angle) { 
this.rotate(angle==undefined?90:angle); 
} 
jQuery.fn.rotateLeft = function(angle) { 
this.rotate(angle==undefined?-90:-angle); 
}

Weitere verwandte Artikel zum Drehen von Bildern in einen beliebigen Winkel und zur Verwendung des JQuery-Plug-Ins finden Sie im PHP-Chinesisch Webseite!