(js/jquery) Ein Bild in FF/Saf/Chrome ohne Leinwand drehen ODER ein Leinwandbild zoomen

Question

Ich arbeite an einem Projekt, bei dem ich nach den Wünschen des Benutzers rotieren und Bilder erstellen muss und raus.

Mit jquery.rotate.1-1.js im IE funktioniert alles perfekt (wie selten), da MS ein eigenes Rotationswerkzeug (progid: DXImageTransform) geschrieben hat, so dass der img gedreht und dann als Bild gespeichert wird. Aber wenn ich den JS betrachte, sehe ich, dass wenn ein Browser kein IE ist, ein Canvas gerendert wird (ich habe nie wirklich Canvas verwendet), was bedeutet, dass wenn das Canvas mit dem gedrehten Bild gezeichnet wird, ich das Bild nicht vergrößern kann verstehe es richtig, die Leinwand enthält nicht wirklich die Information.

Ich habe auch versucht, CSS3 Transformationen mit meinem nicht-IE-Browser und alles richtig drehen, aber wenn ich versuche und zoomen ist es jetzt nicht existente div Größen.

Gibt es irgendwelche Tools, die es erlauben, auf der Client-Seite zu drehen und dann zu zoomen? ODER Gibt es eine Möglichkeit, ein IMG-Tag in FF/Chrome/Saf & zu rotieren, um das Bild nach der Rotation zu erhalten?

Answer 1

Es gibt einige transform CSS-Version in allen aktuellen Webbrowsern. Ich verwende die folgenden Stile für Rotation:

.rotate 
{ 
    -webkit-transform: rotate(-90deg); /* Safari 3.1+, Chrome */ 
    -moz-transform: rotate(-90deg);  /* Firefox 3.5+ */ 
    -o-transform: rotate(-90deg);   /* Opera starting with 10.50+ */ 
    -ms-transform: rotate(-90deg);  /* IE9 */ 
} 
.rotateOldIE 
{ 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* IE8 */ 
    zoom: 1; 
} 

Wenn Sie für die CSS-Stile zu suchen finden Sie ausführliche Beschreibung von jedem von den oben genannten CSS-Stilen und Sie werden viele Beispiele finden.

Answer 2

Sie können dieses Tool überprüfen [http://css3.mikeplate.com/][1]

[1]: http://css3.mikeplate.com/ es erlaubt Ihnen, alle Transformation zu tun und sie schnell zu sehen, so dass Sie testen können, es auf verschiedenen Browsern, ermöglicht es zomming und rotieren

Answer 3

Versuchen Sie, Canvas ToDataURL zu verwenden. Die einzige Einschränkung ist, dass das Bild auf der gleichen Seite des laufenden Skripts sein muss.

Siehe: http://jsfiddle.net/ghostoy/ZKj9V/

Answer 4

Auf Kosten eine andere Bibliothek zu Ihrer Anwendung, einschließlich, dies leicht mit Raphaël getan werden kann (http://raphaeljs.com/). Es wird VML auf IE < 9 und SVG auf anderen verwenden.

var paper = Raphael(width, height), 
    image = paper.image(src, x, y, w, h); 

image.rotate(...); 
image.scale(...); 

Answer 5

Drehen und Zoom können in Leinwand erfolgen:

drawImage Methode kann mit drei verschiedenen Arten von Argumenten aufgerufen werden:

drawImage(image, dx, dy) 
drawImage(image, dx, dy, dw, dh) 
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 

Jede dieser drei nehmen kann entweder eine HTMLImageElement, ein HTMLCanvasElement oder ein HTMLVideoElement für das Bildargument.

context . drawImage(image, dx, dy) 
context . drawImage(image, dx, dy, dw, dh) 
context . drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 

Zeichnet das angegebene Bild auf die Zeichenfläche. Die Argumente werden wie folgt interpretiert:

Dies zusammen mit

context . rotate(angle) 

kann zur Rotation und Zoomen verwendet werden.