0

良い一日。

スクリプトImagecropperを使用します

脚本：

<img src="http://test.com/img/1362244329.jpg" id="yui_img" height="768" width="1024">

<script>
(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;

    var crop = new YAHOO.widget.ImageCropper('yui_img');
})();
</script>

結果： 1

しかし、画像サイズを指定しないと、次のようになります(画像を参照): 

<img src="http://test.com/img/1362244329.jpg" id="yui_img">

結果： 2

そして、間違った画像サイズを指定すると、ウィンドウは画像の一部を増やします:

<img src="http://test.com/img/1362244329.jpg" id="yui_img" height="333" width="500">

結果：

3

タグ画像での作り方は、必ずしもそのサイズを指定する必要はありませんか？

4

2 に答える 2

3

YUI 2 はもうサポートされていないので、まず YUI 3 を紹介したいと思います。YUI 2 を使って新しいコードを書くべきではありません。私が YUI 3 用に書いた ImageCropper コンポーネントが、YUI ギャラリーの YUI 2 バージョンと同じように動作します: http://yuilibrary.com/gallery/show/imagecropper。YUI 2 ImageCropper が行ったことをコピーするため、これらの問題は古いバージョンと共有されます。

画像のサイズが指定されていない場合の対処方法

小さな ImageCropper を取得している理由は、画像がフェッチされる前にウィジェットを作成しているため、ブラウザーはまだそのサイズを認識していないためです。できることは、画像のonloadイベントを待つことです。そのイベントをリッスンして、起動後に ImageCropper を作成できます。

(function() {
  var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event;

  var yui_img = Dom.get('yui_img');

  Event.addListener(yui_img, 'load', function () {
    var crop = new YAHOO.widget.ImageCropper(yui_img);
  });

})();

ImageCropper が間違ったサイズの画像で機能しない理由

YUI 2 ImageCropper も私の YUI 3 バージョンも、画像のサイズが適切でない場合は機能しません。その理由は、どちらもbackground: url()クロップ領域 (ウィジェットの暗くなっていない部分) 内の画像を表示するために CSS スタイルを使用しているためです。CSS の背景では、サイズ変更/ズームされた画像を使用できません。

この問題を修正する YUI 3 バージョンでは、ある時点で別の戦略を使用する予定です。ただし、ImageCropper コンポーネントは、トリミング座標をサーバーに送信して実際に画像をトリミングするように設計されていることに注意する必要があります。つまり、イメージに間違ったサイズを設定すると、イメージ クロッパーがそのgetCropCoordsメソッドで返す座標は、フル サイズのイメージと一致する座標にならないということです。代わりに、使用している画像のサイズをサーバーに送信し、画像を正しくトリミングするために追加の計算を行う必要もあります。

結論として、間違ったサイズの画像を使用するべきではありません。画像のサイズを修正するには、次の 2 つの方法があります。

  1. 画像の HTML5naturalWidthとnaturalHeight属性を使用します。サイズが変更された場合でも、それらは画像の実際のサイズを返します。残念ながら、これらの属性はまだすべてのブラウザーでサポートされているわけではありません。
  2. JS で新しい画像を作成し、使用している画像と同じに設定し、そのイベントをsrcリッスンして、その画像のサイズを取得します。load

このようなもの：

 (function () {
  var Dom = YAHOO.util.Dom;

  var yui_img = Dom.get('yui_img'),
      new_img = new Image();

  new_img.onload = function () {
    yui_img.width = new_img.width;
    yui_img.height = new_img.height;

    // create the ImageCropper
  };
  new_img.src = yui_img.src;
}());

YUI3 バージョン

これらすべてを YUI3 で簡単に実行できます。

YUI().use('gallery-imagecropper', function (Y) {

  var img = Y.one('#yui_img');

  img.on('load', function () {
    var cropper = new Y.ImageCroper({
      srcNode: img,
      width: img.get('width'),
      height: img.get('height')
    });
    cropper.render();
  });

});
于 2013-03-06T14:24:03.867 に答える