2016-07-25 3 views
1

이미지의 영역을 선택한 다음 여러 부분으로 잘라내어 HTMl CSS 등을 사용하여 폴더에 개별적으로 저장하려는 경우 이미지 영역을 선택하는 방법을 안내해주세요. 10 열 3 열 같은 여러 이미지로 나눌 수 있으므로 자른 이미지가 30 개 있고 폴더에 별도로 저장됩니다 웹 기반 응용 프로그램 인 이 있으면 HTMl CSS를 사용하여이 작업을 수행하고 싶습니다. C# 이 업무를위한 독립형 응용 프로그램을위한 .NETHTML5 CSS 또는 C# .NET에서 이미지 자르기

+0

아래의 링크를 참조하십시오, 당신은 HTML과 JS https://www.script-tutorials.com/html5-image-crop-tool/를 사용하여 이미지를 잘라하는 데 도움이 될 것입니다 –

답변

0

JQuery Cropper를 사용하지 않는 이유는 무엇입니까?

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

+0

그가 왜 *해야하는지 왜 설명하지 않습니까 *? 질문은 자바 스크립트 구현을 요구하지 않습니다! –

+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; 
}