Sélectionner une partie d'une image avec JQuery

Published: 28 octobre 2014

DMCA.com Protection Status

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 le code de Michał Wojciechowski. . Voici un exemple de page HTML utilisant le code:

Sélectionner une partie d'une image avec JQuery
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;" />
Image

of