Question

尝试提出更好的问题

在不同的宽度和高度上有很多图像，我想要做的是将这些图像调整到一定的尺寸，并在croppea区域上购买图像以使每个图像具有相同的尺寸。

有没有办法存档。

这个网站是jquery选择显示图像区域的例子，但我找不到如何做到这一点的示例代码。什么是在javascript上仅显示图像的选定区域的示例代码。

http://odyniec.net/projects/imgareaselect/

enter image description here

Answer 1

我使用了类似的库JCrop。

您将找到here缩略图创建示例（包含源代码）。

这是非常简单的事情：

// enable jcrop
$(function(){

    $('#jcrop_target').Jcrop({
        onChange: showPreview, // call thumbnail generator
        onSelect: showPreview, // call thumbnail generator
        aspectRatio: 1
    });

});

// make thumbnail
function showPreview(coords)
{
    var rx = 100 / coords.w;
    var ry = 100 / coords.h;

    $('#preview').css({
        width: Math.round(rx * 500) + 'px',
        height: Math.round(ry * 370) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'
    });
}

Answer 2

从页面来源，通过右键单击（在chrome中）并选择'inspect element'获得：

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 * 300),
        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
    });
});

使用html：

<div class="container demo">
  <div style="float: left; width: 50%;">
    <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: 300px;">
      <img id="photo" src="flower2.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="flower2.jpg" style="width: 100px; height: 100px;">
      </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>

Answer 3

这是imageareaselect库的完整bin或示例。请找到如下演示链接：

演示： http://codebins.com/bin/4ldqp7t

HTML

<div id="demo">
  <div class="leftside">
    <p class="instructions">
      Click and drag on the image to select an area. 
    </p>
    <div  class="frame leftframe">
      <img src="http://img.izismile.com//img/img4/20111126/200/heart_meltingly_adorable_animal_photography_200_11.jpg" id="photo">
    </div>
  </div>
  <div class="rightside">
    <div class="frame rightframe">
      <div class="previewframe" id="preview">
        <img style="width: 100px; height: 100px;" src="http://img.izismile.com//img/img4/20111126/200/heart_meltingly_adorable_animal_photography_200_11.jpg" />
      </div>
    </div>
    <table class="imginfo">
      <tr>
        <th colspan="2">
          Coordinates
        </th>
        <th colspan="2">
          Dimensions
        </th>
      </tr>
      <tr>
        <td>
          X1:
        </td>
        <td>
          <input type="text" value="-" id="x1" />
        </td>
        <td>
          Width:
        </td>
        <td>
          <input type="text" value="-" id="w" />
        </td>
      </tr>
      <tr>
        <td>
          Y1:
        </td>
        <td>
          <input type="text" value="-" id="y1" />

        </td>
        <td>
          Height:
        </td>
        <td>
          <input type="text" value="-" id="h" />

        </td>
      </tr>
      <tr>
        <td>
          X2:
        </td>
        <td>
          <input type="text" value="-" id="x2" />

        </td>
        <td colspan="2">
          &nbsp;
        </td>
      </tr>
      <tr>
        <td>
          Y2:
        </td>
        <td>
          <input type="text" value="-" id="y2" />

        </td>
        <td colspan="2">
          &nbsp;
        </td>
      </tr>
    </table>
  </div>
</div>

<强>的jQuery

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 * 200),
        height: Math.round(scaleY * 200),
        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
    });

});

<强> CSS

#demo{
  background: none repeat scroll 0 0 #EEEEEE;
  border: 2px solid #999;
  border-radius: 4px 4px 4px 4px;
  padding: 0.6em;
  float: left;
  width:90%;
}
.leftside{
  float: left;
  width:50%;
}
.rightside{
  float: left;
  margin-top:11%;
  width:40%;
}
#demo p.instructions {
  color: #666666;
  font-family: serif;
  font-style: italic;
  line-height: 130%;
  font-size:13px;
}
div.frame {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 2px solid #DDDDDD;
  padding: 0.8em;
}
.leftframe{
  margin: 0 0.3em;

  width: 200px;

  height: 200px;
}
.rightframe{
  margin: 0 1em;

  width: 100px;

  height: 100px;
  http://codebins.com/#
}
.previewframe{
  width: 100px;

  height: 100px;

  overflow: hidden;
}
.crop{
  margin-left:20%;
  margin-top:1%;
}
.imginfo{
  font-size:13px;
  width:100%;
}
.imginfo input[type=text]{
  width:80px;
  text-align:right;
  border:1px solid #666;
}

演示： http://codebins.com/bin/4ldqp7t

选择显示区域图像的示例代码

3 个答案: