1

jCropを使用して、ユーザーが画像を固定の幅と高さにトリミングできるインターフェイスを作成しています。元の画像 (常に幅 940 ピクセル、高さ可変) を表示し、固定幅と高さ (940 x 600) で jCrop セレクターを上部にオーバーレイします。次に、セレクターを上下に動かして (セレクターは元の画像と同じ幅であるため、左右ではありません)、部分を選択できます。トリミングは正常に機能しますが、1 つの点を除いては正常に機能します。トリミング前の元の画像 (jCrop セレクターが表示されている) では、左側から数ピクセルが欠落しています。幅は 935px に近いです。そのため、jCrop がトリミングすると、左端に細い黒い境界線が表示されます。コード：

<script language="Javascript">
  jQuery(function($) {      

    $('#target').Jcrop({
      keySupport: false,
      minSize: [940,600],
      maxSize: [940,600],           
      setSelect: [0,0,940,600],
      onSelect: updateCoords
    });

    function updateCoords(c)
    {
      $('#x').val(c.x);
      $('#y').val(c.y);
      $('#w').val(c.w);
      $('#h').val(c.h);
    };

  });
</script>

<img src="carousel.jpg" id="target" border="0" width="940" />

<form action="crop" method="post">
  <input type="hidden" id="x" name="x" />
  <input type="hidden" id="y" name="y" />
  <input type="hidden" id="w" name="w" />
  <input type="hidden" id="h" name="h" />
  <input type="submit" value="Crop Image" />                            
</form>

どんなアイデアでも大歓迎です。

編集：

生成されたソースを見ると、jCrop が表示された画像に「width:935px」というスタイルを追加していることがわかります。しかし、なぜ？

<img style="display: none; visibility: hidden; width: 935px; height: 701px;" src="carousel.jpg" id="target" border="0" width="940">
<div class="jcrop-holder" style="width: 935px; height: 701px; position: relative; background-color: black;">
<div style="position: absolute; z-index: 600; width: 940px; height: 600px; top: 0px; left: -5px;">
<div style="width: 100%; height: 100%; z-index: 310; position: absolute; overflow: hidden;">
<img style="border: medium none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 5px; width: 935px; height: 701px;" src="carousel.jpg">

編集2：

Twitter Bootstrap を使用しています。このjCropの問題から、競合があったことがわかりますが、そこに記載されている問題は私のものと同じではなく、彼らが提案する max-width:none ソリューションを試しましたが、役に立ちませんでした。

4

1 に答える 1