Bonjour à tous,

Je travail actuellement sur un projet et je dois réaliser une tâche dont je n'ai aucune idée de comment faire pour l'instant.

C'est pourquoi je pose la question ici en espérant que quelqu'un puisse m'éclairer !

Je vous expose le contexte :

-Je développe une web app qui permet de créer des magazines

-Un magazine peut contenir du texte, articles, photos tout ça sur 1, 2 ou 3 colonnes (ça dépend de quel format de magazine l'utilisateur créer)

La tâche que je dois réaliser est de permettre à l'utilisateur de pouvoir redimensionner les images qu'il insère dans le magazine et ainsi permettre que les images ne prennent pas toujours 100% de la colonne...

Si vous avez des pistes, idées de comment je pourrais faire ça, j'en serais ravi !

Je vous met une photo ci-dessous pour illustrer mes propos: (il faudrait dans cet image que je puisse redimensionner l'image de la biche pour qu'elle ne prenne pas forcément 100% de la colonne.

upload/1599211895-80636-capture3.png

Voila j'espère avoir été le plus clair possible afin que vous puissiez m'aider.

Merci d'avance,

Julien
Bonjour,
Si j'ai bien compris votre problématique, celle-ci comporte deux points :
- d'une part l'aspect responsive d'une image, le point le moins difficile à traiter (genre max-width: 100%).
- d'autre part la possibilité pour un utilisateur de recouper une image. Dans ce cas il faudra utiliser une bibliothèque du genre imageMagick. Mais alors il faudrait l'intégrer dans une interface utilisateur, ce qui représente du boulot en perspective.
Bonjour Olivier,

Merci de votre réponse, effectivement j'ai fait quelques recherches sur internet et ça m'a l'air compliqué à réaliser. J'aurais aimé faire quelque chose dans le style d'un cms par exemple (4 points au 4 coins de l'image et que l'utilisateur puisse agrandir/rétrécir l'image selon ses besoins. J'ai donc vu qu'il existait des outils tels que ckeditor, tinymce... mais je crois que ces outils la ne s'utilisent qu'en contexte de formulaire or là ce n'est pas mon cas... Je vais regarder ce qu'est imageMagick et voir si je peux faire quelque chose avec !
Hello

Tu peux proposer à l'utilisateur un redimensionnement d'image un peu ... plus simple

comme par exemple tu peux proposer 3 ou 4 cas de taille d'image du style :

100%
75%
50%
25%

Suivant ce qu'il choisie tu prévois 4 classes qui te positionne bien l'image avec le bon pourcentage.
Salut Jencal,

Oui je pense que c'est finalement ce que je vais faire, beaucoup plus simple à réaliser...
Pareil pour l'alignement ce sera au bon vouloir de l'utilisateur entre gauche-centre-droite ^^

Merci.
Merci bcp pour ces liens Jencal je vais y regarder de plus prêt voir si je peux l'adapter à ma situation Smiley smile
Bonjour, la meilleur piste pour toi est celle de JENCAL, mais si tu débutes tu aura du mal à exploiter cette ressource.
J'en ai une version en claire copie/colle dans tes.htm et la tu adaptera facilement l'outil !
HOP THIS HELP

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@7.1.0/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Image Resize Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      function update(activeAnchor) {
        var group = activeAnchor.getParent();

        var topLeft = group.get('.topLeft')[0];
        var topRight = group.get('.topRight')[0];
        var bottomRight = group.get('.bottomRight')[0];
        var bottomLeft = group.get('.bottomLeft')[0];
        var image = group.get('Image')[0];

        var anchorX = activeAnchor.getX();
        var anchorY = activeAnchor.getY();

        // update anchor positions
        switch (activeAnchor.getName()) {
          case 'topLeft':
            topRight.y(anchorY);
            bottomLeft.x(anchorX);
            break;
          case 'topRight':
            topLeft.y(anchorY);
            bottomRight.x(anchorX);
            break;
          case 'bottomRight':
            bottomLeft.y(anchorY);
            topRight.x(anchorX);
            break;
          case 'bottomLeft':
            bottomRight.y(anchorY);
            topLeft.x(anchorX);
            break;
        }

        image.position(topLeft.position());

        var width = topRight.getX() - topLeft.getX();
        var height = bottomLeft.getY() - topLeft.getY();
        if (width && height) {
          image.width(width);
          image.height(height);
        }
      }
      function addAnchor(group, x, y, name) {
        var stage = group.getStage();
        var layer = group.getLayer();

        var anchor = new Konva.Circle({
          x: x,
          y: y,
          stroke: '#666',
          fill: '#ddd',
          strokeWidth: 2,
          radius: 8,
          name: name,
          draggable: true,
          dragOnTop: false,
        });

        anchor.on('dragmove', function () {
          update(this);
          layer.draw();
        });
        anchor.on('mousedown touchstart', function () {
          group.draggable(false);
          this.moveToTop();
        });
        anchor.on('dragend', function () {
          group.draggable(true);
          layer.draw();
        });
        // add hover styling
        anchor.on('mouseover', function () {
          var layer = this.getLayer();
          document.body.style.cursor = 'pointer';
          this.strokeWidth(4);
          layer.draw();
        });
        anchor.on('mouseout', function () {
          var layer = this.getLayer();
          document.body.style.cursor = 'default';
          this.strokeWidth(2);
          layer.draw();
        });

        group.add(anchor);
      }

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      // darth vader
      var darthVaderImg = new Konva.Image({
        width: 200,
        height: 137,
      });

      // yoda
      var yodaImg = new Konva.Image({
        width: 93,
        height: 104,
      });

      var darthVaderGroup = new Konva.Group({
        x: 180,
        y: 50,
        draggable: true,
      });
      layer.add(darthVaderGroup);
      darthVaderGroup.add(darthVaderImg);
      addAnchor(darthVaderGroup, 0, 0, 'topLeft');
      addAnchor(darthVaderGroup, 200, 0, 'topRight');
      addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
      addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');

      var yodaGroup = new Konva.Group({
        x: 20,
        y: 110,
        draggable: true,
      });
      layer.add(yodaGroup);
      yodaGroup.add(yodaImg);
      addAnchor(yodaGroup, 0, 0, 'topLeft');
      addAnchor(yodaGroup, 93, 0, 'topRight');
      addAnchor(yodaGroup, 93, 104, 'bottomRight');
      addAnchor(yodaGroup, 0, 104, 'bottomLeft');

      var imageObj1 = new Image();
      imageObj1.onload = function () {
        darthVaderImg.image(imageObj1);
        layer.draw();
      };
      imageObj1.src = 'http://konvajs.github.io/assets/darth-vader.jpg';

      var imageObj2 = new Image();
      imageObj2.onload = function () {
        yodaImg.image(imageObj2);
        layer.draw();
      };
      imageObj2.src = 'http://konvajs.github.io/assets/yoda.jpg';
    </script>
  </body>
</html>