2016-07-25 3 views
1

画像上の領域を選択し、複数の部分で切り抜き、HTMl CSSなどを使用してこれらの複数の画像を個別にフォルダに保存します。 画像の領域を選択する方法を教えてくださいそれを30行と3列のように複数の画像に分割すると、30のクロップされた画像があり、フォルダに別々に保存されます Webベースのアプリケーション の場合はHTMl CSSを使用してこれを行いたい場合はC#このタスクのスタンドアロンアプリケーション用.NET。HTML5 CSSまたはC#.NETで画像を切り抜く

+0

以下のリンクを参照してください、あなたはHTMLとJS https://www.script-tutorials.com/html5-image-crop-tool/を使用して画像をトリミングするのに役立ちます –

答えて

0

JQuery Cropperを使用しているのはなぜですか?

https://fengyuanchen.github.io/cropper/

+0

なぜ彼は*すべき*理由を説明していないのですか?質問は、Javascriptの実装を要求していません! –

+0

ウェブベースのアプリケーションの場合はHTMl CSS L2R –

1

は、CSSを使用した場合、私は負のマージンを使用してタスクを思っただろう。

まず、イメージを親要素に配置します(たとえば段落(タグ<p>)など)。ペアレンタル段落はフローティング(フローティング)要素(または所定の幅)である必要があります。属性 "full width"が機能していない要素については注意してください。

次に、4つの辺すべてに対して、上下左右の余白を設定します。負のマージンは、あらゆる方向にどのようにカットオフするかを決定します。イメージは親セクションにあります(段落<p>)。元の画像の一部(スクラップ)のみを取得します。次に、親プロパティのオーバーフローを隠しフィールドに置き換えると、枝刈りを超えているフィールドは非表示になります。客観的に達成された。ただし、必要な寸法を正確に指定する値を調整する必要があります。

<p class="crop"><a href="#"><img src="img.jpg" /></a></p> 


.crop { 
    float: left; 
    margin: .5em 10px .5em 0; 
    overflow: hidden; /* this is important */ 
} 
/* input values to crop the image: top, right, bottom, left */ 
.crop img { 
    margin: -41px -156px -40px -30px; 
} 
関連する問題