Sélectionner une partie d'une image avec JQuery

Posted on 28 octobre 2014 Edit


Avec JQuery, il est possible de développer un simple programme permettant de sélectionner une partie d'une image. Le meilleur exemple que l'on puisse trouver sur le web est imgAreaSelect de Michał Wojciechowski. Rendez-vous sur le site pour télécharger l'exemple complet. Voici un exemple de page HTML utilisant le code:

Sélectionner une partie d'une image avec JQuery

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
  <script type="text/javascript" src="scripts/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
</head>
<body>

        <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;

    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;

    $('#preview img').css({
        width: Math.round(scaleX * 300),
        height: Math.round(scaleY * 443),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });

    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);    
}

$(function () {
    $('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true,
        fadeSpeed: 200, onSelectChange: preview });
});
</script>

<div class="container demo">
  <div style="float: left; width: 20%;">
    <p class="instructions">
      Click and drag on the image to select an area. 
    </p>

    <div class="frame" style="margin: 0 0.3em; width: 300px; height: 443px;">
      <img id="photo" src="image.jpg" />
    </div>
  </div>

  <div style="float: left; width: 50%;">
    <p style="font-size: 110%; font-weight: bold; padding-left: 0.1em;">
      Selection Preview
    </p>

    <div class="frame" 
      style="margin: 0 1em; width: 100px; height: 100px;">
      <div id="preview" style="width: 100px; height: 100px; overflow: hidden;">
        <img src="image.jpg" style="width: 300px; height: 443px;" />
      </div>
    </div>

    <table style="margin-top: 1em;">
      <thead>
        <tr>
          <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
            Coordinates
          </th>
          <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
            Dimensions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
              <td style="width: 30%;"><input type="text" id="x1" value="-" /></td>
              <td style="width: 20%;"><b>Width:</b></td>
            <td><input type="text" value="-" id="w" /></td>
        </tr>
        <tr>
          <td><b>Y<sub>1</sub>:</b></td>
          <td><input type="text" id="y1" value="-" /></td>
          <td><b>Height:</b></td>
          <td><input type="text" id="h" value="-" /></td>
        </tr>
        <tr>
          <td><b>X<sub>2</sub>:</b></td>
          <td><input type="text" id="x2" value="-" /></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><b>Y<sub>2</sub>:</b></td>
          <td><input type="text" id="y2" value="-" /></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>



</body>
</html>

Vous pouvez alors adapter ce code à n'importe quelle image de taille nx*ny quelconque en changeant (300,443) par (nx,ny) dans les lignes suivantes:

- width: Math.round(scaleX * 300),
- height: Math.round(scaleY * 443),
- <div class="frame" style="margin: 0 0.3em; width: 300px; height: 443px;">
- <img src="image.jpg" style="width: 300px; height: 443px;" />

Recherches associées

Liens Site
imgAreaSelect odyniec