2

URL から画像をトリミングし、トリミングした画像を利用可能なスペースに引き延ばそうとしています。

<div style="width:300px; height:400px;">
  <img style="width:100%; height:100%;" src="http://www.gravatar.com/avatar/eb95aa803f8c6d536afc87bf8d641ed4?s=128&amp;d=identicon&amp;r=PG" />
</div>

これにより、画像が適切に引き伸ばされますが、トリミングする方法がわかりません。使用しようとしましclip:rect(0px,60px,200px,0px);たが、最初に画像が使用可能なスペースに引き伸ばされてからクリップが適用されるため、うまくいきません。

編集 - jsfiddle: http://jsfiddle.net/bjMp6/

たとえば、頭をトリミングしてから頭を伸ばしたい

4

2 に答える 2

1

キャンバスソリューションを説明するためにフィドルを作成しました:

http://jsfiddle.net/dystroy/mDy24/

html は次のとおりです。

   <div id=theimg style="width:300px; height:400px;">
          <canvas id=thecanvas style="width:100%;height:100%;">
   </div>​

そしてjs：

   var img = new Image();
   img.src = "http://www.gravatar.com/avatar/eb95aa803f8c6d536afc87bf8d641ed4?s=128&amp;d=identicon&amp;r=PG";
   img.onload = function() {
          var can = document.getElementById('thecanvas');
          var con = can.getContext("2d");
          console.log(con);
          con.drawImage(img, 0, 0, 50, 50, 0, 0, can.width, can.height);
   }​
于 2012-04-26T15:22:17.517 に答える
1

2 番目の div なしで Yoshi のアイデアを実行する

div
{
    width:300px; 
    height:400px;
    border:1px solid #333;
    overflow:hidden;
    position:relative;
}
img
{
    width:300%; 
    height:300%;
    position:absolute;
    top:0;
    left:-50%;
}

含まれている div を表示するためだけに境界線を追加しました。この方法では、コンテナーの薄暗い部分を知る必要はありませんが、画像をトリミングするには、すべての画像が同じ相対的な構成 (ヘッドショットなど) でない限り、任意のソリューションで数値を操作する必要があります。

これは、視聴を楽しむためのフィドルです。

また、コンテナが拡大/縮小しても、画像は同じトリミングと位置を保持します。

于 2012-04-26T15:42:04.013 に答える