Combiné de rotation de l'image & recadrage en jQuery

Nous avons actuellement un système de recadrage d'images qui utilise jCrop sur le front-end, et System.Drawing dans .NET sur le backend - cela fonctionne très bien, mais maintenant nous avons besoin d'introduire la rotation de l'image. Seulement un angle de 90 degré sont nécessaires, et jQuery.Faites tourner fonctionne très bien dans l'isolement, mais je tiens à combiner ces deux plugins jQuery, gracieusement. Vous avez une expérience dans ce domaine? Sont là "shake & cuire" solutions?

  • Pouvez-vous fournir plus de détails sur ce que vous essayez d'atteindre? Voulez-vous à l'utilisateur de définir un rectangle de recadrage et de définir un angle de rotation dans le même temps? Quel est exactement le résultat visuel que vous voulez réaliser?
  • Salut Ates, j'essaie d'avoir une vue unique de l'image, avec une barre d'outils qui permet de faire une rotation et recadrage de l'image en un seul, combiné étape.
InformationsquelleAutor Daniel Schierbeck | 2009-09-17
  1. 1

    Je suggère la rotation de l'image côté serveur. Vous ne pouvez vraiment pas combiner jCrop avec une rotation de l'image, depuis un CSS en fonction de la méthode "mensonge" à propos de la largeur et de la hauteur.

    Il peut être extrêmement rapide. Votre INTERFACE utilisateur voudrais simplement ajouter "rotate=90' à l'image de la chaîne de recherche lorsque le bouton a été cliqué, et l'image de rechargement.

    Voici un très exemple simple d'utilisation de jCrop et querystring à base de redimensionnement.

    Prendre un regardez la page de démonstration pour voir comment il est réactif - ajout de la commande rotation suffit de quelques lignes de javascript. Si vous avez besoin d'elle, j'ai pu télécharger un exemple de la façon de les combiner.

    InformationsquelleAutor Lilith River
  2. 1

    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 bon et vous avez zoomer, recadrer et faire pivoter dans le même plugin, pas de backend code requis.

    Espère que cette aide.

    InformationsquelleAutor germanio
  3. 0

    Depuis les deux plugin-ins fonctionnent de manières très différentes, je ne pense pas que vous pouvez facilement combiner les deux. jCrop vous permet simplement de définir un rectangle de sélection sur une image. Rotation, d'autre part, utilise soit <canvas> à fait pivoter l'image ou la DXImageTransform filtre à montrer rotation (pas en fait de la rotation de la source de l'image.)

    • sur IE Rotation se fait avec l'attribut d'angle, ce qui signifie que vous pouvez faire la rotation puis jCrop
    • Quel angle d'attribut? Le site officiel de jquery-rotation (code.google.com/p/jquery-rotate) les états: Deux image en JavaScript implémentations de gestion sont pris en charge: 1. à l'aide de DXImageTransform filtre pour Microsoft Internet Explorer 2. à l'aide de Toile objet pour les autres navigateurs
    • oui, et le filtre est appliqué avec css, il est réalisable pour faire pivoter puis jCrop après l'application de la rotation
    • Je ne pense pas que cela va fonctionner. Tout d'abord, le filtre n'est utilisé que sur IE. Ce sur FF? Aussi, si la culture plug-in est la lecture de l'image dimensions, ils ne changent pas avec le CSS filtre; en CSS uniquement les modifications de la présentation de l'image. Si vous pensez encore que c'est faisable, je pense que le fardeau de la preuve est sur vous pour écrire un travail de démo 🙂
    InformationsquelleAutor Ates Goral
  4. 0

    Je pense que jQuery de gainage, est la réponse pour tout plugin jQuery

    par exemple:

    $("image").rotate(foo).crop(foo);
    • J'ai peur que cela ne fonctionne pas. Les deux jCrop et jQuery-Tourner apporter des modifications importantes dans les DOM; ils ont besoin d'intégrer d'une certaine façon. En dernier recours je pourrais diviser la rotation et recadrage sur plusieurs étapes, mais je préfère les garder ensemble.
    • Le Pipelining.. n'existe pas en jQuery. Chaque fonction retourne un jQuery objet.
    • pour Dykam: et c'est ce que nous appelons pipe-doublure :D, vous pouvez pipeline de plus d'une opération de Daniel: vous avez raison, mais nous pouvons encore trouver une solution... j'ai aimé ce problème et publierons une autre réponse si je trouve un
    • Je crois que le terme correct est "chaînage" pas de "gainage"
    InformationsquelleAutor Ahmed Khalaf