Хүссэн үйлчлүүлэгчдэд шаардлагатай мэдээллийг хүргэх. Борлуулалтын гол асуудал бол өөрийн үнэ цэнийг хэрэглэгчдэд хүргэх чадваргүй байх явдал юм. Бүтээгдэхүүн, үйлчилгээний талаар хэрхэн зөв ярих вэ

Гуравыг авч үзье энгийн аргууд, вэб сайт дээрх зургийн зөвхөн хэсгийг харуулахад ашиглаж болно. Эдгээр аргуудын тусламжтайгаар зургийг тодорхой хэмжээгээр тайрдаггүй гэдгийг анхаарна уу шууд утгаараа, гэхдээ зөвхөн бидний харах ёстой хэсгийг л харуулж, шаардлагагүй хэсгийг нуусан байна.

Хэрэв та зургийн хэмжээг өөрчлөх эсвэл урьдчилан харах, жишээлбэл, мэдээний суваг гэх мэтийг үүсгэх шаардлагатай бол эдгээр аргууд нь маш хэрэгтэй байж болно.

Арга 1: Сөрөг маржин ашиглах

Зургийг эх элементэд байрлуулах ёстой, манай тохиолдолд div. Үндсэн элемент нь хөвөгч элемент (эсвэл заасан өргөнтэй) байх ёстой. Энэ арга нь блок түвшний эсвэл бүрэн өргөнтэй элементүүд дээр ажиллахгүй.

Дээд (дээд), баруун (баруун), доод (доод) болон зүүн (зүүн) гэсэн дөрвөн талдаа хасах зайг тогтооцгооё. Сөрөг зах нь үндсэн элементийн дүрсийг чиглэл бүрт хэр их тайрч байгааг тодорхойлдог. Дараа нь бид тайрсан зургийн талбайн гадна байгаа захын зайг нуухын тулд эх элементийн халих шинж чанарыг нуугдмал болгож тохируулна.

Газар тариалан

хөвөх: зүүн;

халих: далд;

Crop img

захын зай: -70px -50px -160px -175px;

Арга 2: Үнэмлэхүй байрлалыг ашиглах

Энэ аргыг ашиглан бид эх элементийн өргөн ба өндрийг тохируулж, байрлалын шинж чанарыг харьцангуйгаар тохируулна. Өргөн ба өндөр нь харуулсан талбарын хэмжээсийг тодорхойлно. Үндсэн элемент доторх зургийн хувьд байршлын шинж чанарыг үнэмлэхүй болгож тохируулна уу. Дараа нь дээд ба зүүн шинж чанаруудыг ашиглан зургийн аль хэсгийг харуулахыг тохируулна.

Газар тариалан

хөвөх: зүүн;

халих: далд;

албан тушаал: харьцангуй;

өргөн: 270px;

өндөр: 260px;

Crop img

байрлал: үнэмлэхүй;

дээд: -70px;

зүүн: -175px;

Арга 3: Slip шинж чанарыг ашиглах

Клип шинж чанар нь харуулах шаардлагатай элементийн хэсгийг тодорхойлдог тул энэ арга нь хамгийн энгийн арга юм. Гэхдээ энэ арга нь хоёр сул талтай.

Нэгдүгээрт, тайрсан элементийг бүрэн байрлуулах ёстой. Тиймээс бид нэмэлт элемент нэмж, зургийн харагдах хэсгийн хэмжээг тооцоолж, энэ хэмжээг нэмж, хөвөх шинж чанарыг эцэг эхэд тохируулах шаардлагатай болно.

Хоёрдугаарт, үзэгдэх хэсгийн хэмжээ нь хайчлагдсан хэсгийн хэмжээгээр багасдаггүй, харин бүхэл зургийн хэмжээтэй тэнцүү хэвээр байна (тайрсан хэсгийн гаднах хэсэг нь зөвхөн нуугдмал). Үзэгдэх хэсгийг эцэг эхийн зүүн дээд буланд шилжүүлэхийн тулд бид үнэмлэхүй байрлалыг ашиглах ёстой.

Газар тариалан

хөвөх: зүүн;

албан тушаал: харьцангуй;

Зураг засварлах программ дээр үзсэн хяналтуудыг ашиглан 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 ( байрлал: үнэмлэхүй; дэлгэц: блок; өргөн: 10 пиксел; өндөр: 10 пиксел; дэвсгэр: 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 баруун: курсор: хэмжээг өөрчлөх)

JavaScript

JavaScript-ийг бид зарим хувьсагчийг тодорхойлж, Canvas болон зорилтот дүрсийг эхлүүлж эхэлдэг.

var resizeableImage = функц(зураг_зорилт) ( 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, хамгийн их_өндөр = 900, resize_canvas = document.createElement("canvas" )); resizeableImage($(".resize-resize"));

Дараа нь бид ачаалах үед шууд дуудагдах init функцийг үүсгэнэ. Энэ функц нь зургийг саванд боож, хэмжээг өөрчлөх бариулуудыг үүсгэж, хэмжээг өөрчлөхөд ашигладаг анхны зургийн хуулбарыг үүсгэдэг.

Мөн бид контейнер элементийн 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) ; //... init();

StartResize болон endResize функцууд нь зөвхөн хөтөчийг хулгана хаана хөдөлж байгааг хянаж эхлэх, хянахаа зогсоохыг л хэлдэг:

startResize = function(e)(e.preventDefault(); e.stopPropagation(); saveEventState(e); $(баримт бичиг).on("хулганыг зөөх", хэмжээг өөрчлөх); $(баримт бичиг).on("хулгана", endResize ); endResize = function(e)( e.preventDefault(); $(баримт бичиг).off("хулганаар мэдрэгчтэй мэдрэгч", endResize); $(баримт бичиг).off("хулганыг хөдөлгөх", хэмжээг өөрчлөх); );

Хулганы байрлалыг хянаж эхлэхээсээ өмнө бид савны хэмжээс болон бусад гол өгөгдлийн агшин зуурын зургийг авах хэрэгтэй.

Бид тэдгээрийг 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 (); = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); Энэ бол гар утасны сафарид зориулсан засвар // Зарим шалтгааны улмаас боломжгүй Хэрэв (e.originalEvent.touches төрөл!== "тодорхойгүй")( 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 );

Хэмжээг өөрчлөх функц нь ихэнх үйлдлийг гүйцэтгэдэг газар юм. Хэрэглэгч хэмжээ тогтоох бариулуудын аль нэгийг чирэх үед энэ функцийг байнга дууддаг. Энэ функцийг дуудах болгонд бид хулганын одоогийн байрлал болон хэрэглэгчийн татсан булангийн анхны байрлал хоорондын хамаарлыг тооцож шинэ өргөн ба өндрийг үүсгэдэг.

хэмжээг өөрчлөх = функц(e)( var хулгана=(),өргөн,өндөр,зүүн,дээд,офсет=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft(); x - event_state.container_left; өндөр = mouse.y - event_state.container_top; if(constrain || e.shiftKey)( height = width / orrig_src.height; ) if(width > min_width; && өндөр > мин_өндөр && өргөн< max_width && height < max_height){ resizeImage(width, height); // Без этого Firefox не будем пересчитывать размеры изображения, пока перетаскивание не завершилось $container.offset({"left": left, "top": top}); } }

Дараа нь бид Shift товчлуур эсвэл хувьсагчийг ашиглан солих үед зургийн хэмжээг хязгаарлах сонголтыг нэмнэ.

Эцэст нь бид зургийн хэмжээг өөрчилдөг, гэхдээ шинэ өргөн ба өндөр нь бидний эхэнд тохируулсан хувьсагчдын хамгийн бага ба хамгийн их утгын хүрээнд байвал л болно.

Тэмдэглэл: Бид зөвхөн өндөр, өргөний шинж чанараас гадна зургийн хэмжээг өөрчилж байгаа тул гүйцэтгэлийн шалтгаанаар зургийн хэмжээг өөрчлөх давтамжийг хязгаарлаж болно. Үүнийг debouncing эсвэл throttling гэж нэрлэдэг.

Бодит зургийн хэмжээг өөрчлөх

Та DrawImage ашиглан зураг зурж болно. Бид эхлээд зурагны өндөр, өргөнийг тохируулж, үргэлж бүрэн хэмжээний зургийн эх хувийг ашигладаг. Дараа нь бид зураг дээрх toDataURL-г ашиглан саяхан өөрчилсөн зургийн Base64 кодлогдсон хувилбарыг авч, хуудсан дээр байрлуулна.

Тайрах хэсэг нь drawImage аргаар ашиглаж болох бүх сонголтуудын бүрэн тайлбарыг өгдөг.

resizeImage = функц(өргөн, өндөр)(resize_canvas.width = өргөн; resize_canvas.height = өндөр; resize_canvas.getContext("2d").drawImage(orig_src, 0, 0, өргөн, өндөр); $(зургийн_зорилт).attr( "src", resize_canvas.toDataURL("image/png") );

Хэт амархан уу? Нэг жижиг анхааруулга байна: зураг нь тухайн хуудастай ижил домэйн дээр эсвэл сервер дээр байрлах ёстой янз бүрийн эх сурвалжтай солилцох чадвар (CORS). Үгүй бол алдаатай асуудал гарч болзошгүй " гэмтсэн даавуу«.

Өөр өөр өнцгөөс хэмжээг өөрчлөх

Та одоо ажиллаж байгаа демо хувилбартай байх ёстой. Гэхдээ энэ нь бүгд биш юм. Асаалттай одоогоор, энэ нь хараахан ажиллахгүй байгаа тул бид зургийн хэмжээг өөрчлөхөөс үл хамааран баруун доод буланг чирж байгаа мэт хэмжээг өөрчлөх болно.

Бид зургийн хэмжээг ямар ч өнцгөөс өөрчлөх чадвартай байх хэрэгтэй. Үүнийг хийхийн тулд бид демо загварынхаа зан байдлыг ойлгох хэрэгтэй.

Хэмжээг өөрчлөх үед бидний чирж буй булан болон түүний зэргэлдээ талууд нь хөдөлж, эсрэг талын булан болон түүний зэргэлдээ талууд байрандаа үлдэх ёстой.

Бид зургийн өргөн, өндрийг өөрчлөхөд баруун болон доод ирмэгүүд хөдөлж, дээд болон зүүн ирмэгүүд нь байрандаа үлдэнэ. Энэ нь анхдагчаар зургийн хэмжээг баруун доод булангаас өөрчилдөг гэсэн үг юм.

Бид энэ өгөгдмөл горимыг өөрчлөх боломжгүй, гэхдээ баруун доод булангаас өөр өнцгөөс хэмжээг өөрчлөх үед бид өөрчлөх боломжтой ерөнхий байр суурьэсрэг талын булан болон зэргэлдээх ирмэгүүд нь байрандаа үлдсэн мэт харагдахаар дүрс. Хэмжээ өөрчлөх функцээ шинэчилье:

хэмжээг өөрчлөх = функц(e)( var хулгана=(),өргөн,өндөр,зүүн,дээд,офсет=$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; top = 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; left = mouse.x; = event_state.container_width - (mouse.x - event_state.container_left = event_state.container_height - (mause.y - event_state.container_top);< max_width && height < max_height){ // Для увеличения производительности вы можете ограничить количество вызовов resizeImage() resizeImage(width, height); // Без этого Firefox не будет пересчитывать размеры изображения, пока перетаскивание не завершилось $container.offset({"left": left, "top": top}); } }

зүүн = хулгана.x;

дээд = хулгана.y;

if(хязгаарлах || e.shiftKey)( дээд = хулгана.y - ((өргөн / эх_хүлээн.өргөн * эх_шил. өндөр) - өндөр); ) ) else if($(үйл явдлын_төлөв.evnt.target).hasClass("resize - бариул-нэ"))( өргөн = хулгана.x - үйл явдлын_төлөв.контейнер_зүүн; өндөр = үйл явдлын_төлөв.контейнер_өндөр - (хулгана.y - үйл явдлын_төлөв.контейнер_дээд); зүүн = үйл явдлын_төлөв.контейнер_зүүн; дээд = хулгана.y; хэрэв(хязгаарлалт | |. e.shiftKey)( дээд = mouse.y - ((өргөн / orig_src.width * orig_src.height) - өндөр); ) ) // Хэрэв (хязгаарлалт || e.shiftKey)( өндөр = өргөн /) orig_src.width * orig_src.height ) if(өргөн > мин_өргөн && өндөр > мин_өндөр && өргөн

Манай код одоо хэмжээг өөрчлөх бариулыг чирж байгааг шалгаж, харгалзах булан нь хөдөлгөөнгүй байхаар бидний зургийг хөдөлгөдөг.

Зургийг зөөж байна

Одоо бид зургийн аль нэг буланг нь чирж хэмжээг нь өөрчлөх боломжтой болсон тул хуудас дээрх зургийн байрлалыг санамсаргүйгээр өөрчлөх боломжтойг та анзаарсан байх.

startMoving = function(e)(e.preventDefault(); e.stopPropagation(); saveEventState(e); $(баримт бичиг).on("хулганыг хөдөлгөх", хөдөлгөх); $(баримт бичиг).on("хулгана", endMoving ); endMoving = function(e)( e.preventDefault(); $(баримт бичиг).off("хулгана", endMoving); $(баримт бичиг).off("хулганыг хөдөлгөх", хөдөлгөх); );

Хөдөлгөөнт функц нь савны зүүн дээд ирмэгийн шинэ байрлалыг тооцоолох шаардлагатай. Энэ нь зургийг чирж эхлэхэд зүүн дээд булангаас хулгана хүртэлх зайтай тэнцэх одоогийн хулганы байрлалтай тэнцүү байх болно.

хөдлөх = функц(e)( var mouse=(); e.preventDefault(); e.stopPropagation(); хулгана.x = (e.clientX || e.pageX) + $(цонх).scrollLeft(); хулгана .y = (e.clientY || e.pageY) + $(цонх).scrollTop(); : хулгана.y - (үйл явдлын_төлөв.хулганы_y - үйл явдлын_төлөв.контейнер_дээд) ));

Зургийг тайрах

Одоо бид зургийн хэмжээг өөрчлөх боломжтой болсон тул та үүнийг тайрахыг хүсэж магадгүй. Хэрэглэгчдэд зургаа ямар ч хэмжээ, хэлбэрээр тайрах боломжийг олгохын оронд яг өөрт хэрэгтэй хэмжээс бүхий жаазыг бүтээж, хэрэглэгчдийг тэр хүрээн доторх зургийг байрлуулахыг урьцгаая.

Тэд анхны зураг дээрх тайрсан хүрээний хэмжээ, байрлалыг тодорхойлох боломжтой бөгөөд бид эргээд эцсийн зураг нь үргэлж ижил хэлбэр, хэмжээтэй байх болно гэдэгт итгэлтэй байх болно.

Үүнийг хийхийн тулд бид дараах HTML кодыг нэмэх хэрэгтэй.

Давхардсан хүрээний хэв маяг нь маш чухал бөгөөд ялангуяа байрлал, өргөн, өндөр нь зураг хэр их тайрахыг тодорхойлоход ашиглагддаг.

Хүрээ нь ямар ч өнгөний дэвсгэр дээр үргэлж харагдах ёстой гэдгийг санах нь чухал юм. Тийм ч учраас миний жишээн дээр би үндсэн цонхны эргэн тойронд хагас тунгалаг цагаан тойм ашигласан:

Давхарга (байрлал: үнэмлэхүй; зүүн: 50%; дээд: 50%; зүүн-зүүн: -100px; захын-дээд: -100px; z-индекс: 999; өргөн: 200px; өндөр: 200px; хүрээ: хатуу 2px rgba( 222,60,80,.9); box-sizing: content-box: none; ; өндөр: 40px, зүүн: тасархай 2px rgba(222,60,80,.9); margin-top: -40px ) .overlay:дараа (доод: 0; margin-left: -2px; margin-botom: -40px; ) .overlay-inner:дараа, .overlay -inner:befor ( контент: ""; байрлал: абсолют: блок өргөн: 204px өндөр: зураастай 2px rgba(222,60,80,.9); ); .давхлан-дотоод: өмнө ( зүүн: 0; зах-зүүн: -40px; захын-дээд: -2px; ) .давхлан-дотоод: дараа (баруун: 0; захын-дээд: -40px; -2px) .btn-crop ( байрлал: үнэмлэхүй; босоогоор зэрэгцүүлэх: доод;

баруун: 5px;

доод тал: 5px;

дүүргэх: 6px 10px;

z индекс: 999;

дэвсгэр өнгө: rgb(222,60,80);

Mousedown болон mouseup-ийн хувьд хүрэхтэй ижил үйл явдал байдаг - touchstart болон touchend, mousemov-ийн хувьд ижил төстэй мэдрэгчтэй хөдөлгөх үйл явдал байдаг. Эдгээр үйл явдлуудыг хэн нэрлэсэн нь хошин шогийн мэдрэмжгүй байсан нь тодорхой, эс тэгвээс тэр тэднийг "хүрэлцэх", "хүргэх" гэж нэрлэх байсан байх.

Хулгана доош буулгах, хулганыг дээш өргөх боломжтой газар бүрт мэдрэгчтэй эхлэх ба мэдрэгчийг нэмж, хулганы хөдөлгөөнийг touchmove-ээр солицгооё:

// init()-д... $container.on("mousedown touchstart", ".resize-handle", startResize); $container.on("хулганаар доош мэдрэгчтэй эхлүүлэх", "img", startMoving); //StartResize() дээр ... $(баримт бичиг).on("хулганыг хөдөлгөх хөдөлгөөн", хөдөлж байна); $(баримт бичиг).on("mouseup touchend", endMoving); //EndResize()-д... $(баримт бичиг).off("хулганаар мэдрэгчтэй мэдрэгч", endMoving); $(баримт бичиг).off("хулганаар хөдөлгөх хөдөлгөөн", хөдөлж); //StartMoving()-д... $(баримт бичиг).on("хулганыг хөдөлгөх хөдөлгөөн", шилжих); $(баримт бичиг).on("mouseup touchend", endMoving); //EndMoving()-д... $(баримт бичиг).off("mouseup touchend", endMoving); $(баримт бичиг).off("хулганаар хөдөлгөх хөдөлгөөн", хөдөлж);

Бид зургийн хэмжээг өөрчилж байгаа тул зарим хэрэглэгчид зургийг сунгах зэрэг нийтлэг үйлдлүүдийг ашиглахыг хүсэх нь зөв юм. Мэдрэгчтэй ажиллахад тохиромжтой олон хэрэгслийг агуулсан Hammer номын сан байдаг.

Гэхдээ бидэнд зөвхөн суналт хэрэгтэй тул үүнгүйгээр хийж чадна. Одоо би танд гуравдагч этгээдийн номын санг ашиглахгүйгээр суналт үүсгэх нь хичнээн амархан болохыг харуулах болно.

saveEventState функц нь мэдрэгчтэй анхны өгөгдлийг аль хэдийн хадгалдаг болохыг та анзаарсан байх; Энэ одоо бидэнд хэрэгтэй болно.

Эхлээд бид үйл явдал нь хоёр "хүрч" байгаа эсэхийг шалгаж, тэдгээрийн хоорондох зайг хэмжинэ. Бид үүнийг анхны зай гэж тэмдэглээд дараа нь хөдөлж байх үед энэ зай хэр их өөрчлөгдөж байгааг хэмжинэ. Хөдлөх функцийг шинэчилье:

хөдлөх = функц(e)( var хулгана=(), хүрнэ; e.preventDefault(); e.stopPropagation(); хүрнэ = e.originalEvent.touches; хулгана.x = (e.clientX || e.pageX || touches.clientX) + $(window).scrollLeft(); зүүн": хулгана.x - (event_state.mouse_x - event_state.container_left), "дээд": хулгана.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 - var dist1 = Math.sqrt(a + b) - touches.clientX; - touches.clientY b = b * b var dist2 = Math.sqrt(a + b);

var харьцаа = dist2 / dist1;

өргөн = өргөн * харьцаа; өндөр = өндөр * харьцаа;.

// Гүйцэтгэлийг сайжруулахын тулд та дуудлагын тоог resizeImage() resizeImage(өргөн, өндөр);

) );

Бид харьцааг тодорхойлохын тулд одоогийн зайг эхний зайд хувааж, дүрсийг масштаблахын тулд үүнийг ашиглана. Бид шинэ өргөн, өндрийг тооцоолж, дараа нь зургийн хэмжээг өөрчилнө: Ингээд л болоо. Демо хувилбарыг дахин үзэх эсвэл ZIP архивыг татаж авах

Туршилтын явцад би Chrome анхдагч хөтөчийг сунгахад хариу өгөхийг хориглодог болохыг олж харсан боловч Firefox сайн ажилладаг.

Өнөө үед олон вэбсайт, вэб програмууд зураг боловсруулах технологиор тоноглогдсон байдаг. Үүнийг серверийн тал дээр хийж болох бөгөөд энэ нь том хэмжээтэй зургийг зөөвөрлөхөд цаг хугацаа зарцуулах болно. Үүнээс зайлсхийхийн тулд та үйл явцыг хурдасгахын тулд үйлчлүүлэгчийн машин дээр зураг боловсруулж болно.

Бид үүнийг зотон дээр хийж, хүссэн хэмжээгээрээ зурж, дараа нь шинэ зургуудыг татаж авна. Олон хөтчүүд энэ аргыг дэмждэг тул бид зөвхөн бага зэргийн гүйцэтгэлийн хязгаарлалттайгаар шууд эхлэх боломжтой.

Том хэмжээний зургийг форматлах нь хөтчийг удаашруулж эсвэл бүрмөсөн зогсооход хүргэдэг. Энэ нь биднийг байршуулсан зургуудад хязгаарлалт тогтоох талаар бодоход хүргэдэг. Хэрэв гарсан зургийн чанар чухал бол хөтөч нь тэдгээрийг юу болгож байгааг бид гайхшруулж магадгүй юм. Та зураг боловсруулах чанарыг сайжруулах хэд хэдэн технологийг интернетээс олж болно, гэхдээ бид энд авч үзэхгүй.

Үүний тулд бид ажлаа эхлүүлж байна!

Тэмдэглэгээ

Манай үзүүлэн дээр бид өгөгдсөн нэг зурагтай ажиллах болно:

Бүгд! Бидэнд өөр HTML хэрэггүй.

CSS

CSS код нь тийм ч том биш байх болно. Хэмжээг өөрчлөх сав болон зургийн өөрт тохирсон хэв маягийг тодорхойлъё.

Одоо "хэмжээг өөрчлөх бариул" бүрийн байрлал, хэв маягийг тохируулцгаая. Эдгээр нь зургийн буланд байрлах жижиг квадратууд бөгөөд бид зургийн хэмжээг өөрчлөхийн тулд чирдэг.

JavaScript

Canvas-д хувьсагч болон canvas үүсгэж эхэлцгээе.

Var resizeableImage = функц(зураг_зорилт) ( 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, хамгийн их_өндөр = 900, resize_canvas = document.createElement("canvas" )); resizeableImage($(".resize-resize"));

Одоо шууд ажиллах триггер функцийг үүсгэцгээе. Энэ функц нь зураг дотор байгаа савтай ажиллаж, хэмжээг нь тохируулж, тайрах анхны зургийг хуулдаг. Бид мөн jQuery объектыг оноож, дараа нь лавлаж, хулганыг чирэх үйлдэлд хариу үйлдэл үзүүлэхийн тулд хулганыг зөөх операторуудыг ашиглах боломжтой.

Var resizeableImage = function(image_target) ( // ... init = function())( // Эх src-ийн хуулбараар шинэ зураг үүсгэх // Хэмжээг өөрчлөхдөө бид энэ эх хуулбарыг үргэлж orig_src суурь болгон ашиглах болно. src =image_target.src; // Хэмжээг өөрчлөх бариул нэмэх $(image_target).wrap("

").өмнө(" ").өмнө(" ").дараа(" ").дараа(" "); // Хувьсагч авах төлөөконтейнер $контейнер = $(зураг_зорилтот).эцэг эх(".хэмжээг өөрчлөх");

// Үйл явдал нэмэх $container.on("mousedown", ".resize-handle", startResize);

); //... init(); )

StartResize болон endResize функцууд нь хөтчид хулганы хөдөлгөөнд хэзээ анхаарлаа хандуулж, хэзээ зогсоохыг зааж өгдөг.

StartResize = function(e)(e.preventDefault(); e.stopPropagation(); saveEventState(e); $(баримт бичиг).on("хулганыг зөөх", хэмжээг өөрчлөх); $(баримт бичиг).on("хулгана", endResize ); endResize = function(e)( e.preventDefault(); $(баримт бичиг).off("хулганаар мэдрэгчтэй мэдрэгч", endResize); $(баримт бичиг).off("хулганыг хөдөлгөх", хэмжээг өөрчлөх); );

Хэмжээг өөрчлөх функц нь хамгийн чухал зүйл юм. Энэ нь зургийг сунгах үед идэвхждэг. Бид квадратуудын шинэ байрлалаас хамааран шинэ зургийн хэмжээг тооцоолох бүртээ.

Хэмжээг өөрчлөх = функц(e)( var mouse=(),өргөн,өндөр,зүүн,дээд,офсет=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft(); x - event_state.container_left; өндөр = mouse.y - event_state.container_top; if(constrain || e.shiftKey)( height = width / orrig_src.height; ) if(width > min_width; && өндөр > мин_өндөр && өргөн< max_width && height < max_height){ resizeImage(width, height); // Without this Firefox will not re-calculate the the image dimensions until drag end $container.offset({"left": left, "top": top}); } }

Дараа нь бид Shift товчлуур эсвэл хувьсагч ашиглан зургийн хэмжээг хязгаарлах сонголтыг нэмнэ.

Анхаарна уу: Бид зурагт шинэ урт, өндөр өгөхөөс илүүтэйгээр хэмжээг нь өөрчилж байгаа тул серверийн гүйцэтгэлийг хянахын тулд resizeImage функцийг хэр их ашиглаж болох талаар бодох нь зүйтэй болов уу.

Шинэ зургийн хэмжээ

Canvas дээр зураг зурах нь drawImage шиг хялбар юм. Бид зургийн өндөр, уртыг тохируулж, дараа нь эхийг нь өгнө. Мөн бид үйлдлийн үр дүнгийн Base64 кодлогдсон хувилбарыг авахын тулд toDataURL ашигладаг.

Энэ үйлдлийг гүйцэтгэх боломжтой сонголтуудын бүрэн тайлбарыг өгсөн болно.

ResizeImage = функц(өргөн, өндөр)(resize_canvas.width = өргөн; resize_canvas.height = өндөр; resize_canvas.getContext("2d").drawImage(orig_src, 0, 0, өргөн, өндөр); $(зургийн_зорилт).attr( "src", resize_canvas.toDataURL("image/png") );

Хэт амархан уу? Нэг анхааруулга байна: зураг нь манай хуудас эсвэл . Хэрэв тийм биш бол та "бохирдсон зотон" асуудалтай тулгарах болно.

Бусад оройгоор дамжин нэмэгдэж байна

Та одоо ажиллаж байгаа демотой байх ёстой. Гэхдээ хараахан дуусаагүй байна. Одоогоор бид зургийг зөвхөн нэг булангаар сунгах боломжтой, гэхдээ бид дөрөвийг нь ашиглахыг хүсч байна. Үүнийг хийхийн тулд энэ нь хэрхэн ажилладагийг ойлгох хэрэгтэй.

Бид зургийг сунгах үед барьж буй булангийн зэргэлдээх булангууд нь бас хөдөлж байх ёстой, гэхдээ зургийн эсрэг талын үзүүрийг засах ёстой.

Зургийг ямар ч өнцгөөр сунгах үед энэ нь өөрчлөгдөхийн тулд бид кодыг өөрчилж болно. Хэмжээг өөрчлөх функцийг шинэчилье:

Хэмжээг өөрчлөх = функц(e)( var mouse=(),өргөн,өндөр,зүүн,дээд,офсет=$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; top = event_state.container_top; .container_left); өндөр = mouse.y - event_state.container_top зүүн = mouse.x; өргөн = event_state.container_width - (mause.x - event_state.container_left) = event_state.container_height - (mause.y - event_state.container_top);< 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}); } }

зүүн = хулгана.x;

дээд = хулгана.y;

Одоо бид ямар хэмжээг өөрчлөх бариулыг ашигласан болохыг шалгаж, шаардлагатай өөрчлөлтүүдийг хийнэ.

Зургийг зөөж байна

StartMoving = function(e)(e.preventDefault(); e.stopPropagation(); saveEventState(e); $(баримт бичиг).on("хулганыг хөдөлгөх", хөдөлгөх); $(баримт бичиг).on("хулгана", endMoving ); endMoving = function(e)( e.preventDefault(); $(баримт бичиг).off("хулгана", endMoving); $(баримт бичиг).off("хулганыг хөдөлгөх", хөдөлгөх); );

Хөдөлгөөнт функцэд бид зүүн дээд квадратын байрлалыг боловсруулах ёстой. Энэ нь бусад квадратуудын хөдөлгөөнөөс тооцоолсон жижиг офсет бүхий эхнийхтэй тэнцүү байх ёстой.

Зөөх = функц(e)( var mouse=(); e.preventDefault(); e.stopPropagation(); mouse.x = (e.clientX || e.pageX) + $(цонх).scrollLeft(); хулгана .y = (e.clientY || e.pageY) + $(цонх).scrollTop(); : хулгана.y - (үйл явдлын_төлөв.хулганы_y - үйл явдлын_төлөв.контейнер_дээд) ));

Зургийг тайрах

Хэрхэн хэмжээг нь өөрчлөх талаар сурсан болохоор бид зургийн тайралтыг нэмэх хэрэгтэй. Хэрэглэгчдэд газар тариалангийн хэмжээтэй тэмцэхийг зөвшөөрөхийн оронд зүгээр л зөв газарт байрлуулах шаардлагатай хүрээ бий болгоцгооё. Энэ нь тэдэнд зургийг хүссэнээрээ тохируулах боломжийг олгохын зэрэгцээ үүссэн зургуудыг ижил хэмжээтэй болгох боломжийг олгоно.

Үүнийг хийхийн тулд та дараах HTML кодыг нэмэх хэрэгтэй.

Хүрээ нь хуудасны дэвсгэрээс үргэлж өөр өнгөтэй байх ёстой гэдгийг санах нь чухал бөгөөд эс тэгвээс асуудал үүсч болзошгүй юм.

баруун: 5px;

доод тал: 5px;

дүүргэх: 6px 10px;

z индекс: 999;

дэвсгэр өнгө: rgb(222,60,80);

хил: байхгүй; хилийн радиус: 5px;.

өнгө: #FFF; )

Хулгана дарсан газар бүрт мэдрэгчтэй эхлэл болон мэдрэгчийг нэмээд, хулганыг хөдөлгөж байгаа газар бүрт хүрэх хөдөлгөөнтэй хамт хулганаа дээшлүүлье.

Бид хөдөлгөөнт төхөөрөмжүүдээ холбосон тул хэрэглэгч дүрсийг хуруугаараа "шахах" дохиог ашиглан жижиг болгох боломж бий. Хаммер хэмээх маш тохиромжтой номын сан байдаг бөгөөд энэ нь танд олон дохио зангаа таних боломжийг олгодог. Гэхдээ бидэнд зөвхөн нэг л хэрэгтэй байгаа тул бид үүнийг ямар ч нэмэлт скриптгүйгээр товч бичих болно.

saveEventState функц нь мэдрэгчтэй мэдээлэлд аль хэдийн хадгалагдсан байгааг та анзаарсан байх. Одоо бидэнд хэрэгтэй болно.

Эхлээд бид "хоёр мэдрэгчтэй" байгаа эсэх, тэдгээрийн хоорондох зайг шалгана. Бид хөдөлж байх үед тэдгээрийн хоорондын зай багасч байгаа эсэхийг бас хардаг. Одоо шилжилтийг шинэчилье:

Зөөх = функц(e)( var хулгана=(), хүрнэ; e.preventDefault(); e.stopPropagation(); хүрнэ = e.originalEvent.touches; хулгана.x = (e.clientX || e.pageX || touches.clientX) + $(window).scrollLeft(); зүүн": mouse.x - (event_state.mouse_x - event_state.container_left), "дээд": 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 - var dist1 = Math.sqrt(a + b a * a - touches.clientY; b var dist2 = Math.sqrt(a + b);

var харьцаа = dist2 / dist1;

өргөн = өргөн * харьцаа;

өндөр = өндөр * харьцаа;

// Гүйцэтгэлийг сайжруулахын тулд resizeImage()-г resizeImage(өргөн, өндөр) гэж нэрлэх давтамжийг хязгаарлаж болно;

) );

Энэ өгөгдөл дээр үндэслэн бид зургийг багасгаж, томруулж, өндөр, уртыг нь тохируулдаг.Ингээд л болоо. Та нээж болно

Бүгдээрээ сайн байна уу, намайг Анна Блок гэдэг бөгөөд өнөөдөр бид график програм ашиглахгүйгээр зургийг хэрхэн тайрах талаар ярилцах болно.

Энэ нь хаана ашигтай байж болох вэ?
Юуны өмнө, ямар нэгэн тодорхой блокийн хувьд зурагтай контентыг тайрахгүй байх магадлалтай сайтууд дээр.
Гайхалтай жишээ

: WordPress дээрх блог.

Та нийтлэлийнхээ нүүрийг 1:1 (дөрвөлжин) харьцаатай байлгахыг хүсч байна гэж бодъё. Таны үйлдэл:

Интернетээс тохиромжтой зургийг татаж авах; Photoshop дээр хүссэн хэмжээгээр нь тайрах;Нийтлэл нийтлэх.

Та сайтад зочлоход таны хүлээж байсан үр дүнг харах болно.

Гэхдээ та Photoshop дээр зургаа тайрахаа мартаж, интернетээс санамсаргүй зургийг хавтас болгон татаж авлаа гэж бодъё, тэгвэл юу болох вэ?! Энэ нь зөв, зохион байгуулалт эвдэрнэ. Хэрэв та CSS огт ашиглаагүй бол HD дүрс нь текстийн харагдах байдлыг бүхэлд нь хааж болно. Тиймээс CSS хэв маягийг ашиглан зургийг хэрхэн тайрах талаар мэдэх нь чухал юм.

CSS загвар руу шилжье. Background-image ашиглан бид зураг нэмж, зургийнхаа жаазыг тодорхойлж, дэвсгэр байрлалыг ашиглан зургийг голчлон, дэвсгэрийн хэмжээг тохируулна.

jpg);

дэвсгэр байрлал:төв төв;

дэвсгэрийн хэмжээ: бүрхэвч;

өргөн: 300px;

өндөр: 300px; )

Энэ бол зургийг тайрах анхны бөгөөд хамгийн энгийн арга байсан. Одоо хоёр дахь жишээг харцгаая.

Жишээ 2 Бидэнд одоо загварчлах зураг бүхий img шошготой ижил хайрцагтай байна гэж бодъё.Мөн бид бүтээх объекттойгоо харьцуулан зургаа голлон байрлуулна. Мөн бид маш ховор хэрэглэгддэг өмчийг ашигладаг: object-fit .

Хайрцаг ( байрлал: харьцангуй; халих: далд; өргөн: 300 пиксел; өндөр: 300 пиксел; ) .box img ( байрлал: үнэмлэхүй; дээд: 50%; зүүн: 50%; хувиргах: орчуулах (-50%, -50%); өргөн: 300 пиксел өндөр: 300 пикселийн хэмжээ;

Миний бодлоор энэ

хамгийн сайн арга

. Хэрэв та нийтлэлдээ огт өөр пропорциональ зураг ашигладаг бол энэ нь блогт тохиромжтой.

Та эндээс HTML болон CSS-ийн талаар илүү ихийг мэдэж болно:
Жишээ 3

Мөн бид SVG элементүүдэд зургийг оруулбал тухайн агшинд тайрах боломжтой. Тойрог жишээ болгон авч үзье. Бид шошгуудыг ашиглан SVG үүсгэж болно. Дотор нь тойрог болон хээний шошго агуулсан svg хүрээний шошго үүсгэ. Загварын шошгон дээр бид зургийн шошгыг бичдэг. Үүнд бид xlink:href шинж чанарыг зааж өгч, зураг нэмнэ. Бид мөн өргөн ба өндрийн шинж чанаруудыг нэмнэ. Гэхдээ энэ нь бүгд биш юм. Бид дүүргэх утгыг нэмэх шаардлагатай болно. Бидний ажлыг бүрэн гүйцэд гэж үзэхийн тулд бид зургийн шошгонд preserveAspectRatio туслах шинж чанарыг нэмэх бөгөөд энэ нь бидний зургийг "эхнээс нь дуустал" бүхэлд нь тойргоор дүүргэх боломжийг олгоно.

WEB-д зориулж зураг бэлтгэхдээ зургийн шаардлагатай хэсгийг тодруулж, шаардлагагүй хэсгийг таслахын тулд тэдгээрийг тайрах шаардлагатай болдог. Цэвэр уран сайхны шүүлтээс гадна файлын хэмжээг багасгахын тулд тайрах буюу тайрч авах шаардлагатай. Зураг нь жижиг байх тусам түүний файлын хэмжээ багасч, WEB хуудсанд хурдан ачаалагдана.

Зургийн шаардлагагүй хэсгийг хэрхэн арилгах вэ

Зургийн доод ирмэг дээр хангалттай гэрэлтүүлэх боломжгүй нарийн хар туузыг арилгах замаар тайралт хэрхэн хийгдсэнийг харцгаая. Тариалалтыг Crop Tool (C) тусгай хэрэгслээр хийдэг.

Энэ хэрэгслийг сонгохын тулд Tools самбар дээрх Crop Tool (C) товчийг дарна уу.

Зургийн зүүн дээд буланд байгаа дүрс дээр хулганы заагчаа тохируулна уу.

Хулганы зүүн товчийг дараад удаан дарна уу.

Хулганы зүүн товчийг суллахгүйгээр хулганы заагчийг зургийн баруун ирмэгийн доод хэсэгт аваачиж, гарч ирэх тасархай сонголтын хүрээ нь зургийн доод ирмэг дээр нарийхан хар зураас оруулахгүй.

Хулганы зүүн товчийг суллана уу. Хүрээг түгжиж, түүний булан болон хажуугийн дунд хэсэгт дөрвөлжин тэмдэглэгээ гарч ирнэ. Тайрах хүрээний гаднах зургийн хэсэг бараан болж, тайрч байгаа зургийн хэсгийг заана.

Эдгээр тэмдэглэгээг ашиглан та хүрээний хүрээг тохируулах, эргүүлэх боломжтой. Тайрах хүрээг зөөхийн тулд хулганын заагчийг сонгосон хэсэгт байрлуулж, чирнэ үү шаардлагатай зай. Сонгосон талбайн хэмжээг өөрчлөхийн тулд булангийн бариулыг аль нэгийг нь хөдөлгөнө үү. Хэрэв та хөдөлж байхдаа Shift товчийг удаан дарвал тухайн хэсгийн пропорц хадгалагдана. Хүрээг эргүүлэхийн тулд тахир сум хэлбэртэй хулганы заагчийг сонгох хэсгийн гадна байрлуулж, хулганыг хөдөлгөснөөр хүрээний тохиромжтой байрлалд хүрнэ. Тайрахыг цуцлахын тулд Esc товчийг дарна уу.

Сонгох хүрээний бариулыг хөдөлгөснөөр тайрах хүрээ нь зургийн доод ирмэг дээрх нарийхан хар туузыг тооцохгүйгээр зургийг бүхэлд нь багтаасан эсэхийг шалгаарай.

Тайрах талбар дотор давхар товших буюу Enter дарна уу. Зургийг тогтоосон хилийн дагуу тайрах болно.

Зургийн хэмжээг хэрхэн багасгах вэ

Гэхдээ зураг тайрсны дараа ч WEB хуудасны хувьд нэлээд том хэмжээтэй байна. 800 x 600 пикселийн дэлгэцийн нягтралтай (мөн статистикийн дагуу ихэнх вэб хэрэглэгчид одоогоор энэ нягтралтай ажилладаг) зураг нь дэлгэц дээр ихээхэн хэмжээний зай эзэлдэг. Нэмж дурдахад ийм хэмжээтэй зургийн файл нэлээд том байх бөгөөд ачаалахад удаан хугацаа шаардагдана. Тиймээс бид зургийн хэмжээг багасгах бөгөөд энэ нь эргээд файлын хэмжээг багасгах болно.

Image - Image Size цэсний командыг сонгоно. Дэлгэц дээр Image Size харилцах цонх гарч ирнэ.

Харилцах цонхны хамгийн дээд хэсэгт, Pixel Dimensions (хэмжээ пикселээр) хяналтын хэсгүүдийн бүлэгт PSD формат дахь одоогийн файлын хэмжээ - 400.3K, түүнчлэн одоогийн өргөн (өргөн) ба өндрийг (өндөр) зааж өгсөн болно. зургийг пикселээр илэрхийлнэ. Тасалсны дараа таны үнэ цэнэ арай өөр байж болно.

Баримт бичгийн хэмжээ хяналтын бүлэгт сантиметрээр илэрхийлсэн баримт бичгийн хэмжээ ба түүний график нягтралыг (Resolution) зааж өгсөн болно. Пропорцийг хязгаарлах тугийг тохируулах үед програм нь өргөн эсвэл өндрийн аль нэг хэмжээсийг өөрчлөх үед зургийн пропорцийг автоматаар хадгалдаг.

Хяналтын хэсгүүдийн Pixel Dimensions бүлэгт байгаа зургийн хэмжээг өөрчлөхөд Дахин жишээ зургийн дарцаг сонгогдсон эсвэл арилсан эсэхээс хамааран түүний хэмжээс эсвэл график нягтрал зэрэг нь тухайн баримт бичгийн шинж чанар өөрчлөгддөг. Хэрэв энэ тугийг тохируулсан бол баримт бичгийн хэмжээ, үүний дагуу зургийн файлын хэмжээ өөрчлөгдөнө. Хэрэв туг арилгасан бол зөвхөн баримт бичгийн хэмжээсийг өөрчлөх боломжтой. Энэ бүхний тусламжтайгаар түүний график нягтрал зохих ёсоор өөрчлөгдөж, пиксел дэх зургийн хэмжээ, файлын хэмжээ нь тохиргоогүйгээр үлдэх болно.

Хэмжээ эсвэл график нягтралыг багасгах үед Adobe PhotoshopЗурган дээрх хэт илүүдэл мэдээллийг устгаж, эдгээр шинж чанарууд нэмэгдэхэд одоо байгаа пикселийн өнгөний утгууд дээр үндэслэн дутуу мэдээллийг бүрдүүлдэг. Аль ч тохиолдолд програм нь 5 интерполяцийн аргын аль нэгийг ашигладаг бөгөөд үүнийг Дахин жишээ зургийн унадаг жагсаалтаас сонгож болно.

Хэмжээг нь өөрчлөхийг хүссэн зургийг дэлгэц дээр харуулахаар бүтээсэн тул графикийн нягтралыг өөрчлөх ёсгүй.

Зургийн графикийн нягтралыг хадгалж, хэмжээг нь өөрчлөхийн тулд "Дахин жишээ зураг" хайрцгийг тэмдэглэсэн эсэхийг шалгаарай.

Удирдлагын хэсгүүдийн Pixel Dimensions бүлгийн Width оруулах талбарт зургийн өргөний шинэ утгыг пикселээр оруулна уу - 300. Өндөр оруулах талбар дахь зургийн өндрийн утга, мөн Баримт бичгийн хэмжээ дэх баримт бичгийн хэмжээ автоматаар өөрчлөгдөнө. хяналтын хэсгийн бүлэг ( Баримт бичгийн хэмжээ). Харилцах цонхны дээд хэсэгт та шинэ, багасгасан файлын хэмжээ, түүний хажууд хаалтанд өмнөх эзлэхүүнийг харах болно.

OK товчийг дарж Зургийн Хэмжээ харилцах цонхыг хаа. Тодорхойлсон шинж чанаруудыг ашиглах бөгөөд баримт бичгийн цонхны зургийн хэмжээ багасна.

Хэмжээг нь өөрчлөх үед зургийн шинж чанараа алдахаас хэрхэн сэргийлэх вэ

Өмнө дурьдсанчлан, зургийн хэмжээсийг багасгах нь түүнээс хэт их мэдээллийг арилгах бөгөөд энэ нь тод байдлыг тодорхой хэмжээгээр бууруулахад хүргэдэг. Unsharp Mask шүүлтүүрийг ашигласнаар зургийн тод байдлыг тодорхой хэмжээгээр сэргээх боломжтой.

Filter - Sharpen - Unsharp Mask (Filter - Sharpness - Contour sharpness) цэсний командыг сонгоно. Unsharp Mask харилцах цонх дэлгэц дээр гарч ирнэ.

Зургийн тод байдлыг сэргээхийн тулд Тоо хэмжээ гулсагчийг хөдөлгөнө үү. Энэ параметрийн утга нь 50-60% дотор байх ёстой.

Urisharp Mask харилцах цонхыг хаахын тулд OK дарна уу. Зураг илүү хурц болно.

Файл - Хадгалах цэсийн командыг сонгон баримтыг хадгална.

Зургийн хэмжээг өөрчлөх үед шаардлагагүй мэдээллийг устгаснаас болж чанар нь буурдаг тул боломжтой бол энэ үйлдлээс зайлсхийх хэрэгтэй. Хэрэв та зургийг сканнердаж байгаа бол энэ алхамд түүний хэмжээг олж, хамгийн сайн дэлгэцийн чанарыг хангах нягтралтайгаар скан хийх нь дээр.