1. Accueil
  2. Question et réponse
  3. Rotation et recadrage combinés de l'image dans jQuery

Rotation et recadrage combinés de l'image dans jQuery

2009-09-17 5 views
6

Nous avons actuellement un système de rognage des images qui utilise jCrop sur le frontend, et System.Drawing dans .NET sur le backend - cela fonctionne très bien, mais maintenant nous devons introduire la rotation de l'image. Seuls les angles de 90 degrés sont nécessaires, et jQuery.Rotate fonctionne bien, mais je voudrais combiner ces deux plugins jQuery gracieusement. Avez-vous de l'expérience dans ce domaine? Existe-t-il des solutions «shake & bake»?Rotation et recadrage combinés de l'image dans jQuery

Source

2009-09-17 Daniel Schierbeck

+0

Pouvez-vous fournir plus de détails sur ce que vous essayez d'accomplir? Voulez-vous que l'utilisateur définisse un rectangle de recadrage et définisse un angle de rotation en même temps? Quel est le résultat visuel exact que vous essayez d'atteindre? –

+0

Salut Ates, J'essaie d'avoir une seule vue de l'image, avec une barre d'outils qui permet de tourner et de recadrer l'image en une seule étape combinée. –

Répondre

0

Je pense que jQuery pipe doublure est la solution pour un plugin jQuery

par exemple:

$("image").rotate(foo).crop(foo);

Source

2009-09-17 11:15:56

+1

J'ai peur que cela ne fonctionne pas. Les deux jCrop et jQuery-Rotate apportent des changements substantiels au DOM; ils ont besoin de s'intégrer d'une manière ou d'une autre. En dernier recours, je pourrais diviser la rotation et recadrer sur plusieurs étapes, mais je préfère les garder ensemble. –

+0

Pipelining .. n'existe pas dans jQuery. Chaque fonction renvoie juste un objet 'jQuery'. – Dykam

+0

pour Dykam: et c'est ce que nous appelons la tuyauterie: D, vous pouvez pipeline plus d'une opération pour Daniel: vous avez raison, mais nous pouvons toujours trouver une solution ...J'ai aimé ce problème et posterai une autre réponse si je trouve un –

0

Depuis les deux plug-ins-ins fonctionnent de manière très différente, je ne pense pas que vous pouvez combiner facilement les deux. jCrop vous permet simplement de définir un rectangle de sélection sur une image. La rotation, d'autre part, que ce soit utilise <canvas> pour tourner réellement l'image ou le filtre DXImageTransform pour montrer une rotation

Source

2009-09-17 14:37:07

+0

sur IE Rotation est fait avec l'attribut d'angle, ce qui signifie que vous pouvez faire la rotation, puis jCrop –

+0

Quoi attribut d'angle? Le site officiel de jquery-rotate (http://code.google.com/p/jquery-rotate/) indique: Deux implémentations de traitement d'image JavaScript sont prises en charge: 1. en utilisant le filtre DXImageTransform pour Microsoft Internet Explorer 2. en utilisant Toile objet pour les autres navigateurs –

+0

oui, et le filtre est appliqué avec css, il est donc possible de faire pivoter puis jCrop après l'application de la rotation –

1

Je suggère de tourner le côté serveur d'image. Vous ne pouvez vraiment pas combiner jCrop avec une image pivotée, car une méthode basée sur CSS "mentirait" sur la largeur et la hauteur.

Cela peut être extrêmement rapide. Votre interface utilisateur ajouterait simplement 'rotate = 90' à l'image querystring quand le bouton a été cliqué, et l'image se rechargerait.

Voici un très simple example of using jCrop and querystring-based resizing.

Prenez un look at the demo page pour voir à quel point il est réactif - l'ajout de la commande de rotation ne prendrait que quelques lignes de javascript. Si vous en avez besoin, je pourrais télécharger un échantillon de la façon de les combiner.

Source

2011-05-31 15:07:02

0

Je sais que c'est une vieille question mais, avez-vous vérifié ce plugin jQuery appelé CropIt? La démo a l'air très bien et vous avez zoomer, recadrer et faire pivoter dans le même plugin, aucun code backend requis.

Espérons que cela aide.

Source

2016-12-20 22:08:09 germanio

Questions connexes

 Questions connexes