원하는 고객에게 필요한 정보를 전달합니다. 판매의 가장 큰 문제는 고객에게 가치를 전달할 수 없다는 것입니다. 제품이나 서비스에 대해 올바르게 이야기하는 방법

세 가지를 생각해 봅시다. 간단한 방법, 웹사이트에서 이미지의 일부만 표시하는 데 사용할 수 있습니다. 이러한 방법을 사용하면 이미지가 특정 크기로 잘리지 않습니다. 문자 그대로, 꼭 봐야 할 부분만 보여주고 불필요한 부분은 가려줍니다.

이러한 방법은 이미지 크기를 조정해야 하거나 뉴스 피드 등에서 미리 보기를 생성해야 하는 경우 매우 유용할 수 있습니다.

방법 1: 음수 여백 사용

이미지는 상위 요소(이 경우 div)에 배치되어야 합니다. 상위 요소는 부동 요소(또는 지정된 너비)여야 합니다. 이 방법은 블록 수준 또는 전체 너비 요소에서는 작동하지 않습니다.

위쪽(상단), 오른쪽(오른쪽), 아래쪽(하단) 및 왼쪽(왼쪽)의 네 측면 모두에 대해 음수 여백을 설정해 보겠습니다. 음수 여백은 상위 요소의 이미지가 각 방향에서 잘리는 정도를 결정합니다. 다음으로, 잘린 이미지 영역 뒤의 여백을 숨기기 위해 상위 요소의 오버플로 속성을 숨김으로 설정합니다.

수확고

왼쪽으로 뜨다;

오버플로: 숨김;

이미지 자르기

여백 : -70px -50px -160px -175px ;

방법 2: 절대 위치 지정 사용

이 방법을 사용하여 상위 요소의 너비와 높이를 설정하고 위치 속성을 상대값으로 설정합니다. 너비와 높이에 따라 표시되는 필드의 크기가 결정됩니다. 상위 요소 내부 이미지의 경우 위치 지정 속성을 절대값으로 설정하세요. 그런 다음 top 및 left 속성을 사용하여 이미지의 어느 부분을 표시할지 설정합니다.

수확고

왼쪽으로 뜨다;

오버플로: 숨김;

위치: 상대;

너비: 270px;

높이: 260px;

이미지 자르기

위치: 절대;

상단: -70px;

왼쪽: -175px;

방법 3: 미끄럼 속성 사용

클립 속성에 따라 표시해야 하는 요소 부분이 결정되므로 이 방법이 가장 간단합니다. 하지만 이 방법에는 두 가지 단점이 있습니다.

먼저, 잘린 요소는 절대 위치에 있어야 합니다. 따라서 추가 요소를 추가하고, 이미지의 표시 영역 크기를 계산하고, 해당 크기를 추가하고, float 속성을 부모로 설정해야 합니다.

둘째, 보이는 영역의 크기는 잘라낸 부분의 크기로 줄어들지 않고 전체 이미지의 크기와 동일하게 유지됩니다(잘라낸 부분 외부 영역만 숨겨짐). 가시 영역을 부모의 왼쪽 상단 모서리로 이동하려면 절대 위치 지정을 사용해야 합니다.

수확고

왼쪽으로 뜨다;

위치: 상대;

사진 편집 앱에서 본 컨트롤을 사용하여 JavaScript 및 HTML5 Canvas 요소를 사용하여 이미지 크기를 조정하고 자르는 방법을 알아보세요.

이 기사에서는 HTML5 요소를 사용하여 이미지 크기를 조정하고 자르는 방법을 보여 드리겠습니다.

라이브 환경에서 웹사이트나 앱은 이 기술을 사용하여 로드하기 전에 프로필 사진의 크기를 조정하고 생성할 수 있습니다.

서버에서 이 작업을 수행할 수 있지만 이를 위해서는 잠재적으로 큰 파일을 전송해야 하므로 시간이 많이 걸립니다. 대신 이미지가 로드되기 전에 클라이언트 측에서 이미지 크기를 조정할 수 있습니다. 그러면 모든 일을 훨씬 더 빠르게 할 수 있습니다.

이를 위해 HTML5 요소를 생성합니다.

대부분의 브라우저는 이미 이러한 방법을 지원하므로 이 기술을 즉시 구현할 수 있을 것입니다. 그러나 이미지 품질, 성능 등 브라우저에서 지원하지 않는 몇 가지 제한 사항을 알고 있어야 합니다.

매우 큰 이미지의 크기를 조정하면 브라우저 속도가 느려지거나 경우에 따라 응용 프로그램이 중단될 수도 있습니다. 따라서 업로드할 수 있는 파일 크기에 대해 합리적인 제한을 설정하는 것이 합리적입니다. 품질이 중요한 경우 브라우저가 처리 중에 이미지 품질을 저하시키기 때문에 이 기술이 부적절하다고 생각할 수 있습니다.

존재한다 캔버스에서 크기가 조정된 이미지의 품질을 높이는 데 사용할 수 있는 다양한 기술그러나 이 기사에서는 이에 대해 고려하지 않을 것입니다.

이 데모에서 최종 결과를 확인하거나 ZIP 아카이브를 다운로드할 수 있습니다.

자, 이제 시작해보자!

마킹

데모에서는 기존 이미지로 시작하겠습니다.

그게 다야! 이것이 이 데모에 필요한 모든 HTML입니다.

CSS

CSS도 매우 작습니다. 먼저 크기 조정 컨테이너와 이미지의 스타일을 정의해 보겠습니다.

크기 조정 컨테이너(위치: 상대; 표시: 인라인 블록; 커서: 이동; 여백: 0 자동; ) .resize-container img( 표시: 블록 ) .resize-container:hover img, .resize-container:active img( 개요: 2px 점선 rgba(222,60,80,.9); )

Resize-handle-ne, .resize-handle-ne, .resize-handle-se, .resize-handle-nw, .resize-handle-sw(위치: 절대; 디스플레이: 블록; 너비: 10px; 높이: 10px; 배경: rgba(222,60,80,.9); z-색인: 999; ) .resize-handle-nw ( 위쪽: -5px; 왼쪽: -5px; 커서: nw-resize; ) .resize-handle- sw(하단: -5px; 왼쪽: -5px; 커서: sw-resize; ) .resize-handle-ne(상단: -5px; 오른쪽: -5px; 커서: ne-resize; ) .resize-handle-se( 하단: -5px; 오른쪽: -5px; 커서: se-resize; )

자바스크립트

JavaScript에서는 몇 가지 변수를 정의하고 Canvas와 대상 이미지를 초기화하는 것으로 시작합니다.

var resizeableImage = function(image_target) ( var $container, orig_src = new Image(), image_target = $(image_target).get(0), event_state = (), constrain = false, min_width = 60, min_height = 60, max_width = 800, max_height = 900, resize_canvas = document.createElement("canvas"); )); resizeableImage($(".resize-image"));

다음으로 부팅 시 즉시 호출될 init 함수를 만듭니다. 이 함수는 이미지를 컨테이너에 래핑하고, 크기 조정 핸들을 만들고, 크기 조정에 사용되는 원본 이미지의 복사본을 만듭니다.

또한 나중에 액세스할 수 있도록 컨테이너 요소에 대한 JQuery 객체를 변수에 할당하고 누군가 핸들 중 하나를 드래그하기 시작할 때를 감지하는 mousedown 이벤트 리스너를 추가합니다.

var resizeableImage = function(image_target) ( // ... init = function())( // 원본 src의 복사본으로 새 이미지를 만듭니다. // 이미지 크기를 조정할 때 항상 이 복사본을 기본으로 사용합니다. orig_src .src=image_target.src ; // 크기 조정 마커 추가 $(image_target).wrap("

").전에(" ").전에(" ").후에(" ").후에(" "); // 컨테이너에 대한 변수 가져오기 $container = $(image_target).parent(".resize-container"); // 이벤트 추가 $container.on("mousedown", ".resize-handle", startResize) ; ); //... 초기화(); )

startResize 및 endResize 함수는 마우스가 움직이는 위치 추적을 시작하고 추적을 중지하도록 브라우저에 지시합니다.

startResize = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", resizing); $(document).on("mouseup", endResize ); ); endResize = function(e)( e.preventDefault(); $(document).off("mouseup touchend", endResize); $(document).off("mousemove touchmove", resizing); );

마우스 위치 추적을 시작하기 전에 컨테이너의 크기 및 기타 주요 데이터에 대한 스냅샷을 찍어야 합니다.

event_state라는 변수에 저장하고 나중에 높이와 너비를 변경할 때 시작점으로 사용합니다.

saveEventState = function(e)( // 이벤트의 초기 매개변수와 컨테이너의 상태를 저장합니다. event_state.container_width = $container.width(); event_state.container_height = $container.height(); event_state.container_left = $container .offset().left ; event_state.container_top = $container.offset().top; event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches.clientX) + $(window).scrollLeft (); event_state.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // 모바일 사파리용 패치입니다 // 무슨 이유인지 , (typeof e.originalEvent.touches !== "undefine")( event_state.touches = ; $.each(e.originalEvent.touches, function(i, ob)( event_state.touches[i)인 경우 터치 속성을 직접 복사할 수 없습니다. ] = (); event_state.touches [i].clientX = 0+ob.clientX; event_state.touches[i].clientY = 0+ob.clientY; )); ) event_state.evnt = e; )

크기 조정 기능은 대부분의 작업이 발생하는 곳입니다. 이 함수는 사용자가 크기 조정 핸들 중 하나를 드래그할 때 지속적으로 호출됩니다. 이 함수가 호출될 때마다 현재 마우스 위치와 사용자가 당긴 모퉁이의 원래 위치 사이의 관계를 계산하여 새로운 너비와 높이를 만듭니다.

그런 다음 Shift 키나 변수를 사용하여 전환할 때 이미지 크기를 제한하는 옵션을 추가합니다.

마지막으로 이미지 크기를 조정하지만, 새로운 너비와 높이가 처음에 설정한 변수의 최소값과 최대값 내에 있는 경우에만 가능합니다.

참고: 실제로 높이 및 너비 속성뿐만 아니라 이미지 크기를 조정하므로 성능상의 이유로 resizeImage를 호출할 수 있는 빈도를 제한하는 것이 좋습니다. 이를 디바운싱 또는 스로틀링이라고 합니다.

실제 이미지 크기 조정

drawImage를 사용하면 간단하게 이미지를 그릴 수 있습니다. 먼저 캔버스의 높이와 너비를 설정하고 항상 전체 크기 이미지의 원본을 사용합니다. 그런 다음 캔버스에서 toDataURL을 사용하여 최근 수정된 이미지의 Base64 인코딩 버전을 가져와서 페이지에 배치합니다.

클리핑 섹션에서는 drawImage 메서드와 함께 사용할 수 있는 모든 옵션에 대한 전체 설명을 제공합니다.

resizeImage = function(너비, 높이)( resize_canvas.width = 너비; resize_canvas.height = 높이; resize_canvas.getContext("2d").drawImage(orig_src, 0, 0, 너비, 높이); $(image_target).attr( "src", resize_canvas.toDataURL("image/png")); );

너무 쉽다? 한 가지 작은 주의 사항이 있습니다. 이미지는 페이지와 동일한 도메인 또는 다음이 포함된 서버에서 호스팅되어야 합니다. 다양한 소스 소스(CORS)와 교환하는 능력. 그렇지 않으면 오류 문제가 발생할 수 있습니다." 손상된 캔버스«.

다양한 각도에서 크기 조정

이제 작동하는 데모 버전이 생겼습니다. 그러나 그것이 전부는 아닙니다. ~에 이 순간, 이미지의 크기를 조정하는 모서리에 관계없이 오른쪽 하단 모서리를 드래그하는 것처럼 크기 조정이 발생하도록 아직 작동하지 않습니다.

어떤 각도에서도 이미지의 크기를 조정할 수 있어야 합니다. 이를 위해서는 데모 모델의 동작을 이해해야 합니다.

크기를 조정할 때, 우리가 끌고 있는 모서리와 인접한 측면은 이동해야 하며 반대쪽 모서리와 인접한 측면은 그대로 유지되어야 합니다.

이미지의 너비와 높이를 변경하면 오른쪽과 아래쪽 가장자리가 이동하고 위쪽과 왼쪽 가장자리는 그대로 유지됩니다. 즉, 기본적으로 이미지는 오른쪽 하단부터 크기가 조정됩니다.

이 기본 동작은 변경할 수 없지만 오른쪽 하단 이외의 모서리에서 크기를 조정할 때 변경할 수 있습니다. 일반적인 입장반대쪽 모서리와 인접한 가장자리가 제자리에 남아 있는 것처럼 보이도록 이미지를 만듭니다. 크기 조정 기능을 업데이트해 보겠습니다.

크기 조정 = 함수(e)( var mouse=(),width,height,left,top,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // 이미지 위치 드래그하는 각도에 따라 달라집니다. if($(event_state.evnt.target).hasClass("resize-handle-se"))( width = mouse.x - event_state.container_left; height = mouse.y - event_state .container_top; left = event_state.container_left; top = event_state.container_top; ) else if($(event_state.evnt.target).hasClass("resize-handle-sw"))( width = event_state.container_width - (mouse.x - event_state. 컨테이너_왼쪽); 높이 = mouse.y - event_state.container_top; 왼쪽 = mouse.x; 위쪽 = event_state.container_top; ) else if($(event_state.evnt.target).hasClass("resize-handle-nw" ))( 너비 = event_state.container_width - (mouse.x - event_state.container_left), 높이 = event_state.container_height - (mouse.y - event_state.container_top); 왼쪽 = mouse.x; 상단 = mouse.y; if(constrain || e.shiftKey)( top = mouse.y - ((width / orig_src.width * orig_src.height) - height); ) ) else if($(event_state.evnt.target).hasClass("resize -handle-ne"))( 너비 = mouse.x - event_state.container_left; 높이 = event_state.container_height - (mouse.y - event_state.container_top); left = event_state.container_left; top = mouse.y; if(constrain | | e.shiftKey)( top = mouse.y - ((width / orig_src.width * orig_src.height) - height); ) ) // 선택적으로 가로 세로 비율 지원 if(constrain || e.shiftKey)( height = width / orig_src.width * orig_src.height; ) if(너비 > min_width && 높이 > min_height && 너비< max_width && height < max_height){ // Для увеличения производительности вы можете ограничить количество вызовов resizeImage() resizeImage(width, height); // Без этого Firefox не будет пересчитывать размеры изображения, пока перетаскивание не завершилось $container.offset({"left": left, "top": top}); } }

이제 코드는 어떤 크기 조정 핸들이 드래그되고 있는지 확인하고 해당 모서리가 고정된 것처럼 보이도록 이미지를 이동합니다.

이미지 이동

이제 이미지의 모서리를 드래그하여 이미지의 크기를 조정할 수 있으므로 페이지에서 이미지의 위치가 실수로 변경될 수 있다는 점을 눈치채셨을 것입니다.

이제 이미지가 프레임 중앙으로 다시 돌아가는지 확인해야 합니다. init 함수에서 이전에 만든 것과 비슷한 또 다른 이벤트 추적기를 추가해 보겠습니다.

init = function())( //... $container.on("mousedown", "img", startMoving); )

이제 startResize 및 endResize를 추가한 방법과 유사하게 startMoving 및 endMoving 함수를 추가합니다.

startMoving = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", Moving); $(document).on("mouseup", endMoving ); ); endMoving = function(e)( e.preventDefault(); $(document).off("mouseup", endMoving); $(document).off("mousemove", Moving); );

이동 기능은 컨테이너의 왼쪽 상단 가장자리에 대한 새 위치를 계산해야 합니다. 이는 현재 마우스 위치와 동일하며, 이미지 드래그를 시작할 때 왼쪽 상단 모서리에서 마우스까지의 거리만큼 오프셋됩니다.

Moving = function(e)( var mouse=(); e.preventDefault(); e.stopPropagation(); mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft(); 마우스 .y = (e.clientY || e.pageY) + $(window).scrollTop(); $container.offset(( "left": mouse.x - (event_state.mouse_x - event_state.container_left), "top" : mouse.y - (event_state.mouse_y - event_state.container_top) )); );

이미지 자르기

이제 이미지 크기를 조정할 수 있으므로 이미지를 자르고 싶을 수도 있습니다. 사용자에게 이미지를 원하는 크기와 모양으로 자를 수 있는 옵션을 제공하는 대신 필요한 정확한 크기의 프레임을 만들고 사용자가 해당 프레임 안에 이미지를 배치하도록 초대해 보겠습니다.

그들은 원본 이미지에서 잘린 프레임의 크기와 위치를 결정할 수 있으며, 우리는 최종 이미지가 항상 동일한 모양과 크기를 갖도록 할 것입니다.

이렇게 하려면 다음 HTML 코드를 추가해야 합니다.

오버레이 프레임의 스타일은 이미지가 얼마나 잘릴지 결정하는 데 사용되므로 특히 위치, 너비 및 높이가 매우 중요합니다.

프레임은 어떤 색상의 배경에서도 항상 보여야 한다는 점을 기억하는 것도 중요합니다. 이것이 바로 내 예에서 기본 창 주위에 반투명 흰색 윤곽선을 사용한 이유입니다.

오버레이(위치: 절대; 왼쪽: 50%; 위쪽: 50%; 여백-왼쪽: -100px; 여백-상단: -100px; z-색인: 999; 너비: 200px; 높이: 200px; 테두리: 단색 2px rgba( 222,60,80,.9); 상자 크기: 콘텐츠 상자; 포인터 이벤트: 없음; ) .overlay:after, .overlay:before ( 콘텐츠: ""; 위치: 절대; 디스플레이: 블록; 너비: 204px; 높이: 40px; 테두리 왼쪽: 점선 2px rgba(222,60,80,.9); 테두리-오른쪽: 점선 2px rgba(222,60,80,.9); ) .overlay:전( 상단: 0; 왼쪽 여백: -2px; 여백 상단: -40px; ) .overlay:after ( 하단: 0; 왼쪽 여백: -2px; 여백 하단: -40px; ) .overlay-inner:after, .overlay -inner:before ( 내용: ""; 위치: 절대; 디스플레이: 블록; 너비: 40px; 높이: 204px; border-top: 점선 2px rgba(222,60,80,.9); border-bottom: 점선 2px rgba(222,60,80,.9); ) .overlay-inner:before ( 왼쪽: 0; margin-left: -40px; margin-top: -2px; ) .overlay-inner:after ( 오른쪽: 0; margin-right: -40px; margin-top: -2px; ) .btn-crop (위치: 절대; 수직 정렬: 하단; 오른쪽: 5px; 하단: 5px; 패딩: 6px 10px; Z-색인: 999; 배경색: rgb(222,60,80); 테두리: 없음; 테두리 반경: 5px; 색상: #FFF; )

JavaScript에 다음 함수 및 이벤트 추적기를 추가합니다.

init = function())( //... $(".js-crop").on("click", 자르기); ); 자르기 = function())( var Crop_canvas, left = $(".overlay").offset().left - $container.offset().left, top = $(".overlay").offset().top - $container.offset().top, 너비 = $(".overlay").width(), 높이 = $(".overlay").height(); Crop_canvas = document.createElement("canvas"); Crop_canvas . 너비 = 너비; Crop_canvas.height = 높이; Crop_canvas.getContext("2d").drawImage(image_target, 왼쪽, 위쪽, 너비, 높이, 0, 0, 너비, 높이); window.open(crop_canvas.toDataURL(" 이미지 /png")); )

자르기 함수는 resizeImage 함수와 유사하지만 높이와 너비 값을 전달하는 대신 오버레이 요소에서 높이와 너비를 가져옵니다.

캔버스의 drawImage 메서드에는 자르기를 위한 9개의 매개변수가 필요합니다. 첫 번째 매개변수는 이미지 소스입니다. 다음 4개의 매개변수는 사용된 원본 이미지의 양(클리핑 상자)을 나타냅니다. 마지막 4개의 매개변수는 캔버스에서 이미지를 표시할 위치와 크기를 나타냅니다.

터치 이벤트 추가

mousedown 및 mouseup에는 동등한 터치 이벤트(touchstart 및 touchend)가 있고, mousemov에는 동등한 touchmove 이벤트가 있습니다. 이 사건의 이름을 지은 사람은 분명히 유머 감각이 부족했습니다. 그렇지 않았다면 그는 그것을 "터치다운"과 "터치업"이라고 불렀을 것입니다.

mousedown 및 mouseup 이 있는 곳에 touchstart 및 touchend 를 추가하고 mousemove 를 touchmove 로 교체해 보겠습니다.

// init()에서... $container.on("mousedown touchstart", ".resize-handle", startResize); $container.on("mousedown touchstart", "img", startMoving); //startResize()에서 ... $(document).on("mousemove touchmove", Moving); $(document).on("mouseup touchend", endMoving); //endResize()에서... $(document).off("mouseup touchend", endMoving); $(document).off("mousemove touchmove", 이동); //startMoving()에서... $(document).on("mousemove touchmove", Moving); $(document).on("mouseup touchend", endMoving); //endMoving()에서... $(document).off("mouseup touchend", endMoving); $(document).off("mousemove touchmove", 이동);

이미지 크기를 조정하고 있으므로 일부 사용자는 이미지 늘리기와 같은 일반적인 작업을 사용하기를 원할 것으로 예상됩니다. 터치 이벤트 작업을 위한 편리한 도구가 많이 포함된 Hammer 라이브러리가 있습니다.

하지만 스트레칭만 필요하기 때문에 스트레칭 없이도 할 수 있습니다. 이제 타사 라이브러리를 사용하지 않고 스트레치를 만드는 것이 얼마나 쉬운지 보여 드리겠습니다.

saveEventState 함수가 이미 원래 터치 데이터를 저장하고 있다는 것을 눈치챘을 것입니다. 지금은 이것이 필요합니다.

먼저 이벤트에 두 개의 "터치"가 포함되어 있는지 확인하고 그 사이의 거리를 측정합니다. 이를 초기 거리로 표시한 다음 이동함에 따라 이 거리가 얼마나 변하는지 측정합니다. 이동 기능을 업데이트해 보겠습니다.

Moving = function(e)( var mouse=(), touches; e.preventDefault(); e.stopPropagation(); touches = e.originalEvent.touches; mouse.x = (e.clientX || e.pageX || touches.clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || touches.clientY) + $(window).scrollTop(); $container.offset(( " left": mouse.x - (event_state.mouse_x - event_state.container_left), "top": mouse.y - (event_state.mouse_y - event_state.container_top) )); // 이동하는 동안 스트레칭을 추적합니다. if(event_state.touches && event_state .touches.length > 1 && touches.length > 1)( var 너비 = event_state.container_width, 높이 = event_state.container_height; var a = event_state.touches.clientX - event_state.touches.clientX; a = a * a; var b = event_state.touches.clientY - event_state.touches.clientY; b = b * b; var dist1 = Math.sqrt(a + b); a = e.originalEvent.touches.clientX - touches.clientX; a = a * a ;b = e.originalEvent.touches.clientY - touches.clientY;b = b * b;var dist2 = Math.sqrt(a + b); 변수 비율 = dist2 /dist1; 너비 = 너비 * 비율; 높이 = 높이 * 비율; // 성능 향상을 위해 resizeImage() 호출 횟수를 제한할 수 있습니다 resizeImage(width, height); ) );

현재 거리를 초기 거리로 나누어 비율을 결정하고 그에 따라 이를 적용하여 이미지 크기를 조정합니다. 새로운 너비와 높이를 계산한 다음 이미지 크기를 조정합니다.

그게 다야. 데모 버전을 다시 시청하거나 ZIP 아카이브를 다운로드하세요.

테스트에서 Chrome은 기본 브라우저가 스트레칭에 응답하지 못하도록 차단하지만 Firefox는 제대로 작동하는 것을 확인했습니다.

이 기사가 도움이 되었기를 바랍니다. 드래그 가능한 요소와 파일 업로드 방법에 대한 다른 기사를 읽고 다른 사람들이 이러한 기술을 결합하여 아름다운 사용자 인터페이스를 만드는 방법을 확인하는 것이 좋습니다.

이 출판물은 "라는 기사를 번역한 것입니다. 캔버스로 이미지 크기 조정 및 자르기", 친절한 프로젝트 팀이 준비한

이 기사에서는 HTML5의 요소를 사용하여 이미지 크기를 조정하고 자르는 방법을 알아보고, 그 동안 사진 편집기에서처럼 세련된 디자인을 컨트롤에 부여해 보겠습니다.

요즘에는 많은 웹사이트와 웹 애플리케이션에 이미지 처리 기술이 탑재되어 있습니다. 이는 서버 측에서 수행될 수 있으며, 이로 인해 잠재적으로 큰 이미지를 전송하는 데 시간 비용이 발생합니다. 이를 방지하려면 클라이언트 시스템에서 이미지를 처리하여 프로세스 속도를 높일 수 있습니다.

캔버스를 통해 이 작업을 수행하고 원하는 크기로 이미지를 그린 다음 새 이미지를 가져옵니다. 많은 브라우저가 이 방법을 지원하므로 약간의 성능 제한만 가지고 바로 시작할 수 있습니다.

큰 이미지를 포맷하면 브라우저 속도가 느려지거나 브라우저가 완전히 중지될 수 있습니다. 이는 업로드된 이미지에 대한 제한 설정에 대해 생각하게 만듭니다. 결과 이미지의 품질이 중요하다면 브라우저가 이미지를 어떻게 변환하는지 보고 놀랄 수도 있습니다. 이미지 처리 품질을 향상시키기 위해 인터넷에서 여러 기술을 찾을 수 있지만 여기서는 고려하지 않습니다.

이를 위해 작업을 시작합니다!

마킹

데모에서는 주어진 이미지 하나를 사용하여 작업합니다.

모두! 다른 HTML은 필요하지 않습니다.

CSS

CSS 코드도 그다지 크지 않습니다. resize-container 및 이미지 자체에 대한 스타일을 정의해 보겠습니다.

이제 각 '크기 조정 핸들'의 위치와 스타일을 설정해 보겠습니다. 이는 이미지 크기를 조정하기 위해 드래그하는 이미지 모서리에 있는 작은 사각형입니다.

자바스크립트

Canvas에서 변수와 캔버스를 만드는 것부터 시작해 보겠습니다.

Var resizeableImage = function(image_target) ( var $container, orig_src = new Image(), image_target = $(image_target).get(0), event_state = (), constrain = false, min_width = 60, min_height = 60, max_width = 800, max_height = 900, resize_canvas = document.createElement("canvas"); )); resizeableImage($(".resize-image"));

이제 즉시 실행되는 트리거 함수를 만들어 보겠습니다. 이 기능은 이미지가 들어 있는 컨테이너와 함께 작동하여 크기를 설정하고 자르기 위해 원본 이미지를 복사합니다. 또한 나중에 참조할 수 있도록 jQuery 객체를 할당하고 마우스 이동 연산자를 사용하여 마우스 드래그에 응답합니다.

Var resizeableImage = function(image_target) ( // ... init = function())( // 원본 src의 복사본으로 새 이미지를 만듭니다. // 크기를 조정할 때 항상 이 원본 복사본을 기본 orig_src로 사용합니다. src =image_target.src; //크기 조정 핸들 추가 $(image_target).wrap("

").전에(" ").전에(" ").후에(" ").후에(" "); //변수를 얻습니다. 에 대한컨테이너 $container = $(image_target).parent(".resize-container"); // 이벤트 추가 $container.on("mousedown", ".resize-handle", startResize); ); //... 초기화(); )

startResize 및 endResize 함수는 마우스 움직임에 주의를 기울여야 할 때와 중지할 때를 브라우저에 알려줍니다.

StartResize = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", resizing); $(document).on("mouseup", endResize ); ); endResize = function(e)( e.preventDefault(); $(document).off("mouseup touchend", endResize); $(document).off("mousemove touchmove", resizing); );

마우스 추적을 시작하기 전에 페이지를 요청할 때 현재 클라이언트 설정을 검사해야 합니다. event_state 변수에 저장하고 나중에 작업에서 사용합니다.

SaveEventState = function(e)( // 초기 이벤트 세부정보 및 컨테이너 상태를 저장합니다. event_state.container_width = $container.width(); event_state.container_height = $container.height(); event_state.container_left = $container.offset(). 왼쪽; event_state.container_top = $container.offset().top; event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches.clientX) + $(window).scrollLeft(); event_state. mouse_y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // 이는 모바일 사파리에 대한 수정 사항입니다. // 어떤 이유로 인해 touches 속성의 직접 복사본 if(typeof e.originalEvent.touches !== "undefine")( event_state.touches = ; $.each(e.originalEvent.touches, function(i, ob)( event_state.touches[i] = (); event_state.touches[i].clientX = 0+ob.clientX; event_state.touches[i].clientY = 0+ob.clientY; )); ) event_state.evnt = e; )

크기 조정 기능이 가장 중요합니다. 이미지가 늘어나면 활성화됩니다. 매번 우리는 사각형의 새로운 위치에 따라 새로운 이미지 크기를 계산합니다.

다음으로 Shift 키나 변수를 사용하여 이미지 크기를 제한하는 옵션을 추가하겠습니다.

메모: 단순히 새로운 길이와 높이를 부여하는 것이 아니라 실제로 이미지의 크기를 조정하는 것이기 때문에 resizeImage 함수를 얼마나 사용하여 서버 성능을 제어할 수 있는지 생각해 볼 가치가 있습니다.

새로운 이미지 크기

Canvas에서 이미지를 그리는 것은 drawImage만큼 쉽습니다. 이미지의 높이와 길이를 설정한 후 원본을 제공해드립니다. 또한 toDataURL을 사용하여 작업 결과의 Base64 인코딩 버전을 가져옵니다.

이 작업에 사용할 수 있는 옵션에 대한 전체 설명이 제공됩니다.

ResizeImage = 함수(너비, 높이)( resize_canvas.width = 너비; resize_canvas.height = 높이; resize_canvas.getContext("2d").drawImage(orig_src, 0, 0, 너비, 높이); $(image_target).attr( "src", resize_canvas.toDataURL("image/png")); );

너무 쉽다? 한 가지 주의 사항이 있습니다. 이미지는 우리 페이지와 동일한 도메인에서 호스팅되어야 합니다. 그렇지 않으면 '오염된 캔버스'에 문제가 발생하게 됩니다.

다른 정점을 통해 증가

이제 작동하는 데모가 생겼을 것입니다. 하지만 아직 끝나지 않았습니다. 지금은 한 모서리로만 이미지를 늘릴 수 있지만 네 모서리를 모두 사용하려고 합니다. 이렇게 하려면 작동 방식을 이해해야 합니다.

이미지를 늘릴 때 고정된 모서리에 인접한 모서리도 이동해야 하지만 이미지의 반대쪽 끝은 고정되어야 합니다.

이미지가 어떤 각도로 늘어나도 변경되도록 코드를 변경할 수 있습니다. 크기 조정 기능을 업데이트해 보겠습니다.

크기 조정 = function(e)( var mouse=(),width,height,left,top,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // 이미지 위치 지정 드래그한 모서리와 제약 조건에 따라 다르게 if($(event_state.evnt.target).hasClass("resize-handle-se"))( width = mouse.x - event_state.container_left; height = mouse.y - event_state.container_top ; 왼쪽 = event_state.container_left; 위쪽 = event_state.container_top; ) else if($(event_state.evnt.target).hasClass("resize-handle-sw"))( width = event_state.container_width - (mouse.x - event_state .container_left); 높이 = mouse.y - event_state.container_top; 왼쪽 = mouse.x; 위쪽 = event_state.container_top; ) else if($(event_state.evnt.target).hasClass("resize-handle-nw")) ( 너비 = event_state.container_width - (mouse.x - event_state.container_left); 높이 = event_state.container_height - (mouse.y - event_state.container_top); 왼쪽 = mouse.x; 상단 = mouse.y; if(constrain || e.shiftKey)( top = mouse.y - ((width / orig_src.width * orig_src.height) - height); ) ) else if($(event_state.evnt.target).hasClass("resize -handle-ne"))( 너비 = mouse.x - event_state.container_left; 높이 = event_state.container_height - (mouse.y - event_state.container_top); left = event_state.container_left; top = mouse.y; if(constrain | | e.shiftKey)( top = mouse.y - ((width / orig_src.width * orig_src.height) - height); ) ) // 선택적으로 가로 세로 비율 유지 if(constrain || e.shiftKey)( height = width / orig_src.width * orig_src.height; ) if(너비 > min_width && 높이 > min_height && 너비< max_width && height < max_height){ // To improve performance you might limit how often resizeImage() is called resizeImage(width, height); // Without this Firefox will not re-calculate the the image dimensions until drag end $container.offset({"left": left, "top": top}); } }

이제 어떤 크기 조정 핸들이 사용되었는지 확인하고 필요한 변경 사항을 적용합니다.

이미지 이동

이제 이미지의 크기를 변경할 수 있으므로 때때로 이미지가 "밖으로 나가는" 것을 눈치챘을 것입니다. 개체를 프레임 중앙으로 이동시키는 기능을 추가해야 합니다. 초기화 기능을 조금 확장해 보겠습니다.

Init = function())( //... $container.on("mousedown", "img", startMoving); )

이제 startResize 및 endResize와 유사한 startMoving 및 endMoving 함수를 추가합니다.

StartMoving = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", Moving); $(document).on("mouseup", endMoving ); ); endMoving = function(e)( e.preventDefault(); $(document).off("mouseup", endMoving); $(document).off("mousemove", Moving); );

이동 기능에서는 왼쪽 위 사각형의 위치를 계산해야 합니다. 다른 사각형의 이동으로 계산된 작은 오프셋을 포함하여 초기 사각형과 동일해야 합니다.

이동 = function(e)( var mouse=(); e.preventDefault(); e.stopPropagation(); mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft(); 마우스 .y = (e.clientY || e.pageY) + $(window).scrollTop(); $container.offset(( "left": mouse.x - (event_state.mouse_x - event_state.container_left), "top" : mouse.y - (event_state.mouse_y - event_state.container_top) )); );

이미지 자르기

이제 크기 조정 방법을 배웠으므로 이미지 자르기를 추가해야 합니다. 사용자가 자르기 크기로 인해 어려움을 겪게 하는 대신 올바른 위치에 배치해야 하는 프레임을 만들어 보겠습니다. 그러면 프레임 주변의 모든 것이 잘립니다. 이를 통해 원하는 대로 이미지를 조정할 수 있는 기회를 제공하는 동시에 결과 이미지의 크기를 균일하게 만들 수 있습니다.

이렇게 하려면 다음 HTML 코드를 추가해야 합니다.

프레임은 항상 페이지 배경과 다른 색상이어야 하며, 그렇지 않으면 문제가 발생할 수 있다는 점을 기억하는 것이 중요합니다.

JavaScript 코드도 업데이트해 보겠습니다.

Init = function())( //... $(".js-crop").on("click", Crop); ); 자르기 = function())( var Crop_canvas, left = $(".overlay").offset().left - $container.offset().left, top = $(".overlay").offset().top - $container.offset().top, 너비 = $(".overlay").width(), 높이 = $(".overlay").height(); Crop_canvas = document.createElement("canvas"); Crop_canvas . 너비 = 너비; Crop_canvas.height = 높이; Crop_canvas.getContext("2d").drawImage(image_target, 왼쪽, 위쪽, 너비, 높이, 0, 0, 너비, 높이); window.open(crop_canvas.toDataURL(" 이미지 /png")); )

자르기 기능은 resizeImage와 유사합니다. 유일한 차이점은 프레임 위치에서 치수와 자르기 위치를 얻는다는 것입니다.

자르려면 캔버스에서 drawImage 연산자에 9개의 매개변수를 설정해야 합니다. 첫 번째는 원본 이미지입니다. 다음 4곳은 수술에 사용되는 장소입니다. 또 다른 4개는 캔버스에서 그리기를 시작해야 하는 장소의 좌표와 이미지의 크기입니다.

터치 및 동작 인식 추가

우리는 마우스 지원을 만들었습니다. 우리 자신의 관심과 관심을 빼앗기지 말자 모바일 장치.

mousedown 및 mouseup에는 동등한 연산자인 touchstart 및 touchend가 있고, mousemove에는 touchmove가 있습니다. 터치업과 터치다운을 혼동하지 않도록 주의해야 합니다(그렇지 않으면 재미있을 것입니다).

mousedown 이 있는 곳마다 touchstart 및 touchend 를 추가하고 mousemove 가 있는 곳마다 touchmove 와 함께 mouseup 을 추가해 보겠습니다.

모바일 장치를 연결했기 때문에 사용자가 이미지를 더 작게 만들기 위해 손가락으로 이미지를 '쥐는' 동작을 사용할 가능성이 있습니다. 다양한 제스처를 인식할 수 있는 Hammer라는 매우 편리한 라이브러리가 하나 있습니다. 하지만 하나만 필요하기 때문에 추가 스크립트 없이 간단하게 작성하겠습니다.

saveEventState 함수가 이미 터치 정보에 저장되어 있음을 알 수 있습니다. 이제 우리는 그것이 필요합니다.

먼저 "두 개의 터치"가 있는지와 그 사이의 거리를 확인합니다. 또한 이동함에 따라 그들 사이의 거리가 감소하는지 살펴봅니다. 이제 이동을 업데이트해 보겠습니다.

이동 = function(e)( var mouse=(), touches; e.preventDefault(); e.stopPropagation(); touches = e.originalEvent.touches; mouse.x = (e.clientX || e.pageX || touches.clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || touches.clientY) + $(window).scrollTop(); $container.offset(( " left": mouse.x - (event_state.mouse_x - event_state.container_left), "top": mouse.y - (event_state.mouse_y - event_state.container_top) )); // 이동하는 동안 핀치 줌 동작을 관찰합니다. if(event_state. touches && event_state.touches.length > 1 && touches.length > 1)( var width = event_state.container_width, height = event_state.container_height; var a = event_state.touches.clientX - event_state.touches.clientX; a = a * a ; var b = event_state.touches.clientY - event_state.touches.clientY; b = b * b; var dist1 = Math.sqrt(a + b); a = e.originalEvent.touches.clientX - touches.clientX; a = a * a; b = e.originalEvent.touches.clientY - touches.clientY; b = b * b; var dist2 = Math.sqrt(a + b); 변수 비율 = dist2 /dist1; 너비 = 너비 * 비율; 높이 = 높이 * 비율; // 성능을 향상시키기 위해 resizeImage()가 호출되는 빈도를 제한할 수 있습니다 resizeImage(width, height); ) );

이 데이터를 바탕으로 이미지를 축소하거나 확대하고 높이와 길이를 조정합니다.

그게 다야. 당신은 열 수 있습니다

안녕하세요 여러분, 제 이름은 Anna Blok입니다. 오늘은 그래픽 프로그램을 사용하지 않고 이미지를 자르는 방법에 대해 이야기하겠습니다.

이것이 어디에 유용할 수 있나요?

우선, 이미지가 포함된 콘텐츠가 특정 블록에 대해 잘리지 않을 가능성이 가장 높은 사이트에서.

놀라운 예: WordPress의 블로그.

기사 표지의 가로 세로 비율이 1:1(정사각형)이기를 원한다고 가정해 보겠습니다. 당신의 행동:

인터넷에서 적합한 이미지를 다운로드합니다.
Photoshop에서 원하는 비율로 자릅니다.
기사를 게시하세요.

사이트를 방문하면 예상했던 결과를 볼 수 있습니다.

하지만 Photoshop에서 이미지를 자르는 것을 잊어버리고 인터넷에서 표지로 임의의 이미지를 다운로드했다고 가정하면 어떻게 될까요?! 맞습니다. 레이아웃이 깨집니다. CSS를 전혀 사용하지 않았다면 HD 이미지가 텍스트의 전체 보기를 완전히 가릴 수 있습니다. 따라서 CSS 스타일을 사용하여 이미지를 자르는 방법을 아는 것이 중요합니다.

한 번 보자 다양한 상황 CSS뿐만 아니라 SVG를 사용하여 이를 구현하는 방법.

실시예 1

background-image를 사용하여 배치된 이미지를 잘라내어 보겠습니다. 간단한 HTML 마크업을 만들어 보겠습니다.

CSS 스타일링으로 넘어가겠습니다. 배경 이미지를 사용하여 이미지를 추가하고, 이미지의 프레임을 지정하고, 배경 위치를 사용하여 이미지를 중앙에 배치하고 배경 크기를 설정합니다.

jpg); 배경 위치:중심 중심; 배경 크기:표지; 너비:300px; 높이:300px; )

이것이 이미지를 자르는 최초이자 간단한 방법이었습니다. 이제 두 번째 예를 살펴보겠습니다.

실시예 2

이제 스타일을 지정할 이미지가 포함된 img 태그가 있는 동일한 상자 컨테이너가 여전히 있다고 가정합니다.

또한 생성할 객체를 기준으로 이미지를 중앙에 배치할 것입니다. 그리고 우리는 거의 사용되지 않는 속성인 object-fit 을 사용합니다.

상자( 위치: 상대; 오버플로: 숨김; 너비:300px; 높이:300px; ) .box img( 위치: 절대; 상단:50%; 왼쪽:50%; 변환:번역(-50%,-50%); 너비:300px; 높이:300px; 개체 맞춤:커버; )

내 생각에는 이것이다. 최선의 방법. 게시물에 완전히 다른 비율의 이미지를 사용하는 경우 블로그에 이상적입니다.

여기에서 HTML과 CSS에 대해 자세히 알아볼 수 있습니다.

실시예 3

이미지를 SVG 요소에 삽입하면 현재 이미지에 대한 자르기를 생성할 수도 있습니다. 원을 예로 들어보겠습니다. 태그를 사용하여 SVG를 만들 수 있습니다. 내부에 원형 태그와 패턴 태그가 포함될 svg 테두리 태그를 만듭니다. 패턴 태그에는 이미지 태그를 작성합니다. 여기에 xlink:href 속성을 지정하고 이미지를 추가합니다. 너비와 높이 속성도 추가하겠습니다. 하지만 그게 전부는 아닙니다. 채우기 값을 추가해야 합니다. 작업이 완료된 것으로 간주되도록 하려면 이미지 태그에 PreserveAspectRatio 보조 속성을 추가합니다. 이를 통해 전체 원 주위에 "처음부터 끝까지" 이미지를 채울 수 있습니다.

이 방법을 보편적이라고 부를 수는 없습니다. 하지만 예외적인 경우에는 사용할 수 있습니다. 예를 들어, 블로그 주제를 다룬 경우 이 방법은 기사를 작성하는 작성자의 아바타에 이상적으로 적합할 수 있습니다.

여기에서 HTML과 CSS에 대해 자세히 알아볼 수 있습니다.

결과:
우리는 웹사이트에서 이미지를 자르는 3가지 방법, 즉 배경 이미지 사용, img 태그 사용, 이미지 태그를 사용하여 비트맵 이미지 삽입과 함께 svg 패턴 연결을 살펴보았습니다. SVG를 사용하여 이미지를 자르는 다른 방법을 알고 있다면 댓글로 공유해 주세요. 나뿐만 아니라 다른 사람들도 이 사실을 알면 도움이 될 것입니다.

FrontendHelp 온라인에서 전문가에게 레이아웃이나 프런트엔드 개발에 관해 질문하는 것을 잊지 마세요.

WEB용 이미지를 준비할 때, 이미지에서 필요한 부분을 강조하고 불필요한 부분을 잘라내기 위해 잘라내야 하는 경우가 종종 있습니다. 파일 크기를 줄이려면 순전히 예술적인 판단 외에도 트리밍 또는 자르기라고도 하는 작업이 필요합니다. 이미지가 작을수록 파일 크기도 작아지고 웹 페이지에 로드되는 속도도 빨라집니다.

이미지의 불필요한 부분을 제거하는 방법

충분히 밝힐 수 없는 사진 하단 가장자리의 좁은 검은색 줄무늬를 제거하여 실제로 자르기가 어떻게 수행되는지 살펴보겠습니다. 자르기는 특수 도구인 자르기 도구(C)를 사용하여 수행됩니다.

이 도구를 선택하려면 도구 패널에서 자르기 도구(C) 버튼을 클릭하세요.

마우스 포인터를 이미지의 왼쪽 상단에 있는 모양으로 설정하세요.

마우스 왼쪽 버튼을 길게 클릭하세요.

마우스 왼쪽 버튼을 놓지 않은 채 마우스 포인터를 사진의 오른쪽 가장자리 아래쪽으로 이동하여 나타나는 점선 선택 프레임에 이미지 아래쪽 테두리에 있는 좁은 검은색 줄무늬가 포함되지 않도록 합니다.

마우스 왼쪽 버튼을 놓습니다. 프레임이 잠기고 모서리와 측면 중앙에 사각형 마커가 나타납니다. 자르기 프레임 외부의 이미지 영역은 어두워져 사진에서 잘리는 부분을 나타냅니다.

이 마커를 사용하면 프레임 테두리를 조정하고 회전할 수 있습니다. 자르기 프레임을 이동하려면 선택한 영역 안에 마우스 포인터를 놓고 드래그하면 됩니다. 필요한 공간. 선택한 영역의 크기를 변경하려면 모서리 핸들 중 하나를 이동하세요. 이동하는 동안 Shift 버튼을 누르고 있으면 영역의 비율이 유지됩니다. 프레임을 회전하려면 곡선 화살표 모양의 마우스 포인터를 선택 영역 외부에 놓고 마우스를 움직여 프레임에 적합한 위치에 도달합니다. 자르기를 취소하려면 Esc 버튼을 누르기만 하면 됩니다.

선택 프레임 핸들을 이동하여 자르기 프레임에 사진 하단 테두리의 좁은 검은색 줄무늬를 제외하고 전체 이미지가 포함되는지 확인하세요.

자르기 상자 내부를 두 번 클릭하거나 Enter 키를 누릅니다. 설정된 테두리를 따라 사진이 잘립니다.

이미지 크기를 줄이는 방법

그러나 잘라낸 후에도 사진은 웹 페이지에 비해 상당히 큽니다. 800 x 600 픽셀의 화면 해상도(통계에 따르면 현재 대부분의 웹 사용자는 이 해상도로 작업함)를 사용하면 사진이 디스플레이에서 상당한 공간을 차지합니다. 또한 이 크기의 이미지 파일은 상당히 커서 로드하는 데 오랜 시간이 걸립니다. 따라서 이미지 크기를 줄이면 파일 크기도 줄어듭니다.

메뉴 명령 이미지 - 이미지 크기를 선택합니다. 이미지 크기 대화 상자가 디스플레이에 나타납니다.

대화 상자의 가장 높은 부분에 있는 컨트롤 부분 픽셀 크기(픽셀 단위 치수) 그룹에는 PSD 형식의 현재 파일 크기가 400.3K로 표시되며 현재 너비(너비) 및 높이(높이)도 표시됩니다. 이미지를 픽셀 단위로 표시합니다. 자른 후의 값은 약간 다를 수 있습니다.

문서 크기 제어 그룹에는 문서 크기(센티미터)와 그래픽 해상도(해상도)가 표시됩니다. 비율 제한 플래그가 설정되면 프로그램은 너비 또는 높이 치수 중 하나를 변경할 때 이미지의 비율을 자동으로 유지합니다.

컨트롤 부분의 픽셀 크기 그룹에서 이미지의 크기를 조정하면 문서의 속성이 그에 따라 변경됩니다. 즉, 이미지 리샘플링 플래그가 선택되어 있는지 아니면 선택 취소되었는지에 따라 크기나 그래픽 해상도가 달라집니다. 이 플래그가 설정되면 문서의 크기와 이에 따라 이미지 파일의 크기도 변경됩니다. 플래그를 지우면 문서의 크기만 변경할 수 있습니다. 이 모든 것을 통해 그래픽 해상도가 그에 따라 변경되고 픽셀 단위의 이미지 크기와 파일 크기는 구성 없이 유지됩니다.

크기나 그래픽 해상도를 줄이는 경우 어도비 포토샵이미지에서 과잉 정보를 제거하고, 이러한 특성이 증가하면 기존 픽셀의 색상 값을 기반으로 누락된 정보를 형성합니다. 두 경우 모두 프로그램은 리샘플 이미지 드롭다운 목록에서 선택할 수 있는 5가지 보간 방법 중 하나를 사용합니다.

크기를 변경하려는 사진은 디스플레이에 표시하기 위해 생성되었으므로 그래픽 해상도를 변경하면 안됩니다.

이미지의 그래픽 해상도를 유지하고 크기를 조정하려면 이미지 리샘플 확인란을 선택했는지 확인하세요.

제어 부품의 픽셀 크기 그룹의 너비 입력 필드에 이미지 너비에 대한 새 값(픽셀 - 300)을 입력합니다. 높이 입력 필드의 이미지 높이 값은 자동으로 변경되고 문서 크기(Document Size)의 문서 크기도 변경됩니다. 제어 부분 그룹(문서 크기). 대화 상자 상단에는 축소된 새 파일 크기 값도 표시되며 그 옆에는 괄호 안에 이전 볼륨이 표시됩니다.

확인을 클릭하여 이미지 크기 대화 상자를 닫습니다. 지정된 특성이 사용되며 문서 창의 이미지 크기가 줄어듭니다.

크기를 조정할 때 이미지 속성 손실을 방지하는 방법

이미 언급한 바와 같이 이미지의 크기를 줄이면 이미지에서 매우 중복된 정보가 제거되어 선명도가 어느 정도 감소합니다. 언샵 마스크 필터를 사용하면 이미지의 선명도를 어느 정도 복원할 수 있습니다.

메뉴 명령 필터 - 선명 - 언샵 마스크(필터 - 선명도 - 윤곽선 선명도)를 선택합니다. 언샵 마스크 대화 상자가 디스플레이에 나타납니다.

사진의 선명도를 복원하려면 양 슬라이더를 이동하십시오. 이 매개변수의 값은 50-60% 이내여야 합니다.

확인을 클릭하여 Urisharp 마스크 대화 상자를 닫습니다. 이미지가 더욱 선명해집니다.

메뉴 명령 파일 - 저장을 선택하여 문서를 저장합니다.

이미지 크기를 조정할 때 불필요한 정보가 제거되어 품질이 떨어지므로 이 작업은 가능하면 피하는 것이 좋습니다. 이미지를 스캔하는 경우 이 단계에서 크기를 찾아 최상의 디스플레이 품질을 제공하는 해상도로 스캔하는 것이 좋습니다.