Sélectionner une partie d'une image avec JQuery

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:

<!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

Greetings, I am Ben! I completed my PhD in Atmospheric Science from the University of Lille, France. Subsequently, for 12 years I was employed at NASA as a Research Scientist focusing on Earth remote sensing. Presently, I work with NOAA concentrating on satellite-based Active Fire detection. Python, Machine Learning and Open Science are special areas of interest to me.

Sélectionner une partie d'une image avec JQuery

Recherches associées

Benjamin

Skills